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