如何修复“按钮”交互角色必须是可聚焦的

Posted 2023-02-22

【中文标题】如何修复“按钮”交互角色必须是可聚焦的

【英文标题】：How to fix 'button' interactive role must be focusable

【发布时间】：2019-10-19 20:41:55

【问题描述】：

我有用户可以选择的下拉选项列表。

下拉菜单中的 optinos 使用标签：:

<a onClick=() => handleSelect(filter) role="button">
   filter.name
</a>

问题是我必须添加tabIndex="0" or -1，以修复来自 Eslint 的错误。

但是当我添加tabIndex=0 时，我的按钮不再起作用。

还有其他方法可以解决这个错误吗？

这是下拉组件的外观：

<ul name="filters" className="dropdown">
    filterOptions.map((filter) => (
      <li
        key=filter.id
        defaultChecked=filter.name
        name=filter.name
        className=`option option-$filter.selected ? 'selected' : 'unselected'`
      >
        <span className=`option-$filter.selected ? 'checked-box' : 'unchecked-box' ` />

        <a onClick=() => handleSelect(filter) role="button">
          filter.name
        </a>
      </li>
    ))
  </ul>

【参考方案1】：

按钮是交互式控件，因此具有焦点。如果按钮 角色被添加到本身不可聚焦的元素（例如 <span>、<div> 或 <p>) 然后，必须使用 tabindex 属性 使按钮具有焦点。

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role#Accessibility_concerns

html属性tabindex对应于属性tabIndex 反应。

https://reactjs.org/docs/dom-elements.html

所以我认为@S.. 答案是正确的：

<a 
  onClick=() => handleSelect(filter) 
  role="button"
  tabIndex=0
>
  filter.name
</a>

【参考方案2】：

添加标签索引：

<a onClick=() => handleSelect(filter) role="button" tabIndex=i>
    filter.name
</a>

在向地图添加迭代器后：(filter, i)

【讨论】：

请注意，将 tabIndex 设置为大于 0 可能会导致问题，因此不建议这样做，因为它会将这些项目置于默认焦点顺序之前。有关详细信息，请参阅 MDN Understanding the Web Content Accessibility Guidelines 和 Don’t Use Tabindex Greater than 0