How to fix 'button' interactive role must be focusable
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 attributetabIndex
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>
Add a tabindex:
<a onClick={() => handleSelect(filter)} role="button" tabIndex={i}>
{filter.name}
</a>
after first adding an iterator to your map: (filter, i)