web-dev-qa-db-ja.com

「ボタン」のインタラクティブな役割を修正する方法はフォーカス可能でなければならない

ユーザーが選択できるドロップダウンオプションのリストがあります。

ドロップダウンのオプティノは次のタグで作成されています：<a href>：

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

Eslintからのエラーを修正するためにtabIndex="0" or -1を追加する必要があります。

しかし、tabIndex=0を追加すると、ボタンが機能しなくなります。

このエラーを修正する他の方法はありますか？

これは、ドロップダウンコンポーネントの外観です。

<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

ボタンはインタラクティブなコントロールであるため、フォーカス可能です。ボタンの役割がそれ自体ではフォーカスできない要素（<span>、<div>、<p>など）に追加されている場合、ボタンをフォーカス可能にするためにtabindex属性を使用する必要があります。 。

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

HTML属性tabindexは、Reactの属性tabIndexに対応しています。

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

@S ..答えは正しいと思います：

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

Tabindexを追加します。

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

最初にイテレータをマップに追加した後：(filter, i)

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