How to fix 'button' interactive role must be focusable

user_11220076 0
Viewed 58710

I have list of dropdown options which user can select.

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

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

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

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

Is there are any other way to fix this error?

This is how looks dropdown component:

<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>
eslint reactjs html javascript
2 Answers

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/en-US/docs/Web/Accessibility/ARIA/Roles/button_role#Accessibility_concerns

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

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

So I think @S.. answer is correct:

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

Add a tabindex:

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

after first adding an iterator to your map: (filter, i)

user_6864900
Related