15

我使用以下 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>

这个想法是，当用户单击条目时，它将切换条目的打开状态。换句话说，当用户点击一个打开的常见问题条目时，它将关闭它。否则它会打开它。

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

不幸的是，我认为没有上述 html 标记的替代方法。既然是jsx，也不允许override之类的// eslint-disable-line jsx-a11y/no-static-element-interactions （内联注释会打印到网页上）

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

4

9 回答 9

61

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

于 2020-01-22T20:43:14.013 回答
10

这是您如何修改标记以使其在语义上适当并让 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>如果你要去一个新页面，应该使用an。你也不需要将 tabindex 添加到按钮，因为它们本质上是可聚焦的）。

您可能需要执行一些额外的步骤，使用 ARIA 扩展并控制按钮上的属性，但以上内容应该让您为克服错误打下良好的基础。

于 2017-04-18T11:24:38.543 回答
10

我记得的一种解决方案是使用带有标签索引的锚元素。

<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>
于 2017-04-11T06:52:47.787 回答
9

你可以把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>
于 2019-10-23T23:53:34.853 回答
5

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

于 2020-05-25T12:46:15.600 回答
2

利用

aria-hidden="true"

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

<span aria-hidden="true" onClick={() => void}>Text</span>
于 2020-10-19T06:47:14.203 回答
2

克服或避免 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. 元素不能用于交互元素的父级
于 2021-04-21T16:19:35.557 回答
2

您实际上可以将 eslint 覆盖添加为 JSX 中的注释。您必须将注释嵌套在大括号 {} 内，以便将其解释为 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 */}

查看文档以获取有关在 JSX 中使用 JavaScript 的更多信息。

于 2019-04-05T21:05:43.850 回答
0

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

它当然摆脱jsx-a11y/no-static-element-interactions了结果。

于 2017-04-13T11:41:25.193 回答