`element-supports-aria-prop`

要素の計算されたロールに関わらず、ARIA in HTML が定める要素固有の制約により aria-* 属性が禁止されている場合に警告します。

要素固有の禁止 — 一部の要素状態(例: <input type="hidden">)ではすべての aria-* 属性が禁止され、他の属性が存在する場合や特定の親コンテキストにある場合に個別の属性が禁止されることがあります(例: popover / Invoker Commands API が状態を自動管理するため <button popovertarget> や <button commandfor> 上の aria-expanded、展開状態が open 属性にマッピングされるため <details> 内の最初の <summary> 上の aria-expanded と aria-pressed)。
要素固有のホワイトリスト — 一部の要素は少数の aria-* 属性のみを受け入れます(例: <br> と <wbr> は aria-hidden のみを受け入れる)。ホワイトリスト外の属性は拒否されます。

旧wai-aria-disallowed-propsルールから、no-prohibited-naming、role-supports-aria-propとともに分割されました。旧ルールのdisallowSetImplicitPropsオプションはこのチェックを制御していましたが、今後はこのルール自体を無効化することがオプトアウトの方法になります。

❌ 間違ったコード例

<br aria-atomic="true" />
<input type="hidden" aria-hidden="true" />
<button popovertarget="p" aria-expanded="false">Toggle</button>
<button command="toggle-popover" commandfor="p" aria-expanded="false">Toggle</button>
<details>
  <summary aria-expanded="false">Summary</summary>
</details>

✅ 正しいコード例

<br aria-hidden="true" />
<input type="hidden" />
<button popovertarget="p">Toggle</button>
<button command="toggle-popover" commandfor="p">Toggle</button>
<details>
  <summary>Summary</summary>
</details>

Interface

{
  "element-supports-aria-prop": boolean
}

Default Severity

error

Interface​

Default Severity​

Interface

Default Severity