Question

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

下拉菜单中的

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>

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

Answer 2

添加tabindex：

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

首先将迭代器添加到地图后：(filter, i)

Answer 3

<a
            dataTest="create-event-link"
            className="c-link c-link--text"
            onClick={() => setCreateEvent(!createEvent)}
            role="button"
          >

如何解决“按钮”互动角色必须重点突出

3 个答案: