jsx-a11y/aria-role 正しさ
何を行うか
ARIA ロールを持つ要素には、有効な非抽象的な ARIA ロールを使用する必要があります。ロール定義の参照は、WAI-ARIA のサイトにあります。
なぜ問題なのか
この成功基準の目的は、補助技術（AT）がコンテンツ内のユーザーインターフェースコントロールに関する情報を収集し、アクティブ化（または設定）し、状態の更新を追跡できることを保証することです（視覚障害者などに利用されるスクリーンリーダー、画面拡大ソフト、音声認識ソフトウェアなど）。
アクセシブルな技術からの標準的なコントロールを使用している場合、このプロセスは明確です。ユーザーインターフェース要素が仕様通りに使用されている限り、この規定の条件は満たされます。
しかしカスタムコントロールを作成する場合、またはコードやスクリプトで通常とは異なるロールおよび/または機能を持つようにインターフェース要素をプログラムする場合、補助技術に重要な情報を提供し、補助技術によって制御できるようにするために追加の措置が必要になります。ユーザーインターフェースコントロールの特に重要な状態は、フォーカスを持っているかどうかです。コントロールのフォーカス状態はプログラム的に判定可能であり、フォーカス変更の通知はユーザーエージェントおよび補助技術に送信されます。その他のユーザーインターフェースコントロールの状態の例として、チェックボックスやラジオボタンが選択されたかどうか、または折りたたみ可能なツリーまたはリストノードが展開または折りたたまれているかどうかがあります。
例
このルールにおける誤ったコードの例：
<div role="datepicker"></div> <!-- 不良: "datepicker" は ARIA ロールではありません -->
<div role="range"></div> <!-- 不良: "range" は _抽象的_ な ARIA ロールです -->
<div role=""></div> <!-- 不良: 空の ARIA ロールは許可されていません -->
<Foo role={role}></Foo> <!-- 不良: ignoreNonDOM が false または未設定です -->このルールにおける正しいコードの例：
<div role="button"></div> <!-- 良い: "button" は有効な ARIA ロールです -->
<div role={role}></div> <!-- 良い: role は変数であり、実行時まで判別できません。 -->
<div></div> <!-- 良い: ARIA ロールなし -->
<Foo role={role}></Foo> <!-- 良い: ignoreNonDOM が true に設定されています -->設定
このルールは以下のプロパティを持つ設定オブジェクトを受け入れます：
allowedInvalidRoles
type: string[]
default: []
ARIA 標準に加えて許可されるカスタムロール。
ignoreNonDOM
type: boolean
default: false
開発者が作成したコンポーネントのチェックを行うかどうかを決定します。
使用方法
設定ファイルまたは CLI でこのルールを有効化するには、次のように使用できます：
{
"plugins": ["jsx-a11y"],
"rules": {
"jsx-a11y/aria-role": "error"
}
}oxlint --deny jsx-a11y/aria-role --jsx-a11y-plugin