ariaHiddenFocusables

Reports elements with aria-hidden='true' that are focusable.

✅ This rule is included in the jsx logical and logicalStrict presets.

Elements with aria-hidden="true" should not be reachable via keyboard navigation. When users can focus elements they cannot perceive with a screen reader, it creates confusion and unexpected behavior.

This rule reports on any element that is focusable -either inherently or via tabIndex- and has aria-hidden="true".

Examples

❌ Incorrect

<div aria-hidden="true" tabIndex={0} />

<input aria-hidden="true" />

<a href="/" aria-hidden="true" />

<button aria-hidden="true" />

✅ Correct

<div aria-hidden="true" />

<img aria-hidden="true" />

<button aria-hidden="true" tabIndex={-1} />

<a href="/" />

When Not To Use It

If you separately use a framework that manages focus state for you such that focusable elements with aria-hidden="true" are never focused, you may prefer to disable this rule.

Further Reading

• aria-hidden elements do not contain focusable elements
• Element with aria-hidden has no content in sequential focus navigation
• MDN: aria-hidden

Equivalents in Other Linters

• ESLint: jsx-a11y/no-aria-hidden-on-focusable
• Oxlint: jsx_a11y/no-aria-hidden-on-focusable