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标记会触发此契约违规：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的锚元素。

TimeAllSecondes

Answer 3

以下是如何修改标记以在语义上合适并从<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>内为您提供了附加点击事件的相应元素（您希望在此处使用按钮，因为您正在切换状态。{{1如果你要去一个新的页面，你应该使用。你也不需要为一个按钮添加一个tabindex，因为它们本身就是可以聚焦的。）

您可能希望实施一些额外的步骤，使用ARIA扩展并控制按钮上的属性，但上述内容可以帮助您找到超越错误的良好基础。

Answer 4

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

Answer 5

我没有使用折叠/展开交互功能滚动我的faq表实现，而是将其替换为react-collapsible。

当然，它会消除jsx-a11y/no-static-element-interactions。

Answer 6

您实际上可以在JSX中添加eslint覆盖作为注释。您必须将注释嵌套在大括号{}内，以便将其解释为JavaScript。然后，当然，由于它是JavaScript注释，因此不会在JSX中呈现。

根据您的样式首选项，您可以直接在代码之前的一行上完成

{/* eslint-disable-next-line */}
<li key={faqKey} className={styles.entry} onClick={handleExpandFn}>

或者在同一行的结尾

<li key={faqKey} className={styles.entry} onClick={handleExpandFn}> {/* eslint-disable-line */}

查看docs，了解有关在JSX内使用JavaScript的更多信息。

Answer 7

您可以将eslint-disable-line放入jsx

  <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 8

使用

aria-hidden="true"

在非交互式元素标签上。喜欢

<span aria-hidden="true" onClick={() => void}>Text</span>

Answer 9

克服或避免 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.

也有限制：

对辅助技术隐藏内容
不能用于可聚焦
元素不能用于交互元素的父元素

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

9 个答案: