---
source: crates/biome_js_analyze/tests/spec_tests.rs
expression: invalid.jsx
---
# Input
```jsx
<>
  <div aria-hidden="true" tabIndex="0" />
  <input aria-hidden="true" />
  <a href="/" aria-hidden="true" />
  <button aria-hidden="true" />
  <textarea aria-hidden="true" />
  <p tabIndex="0" aria-hidden="true">text</p>
</>
```

# Diagnostics
```
invalid.jsx:2:3 lint/a11y/noAriaHiddenOnFocusable  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Disallow aria-hidden="true" from being set on focusable elements.
  
    1 │ <>
  > 2 │   <div aria-hidden="true" tabIndex="0" />
      │   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    3 │   <input aria-hidden="true" />
    4 │   <a href="/" aria-hidden="true" />
  
  i aria-hidden should not be set to true on focusable elements because this can lead to confusing behavior for screen reader users.
  
  i Unsafe fix: Remove the aria-hidden attribute from the element.
  
    2 │ ··<div·aria-hidden="true"·tabIndex="0"·/>
      │        -------------------               

```

```
invalid.jsx:3:3 lint/a11y/noAriaHiddenOnFocusable  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Disallow aria-hidden="true" from being set on focusable elements.
  
    1 │ <>
    2 │   <div aria-hidden="true" tabIndex="0" />
  > 3 │   <input aria-hidden="true" />
      │   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    4 │   <a href="/" aria-hidden="true" />
    5 │   <button aria-hidden="true" />
  
  i aria-hidden should not be set to true on focusable elements because this can lead to confusing behavior for screen reader users.
  
  i Unsafe fix: Remove the aria-hidden attribute from the element.
  
    3 │ ··<input·aria-hidden="true"·/>
      │          -------------------  

```

```
invalid.jsx:4:3 lint/a11y/noAriaHiddenOnFocusable  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Disallow aria-hidden="true" from being set on focusable elements.
  
    2 │   <div aria-hidden="true" tabIndex="0" />
    3 │   <input aria-hidden="true" />
  > 4 │   <a href="/" aria-hidden="true" />
      │   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    5 │   <button aria-hidden="true" />
    6 │   <textarea aria-hidden="true" />
  
  i aria-hidden should not be set to true on focusable elements because this can lead to confusing behavior for screen reader users.
  
  i Unsafe fix: Remove the aria-hidden attribute from the element.
  
    4 │ ··<a·href="/"·aria-hidden="true"·/>
      │               -------------------  

```

```
invalid.jsx:5:3 lint/a11y/noAriaHiddenOnFocusable  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Disallow aria-hidden="true" from being set on focusable elements.
  
    3 │   <input aria-hidden="true" />
    4 │   <a href="/" aria-hidden="true" />
  > 5 │   <button aria-hidden="true" />
      │   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    6 │   <textarea aria-hidden="true" />
    7 │   <p tabIndex="0" aria-hidden="true">text</p>
  
  i aria-hidden should not be set to true on focusable elements because this can lead to confusing behavior for screen reader users.
  
  i Unsafe fix: Remove the aria-hidden attribute from the element.
  
    5 │ ··<button·aria-hidden="true"·/>
      │           -------------------  

```

```
invalid.jsx:6:3 lint/a11y/noAriaHiddenOnFocusable  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Disallow aria-hidden="true" from being set on focusable elements.
  
    4 │   <a href="/" aria-hidden="true" />
    5 │   <button aria-hidden="true" />
  > 6 │   <textarea aria-hidden="true" />
      │   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    7 │   <p tabIndex="0" aria-hidden="true">text</p>
    8 │ </>
  
  i aria-hidden should not be set to true on focusable elements because this can lead to confusing behavior for screen reader users.
  
  i Unsafe fix: Remove the aria-hidden attribute from the element.
  
    6 │ ··<textarea·aria-hidden="true"·/>
      │             -------------------  

```

```
invalid.jsx:7:3 lint/a11y/noAriaHiddenOnFocusable  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Disallow aria-hidden="true" from being set on focusable elements.
  
    5 │   <button aria-hidden="true" />
    6 │   <textarea aria-hidden="true" />
  > 7 │   <p tabIndex="0" aria-hidden="true">text</p>
      │   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    8 │ </>
  
  i aria-hidden should not be set to true on focusable elements because this can lead to confusing behavior for screen reader users.
  
  i Unsafe fix: Remove the aria-hidden attribute from the element.
  
    7 │ ··<p·tabIndex="0"·aria-hidden="true">text</p>
      │                   ------------------         

```