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

IT技术 javascript html reactjs eslint
2021-05-14 20:07:26

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

下拉列表中的 optinos 是用标签制作的:<a href>:

<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>
2个回答

按钮是交互式控件,因此是可聚焦的。如果将按钮角色添加到自身不可聚焦的元素(例如 <span>,<div><p>),则必须使用 tabindex 属性使按钮可聚焦。

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

HTML 属性tabindex对应tabIndex于 React 中的属性

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

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

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

添加标签索引:

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

在首先向地图添加迭代器之后: (filter, i)