How to fix 'button' interactive role must be focusable

Question

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> 

Answer 1

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>