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>
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
tabindexcorresponds to the attributetabIndexin 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)