如何解决jsx-a11y/no-static-element-interactions限制？

Question

我使用以下jsx在FAQ表中构造一个条目:

  <li key={faqKey} className={styles.entry} onClick={handleExpandFn}>
    <div>
      <span className={`icon-next ${questionClassname}`} />
      <span className={styles['question-text']}>{faqEntry.question}</span>
    </div>
    {faqEntry.answer}
  </li>

这个想法是当用户点击该条目时,它将切换条目的打开状态.换句话说,当用户点击打开的FAQ条目时,它将关闭它.否则会打开它.

但是,li标签会触发此eslint违规:Visible, non-interactive elements should not have mouse or keyboard event listeners jsx-a11y/no-static-element-interactions

不幸的是,我不认为有上述html标记的替代方法.由于它是jsx,它也不允许覆盖,例如// eslint-disable-line jsx-a11y/no-static-element-interactions (内联注释将打印到网页)

那我该如何解决呢？很高兴使用不同的jsx标记或jsx eslint覆盖

Answer 1

对于那些正在寻找解决方法的人，请role="presentation"在您的标签中使用。

Answer 2

我记得的一种解决方案是使用带有 tab-index 的锚元素。

<a style={{display: 'list-item'}} tabIndex={-42} key={faqKey} className={styles.entry} onClick={handleExpandFn}>
  <div>
    <span className={`icon-next ${questionClassname}`} />
    <span className={styles['question-text']}>{faqEntry.question}</span>
  </div>
  {faqEntry.answer}
</a>

Answer 3

以下是您如何修改标记以使其在语义上合适并关闭 onclick <li>

<li key={faqKey} className={styles.entry}>
  <h3>
    <button type='button' onClick={handleExpandFn}>
      <span className={`icon-next ${questionClassname}`} />
      <span className={styles['question-text']}>{faqEntry.question}</span>
    </button>
  </h3>
  <div className='add_a_panel_class_name_here'>
    {faqEntry.answer}
  </div>
</li>

有了上面的内容：这<h3>将使按标题导航的屏幕阅读器用户可以轻松搜索常见问题解答的标题

放置在<button>里面<h3>给你适当的元素来附加一个点击事件（你想在这里使用一个按钮，因为你正在切换状态。<a>如果你要去一个新页面，应该使用它。你也不需要将 tabindex 添加到按钮，因为它们本质上是可聚焦的）。

您可能想要实现一些额外的步骤，使用按钮上的 ARIA 扩展和控件属性，但以上应该让您为超越错误打下良好的基础。

Answer 4

你可以放入eslint-disable-linejsx

  <li // eslint-disable-line jsx-a11y/no-static-element-interactions
    key={faqKey} 
    className={styles.entry} 
    onClick={handleExpandFn}
   >
    <div>
      <span className={`icon-next ${questionClassname}`} />
      <span className={styles['question-text']}>{faqEntry.question}</span>
    </div>
    {faqEntry.answer}
  </li>

另一种选择，添加 role='presentation'

  <li 
    key={faqKey} 
    className={styles.entry} 
    onClick={handleExpandFn} 
    role='presentation'
  >
    <div>
      <span className={`icon-next ${questionClassname}`} />
      <span className={styles['question-text']}>{faqEntry.question}</span>
    </div>
    {faqEntry.answer}
  </li>

Answer 5

在 ES Lint 中克服或避免这个错误。

您可以根据您的需要和要求使用三件事

aria-hidden="true" - will remove the entire element from the accessibility API
role= "presentation" - The presentation role is used to remove semantic meaning from an element and any of its related child elements.
role= "none" - will remove the semantic meaning of an element while still exposing it to assistive technology. 

也有一些限制：

1. 隐藏辅助技术的内容
2. 不能用于可聚焦的
3. 元素不能在交互式元素的父元素上使用

Answer 6

如果您尝试使用来实现菜单，li那么正确的解决方案是role="menuitem"在您的li标签中使用。有关它的更多详细信息： https: //w3c.github.io/aria/#menuitem