Skip to content
Flint
Blog

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

Section titled “Examples”
<
JSX.IntrinsicElements.div: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
div 
AriaAttributes["aria-hidden"]?: Booleanish | undefined
Indicates whether the element is exposed to an accessibility API.
@see ― aria-disabled.
aria-hidden="true" tabIndex="0" />
Error ts(2322)  ― Type 'string' is not assignable to type 'number'.
<
JSX.IntrinsicElements.input: DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>
input 
AriaAttributes["aria-hidden"]?: Booleanish | undefined
Indicates whether the element is exposed to an accessibility API.
@see ― aria-disabled.
aria-hidden="true" />
<
JSX.IntrinsicElements.a: DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>
a 
AnchorHTMLAttributes<HTMLAnchorElement>.href?: string | undefined
href="/" 
AriaAttributes["aria-hidden"]?: Booleanish | undefined
Indicates whether the element is exposed to an accessibility API.
@see ― aria-disabled.
aria-hidden="true" />
<
JSX.IntrinsicElements.button: DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>
button 
AriaAttributes["aria-hidden"]?: Booleanish | undefined
Indicates whether the element is exposed to an accessibility API.
@see ― aria-disabled.
aria-hidden="true" />

When Not To Use It

Section titled “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

Section titled “Further Reading”

Equivalents in Other Linters

Section titled “Equivalents in Other Linters”
Made with ❤️‍🔥 around the world by the Flint team and contributors.