← Back to rules

jsx-a11y/aria-activedescendant-has-tabindex 正しさ

何をするか

aria-activedescendant が設定された要素は、タブ順序に含まれている必要があることを強制します。

なぜ問題なのか

aria-activedescendant が設定された要素は、キーボード入力で移動できるようにするため、タブ順序に含まれている必要があります。適切な tabindex が設定されていない場合、画面読み上げソフトの利用者がキーボードでのナビゲーションを通じてその要素にアクセスできず、機能が利用できなくなってしまいます。

例

このルールに対する不正なコードの例：

const Bad = <div aria-activedescendant={someID} />;

このルールに対する正しいコードの例：

const Good = (
  <>
    <CustomComponent />
    <CustomComponent aria-activedescendant={someID} />
    <CustomComponent aria-activedescendant={someID} tabIndex={0} />
    <CustomComponent aria-activedescendant={someID} tabIndex={-1} />
    <div />
    <input />
    <div tabIndex={0} />
    <div aria-activedescendant={someID} tabIndex={0} />
    <div aria-activedescendant={someID} tabIndex="0" />
    <div aria-activedescendant={someID} tabIndex={1} />
    <div aria-activedescendant={someID} tabIndex={-1} />
    <div aria-activedescendant={someID} tabIndex="-1" />
    <input aria-activedescendant={someID} />
    <input aria-activedescendant={someID} tabIndex={0} />
    <input aria-activedescendant={someID} tabIndex={-1} />
  </>
);

使用方法

このルールを構成ファイルまたは CLI で有効化するには、以下のように使用できます：

Config (.oxlintrc.json)

{
  "plugins": ["jsx-a11y"],
  "rules": {
    "jsx-a11y/aria-activedescendant-has-tabindex": "error"
  }
}

CLI

oxlint --deny jsx-a11y/aria-activedescendant-has-tabindex --jsx-a11y-plugin

参照

• ルールのソース