Tengo una lista de opciones desplegables que el usuario puede seleccionar.
Los optinos en el menú desplegable se hacen con la etiqueta: <a href>:
<a onClick={() => handleSelect(filter)} role="button"> {filter.name} </a> El problema es que debo agregar tabIndex="0" or -1 para corregir el error de Eslint.
Pero cuando agrego tabIndex=0 , mi botón ya no funciona.
¿Hay alguna otra forma de corregir este error?
Así es como se ve el componente desplegable:
<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>Los botones son controles interactivos y, por lo tanto, enfocables. Si la función del botón se agrega a un elemento que no se puede enfocar por sí mismo (como
<span>,<div>o<p>), entonces, se debe usar el atributo tabindex para que el botón se pueda enfocar.
El atributo HTML
tabindexcorresponde al atributotabIndexen React.
https://reactjs.org/docs/dom-elements.html
Así que creo que @S.. la respuesta es correcta:
<a onClick={() => handleSelect(filter)} role="button" tabIndex={0} > {filter.name} </a>Agregar un tabindex:
<a onClick={() => handleSelect(filter)} role="button" tabIndex={i}> {filter.name} </a> después de agregar primero un iterador a su mapa: (filter, i)