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

Add a tabindex:

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

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