jsx-a11y/no-noninteractive-tabindex 正しさ
何をするか
このルールは、インタラクティブでない要素に、キーボードナビゲーションによってインタラクティブになる可能性がある tabIndex が設定されていないかをチェックします。
なぜ問題なのか
タブキーによるナビゲーションは、ページ上で操作可能な要素に限定されるべきです。 したがって、たとえば順序なしリスト内の項目に tabindex を追加してアクセシブルテクノロジー経由でのナビゲーションを可能にする必要はありません。
これらのアプリケーションは、すでにページの構造（HTML）に基づいてナビゲーション機構を提供しています。 一般的に、ページのタブリング（tab ring）のサイズを小さくするよう努力すべきであり、逆に拡大してはいけません。
例
このルールに対する誤りの例：
jsx
<div tabIndex="0" />
<div role="article" tabIndex="0" />
<article tabIndex="0" />
<article tabIndex={0} />このルールに対する正しい例：
jsx
<div />
<MyButton tabIndex={0} />
<button />
<button tabIndex="0" />
<button tabIndex={0} />
<div />
<div tabIndex="-1" />
<div role="button" tabIndex="0" />
<div role="article" tabIndex="-1" />
<article tabIndex="-1" />設定
このルールは以下のプロパティを持つ設定オブジェクトを受け入れます：
allowExpressionValues
type: boolean
default: true
true である場合、tabIndex の値に式（例：変数、三項演算子）を使用することを許可します。false である場合、文字列リテラルのみが許可されます。
roles
type: string[]
default: ["tabpanel"]
インタラクティブと見なすべき ARIA ロールの配列です。
tags
type: string[]
default: []
インタラクティブと見なすべきカスタム HTML 要素の配列です。
使用方法
このルールを有効にするには、設定ファイルまたは CLI で次のように使用できます：
json
{
"plugins": ["jsx-a11y"],
"rules": {
"jsx-a11y/no-noninteractive-tabindex": "error"
}
}bash
oxlint --deny jsx-a11y/no-noninteractive-tabindex --jsx-a11y-plugin