如何解决“按钮”互动角色必须重点突出 [英] How to fix 'button' interactive role must be focusable

问题描述

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

I have list of dropdown options which user can select.

下拉菜单中的optinos标记为：< a href>：

optinos in dropdown are made with tag: < a href>:

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

问题在于，我必须添加 tabIndex = 0或-1 ，以修复来自Eslint的错误。

Problem is cus I must add tabIndex="0" or -1, to fix error from Eslint.

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

But When I add tabIndex=0, my button does not work anymore.

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

Is there are any other way to fix this error?

这是下拉菜单的外观：

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

推荐答案

按钮是交互式控件因此具有针对性。如果将按钮
角色添加到自身无法聚焦的元素中（例如
< span> ， < div> 或< p> ），则必须使用tabindex属性使
使按钮可聚焦。 / p>

Buttons are interactive controls and thus focusable. If the button role is added to an element that is not focusable by itself (such as <span>, <div> or <p>) then, the tabindex attribute has to be used to make the button focusable.

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

HTML属性 tabindex 对应于属性 tabIndex
React。

The HTML attribute tabindex corresponds to the attribute tabIndex in React.

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

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

So I think @S.. answer is correct:

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

这篇关于如何解决“按钮”互动角色必须重点突出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！