← Back to rules

jsx-a11y/no-static-element-interactions 正しさ

何をするか

イベントハンドラを持つ静的HTML要素は、適切なARIAロールを指定する必要があります。

なぜ問題なのか

静的HTML要素はアクセシビリティの文脈では意味を持ちません。これらの要素にクリックやキーボードイベントハンドラが設定されている場合、支援技術に対してそのインタラクティブな目的を示すためにロールを明示する必要があります。

例

このルールに対する誤りの例：

<div onClick={() => {}} />
<span onKeyDown={handleKeyDown} />

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

<button onClick={() => {}} />
<div onClick={() => {}} role="button" />
<input type="text" onClick={() => {}} />

設定

このルールは以下のプロパティを持つ構成オブジェクトを受け入れます。

allowExpressionValues

型: boolean

デフォルト: false

true の場合、JSX式（例：role={ROLE}）によるロール属性値が許可されます。
false の場合、文字列リテラルのみのロール属性値が許可されます。

handlers

型: string[]

デフォルト: null

このルールを発動させるべきイベントハンドラ名の配列（例：onClick、onKeyDown）。

使用方法

このルールを有効にするには、設定ファイルまたはCLIで次のように使用できます：

設定 (.oxlintrc.json)

{
  "plugins": ["jsx-a11y"],
  "rules": {
    "jsx-a11y/no-static-element-interactions": "error"
  }
}

CLI

oxlint --deny jsx-a11y/no-static-element-interactions --jsx-a11y-plugin

参照

• ルールのソース