noAriaHiddenOnFocusable

JSX and TSX

Summary

Rule available since: v1.4.0
Diagnostic Category: lint/a11y/noAriaHiddenOnFocusable
This rule is recommended, which means is enabled by default.
This rule has an unsafe fix.
The default severity of this rule is error.
Sources:
- Same as jsx-a11y/no-aria-hidden-on-focusable

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "a11y": {
5
        "noAriaHiddenOnFocusable": "error"
6
      }
7
    }
8
  }
9
}

Description

Enforce that aria-hidden=“true” is not set on focusable elements.

aria-hidden="true" can be used to hide purely decorative content from screen reader users. A focusable element with aria-hidden="true" can be reached by keyboard. This can lead to confusion or unexpected behavior for screen reader users.

Example

Invalid

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

code-block.jsx:1:1 lint/a11y/noAriaHiddenOnFocusable  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Disallow aria-hidden=“true” from being set on focusable elements.
  
  > 1 │ <div aria-hidden=“true” tabIndex=“0” />
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ aria-hidden should not be set to true on focusable elements because this can lead to confusing behavior for screen reader users.
  
  ℹ Unsafe fix: Remove the aria-hidden attribute from the element.
  
    1 │ <div·aria-hidden=“true”·tabIndex=“0”·/>
      │      -------------------

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

code-block.jsx:1:1 lint/a11y/noAriaHiddenOnFocusable  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Disallow aria-hidden=“true” from being set on focusable elements.
  
  > 1 │ <a href=”/” aria-hidden=“true” />
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ aria-hidden should not be set to true on focusable elements because this can lead to confusing behavior for screen reader users.
  
  ℹ Unsafe fix: Remove the aria-hidden attribute from the element.
  
    1 │ <a·href=”/“·aria-hidden=“true”·/>
      │             -------------------

Valid

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

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

1
<div aria-hidden="true"><a href="#"></a></div>