web-dev-qa-db-fra.com

Comment corriger le rôle interactif du «bouton» doit être focalisable

J'ai une liste d'options déroulantes que l'utilisateur peut sélectionner.

les optinos en liste déroulante sont faits avec la balise: <a href>:

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

Le problème est parce que je dois ajouter tabIndex="0" or -1, pour corriger l'erreur d'Eslint.

Mais quand j'ajoute tabIndex=0, mon bouton ne fonctionne plus.

Existe-t-il un autre moyen de corriger cette erreur?

Voici à quoi ressemble le composant déroulant:

<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>
javascripthtmlreactjseslint
11
Mark James

Les boutons sont des commandes interactives et donc focalisables. Si le rôle de bouton est ajouté à un élément qui n'est pas focalisable par lui-même (tel que <span>, <div> ou <p>) puis, l'attribut tabindex doit être utilisé pour rendre le bouton focalisable.

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role#Accessibility_concerns

L'attribut HTML tabindex correspond à l'attribut tabIndex dans React.

https://reactjs.org/docs/dom-elements.html

Je pense donc que @S .. la réponse est correcte:

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

Ajoutez un tabindex:

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

après avoir ajouté un itérateur à votre carte: (filter, i)

2
S..
<a
  dataTest="create-event-link"
  className="c-link c-link--text"
  onClick={() => setCreateEvent(!createEvent)}
  role="button"
>
1
Hilal Aissani