---
source: crates/biome_js_analyze/tests/spec_tests.rs
expression: invalid.jsx
---
# Input
```jsx
var a = <span role="checkbox"></span>;
var a = <span role="switch"></span>;
var a = <span role="spinbutton"></span>;
var a = <span role="spinbutton" aria-valuemax="100"></span>;
var a = <span role="spinbutton" aria-valuemin="0"></span>;
var a = <span role="spinbutton" aria-valuemin="0" aria-valuemax="100"></span>;
var a = <span role="slider" aria-valuemin="0"></span>;
var a = <span role="slider" aria-valuemax="100"></span>;
var a = <span role="slider" aria-valuemin="0" aria-valuemax="100"></span>;
var a = <span role="separator" aria-valuemin="0"></span>;
var a = <span role="separator" aria-valuemax="100"></span>;
var a = <span role="separator" aria-valuemin="0" aria-valuemax="100"></span>;
var a = <span role="scrollbar" aria-valuemin="0"></span>;
var a = <span role="scrollbar" aria-valuemax="100"></span>;
var a = <span role="scrollbar" aria-valuemin="0" aria-valuemax="100"></span>;
var a = <span role="scrollbar" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal"></span>;
var a = <span role="radio"></span>;
var a = <span role="option"></span>;
var a = <span role="heading"></span>;
var a = <span role="combobox"></span>;
var a = <span role="combobox" aria-expanded="true"></span>;
var a = <span role="combobox" aria-controls="true"></span>;
var a = <span role="menuitemcheckbox" ></span>;
var a = <span role="menuitemradio" ></span>;
```

# Diagnostics
```
invalid.jsx:1:15 lint/a11y/useAriaPropsForRole ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! The element with the checkbox ARIA role does not have the required ARIA attributes.
  
  > 1 │ var a = <span role="checkbox"></span>;
      │               ^^^^^^^^^^^^^^^
    2 │ var a = <span role="switch"></span>;
    3 │ var a = <span role="spinbutton"></span>;
  
  i Missing ARIA prop(s):
  
  - aria-checked
  

```

```
invalid.jsx:2:15 lint/a11y/useAriaPropsForRole ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! The element with the switch ARIA role does not have the required ARIA attributes.
  
    1 │ var a = <span role="checkbox"></span>;
  > 2 │ var a = <span role="switch"></span>;
      │               ^^^^^^^^^^^^^
    3 │ var a = <span role="spinbutton"></span>;
    4 │ var a = <span role="spinbutton" aria-valuemax="100"></span>;
  
  i Missing ARIA prop(s):
  
  - aria-checked
  

```

```
invalid.jsx:3:15 lint/a11y/useAriaPropsForRole ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! The element with the spinbutton ARIA role does not have the required ARIA attributes.
  
    1 │ var a = <span role="checkbox"></span>;
    2 │ var a = <span role="switch"></span>;
  > 3 │ var a = <span role="spinbutton"></span>;
      │               ^^^^^^^^^^^^^^^^^
    4 │ var a = <span role="spinbutton" aria-valuemax="100"></span>;
    5 │ var a = <span role="spinbutton" aria-valuemin="0"></span>;
  
  i Missing ARIA prop(s):
  
  - aria-valuemax
  - aria-valuemin
  - aria-valuenow
  

```

```
invalid.jsx:4:15 lint/a11y/useAriaPropsForRole ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! The element with the spinbutton ARIA role does not have the required ARIA attributes.
  
    2 │ var a = <span role="switch"></span>;
    3 │ var a = <span role="spinbutton"></span>;
  > 4 │ var a = <span role="spinbutton" aria-valuemax="100"></span>;
      │               ^^^^^^^^^^^^^^^^^
    5 │ var a = <span role="spinbutton" aria-valuemin="0"></span>;
    6 │ var a = <span role="spinbutton" aria-valuemin="0" aria-valuemax="100"></span>;
  
  i Missing ARIA prop(s):
  
  - aria-valuemin
  - aria-valuenow
  

```

```
invalid.jsx:5:15 lint/a11y/useAriaPropsForRole ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! The element with the spinbutton ARIA role does not have the required ARIA attributes.
  
    3 │ var a = <span role="spinbutton"></span>;
    4 │ var a = <span role="spinbutton" aria-valuemax="100"></span>;
  > 5 │ var a = <span role="spinbutton" aria-valuemin="0"></span>;
      │               ^^^^^^^^^^^^^^^^^
    6 │ var a = <span role="spinbutton" aria-valuemin="0" aria-valuemax="100"></span>;
    7 │ var a = <span role="slider" aria-valuemin="0"></span>;
  
  i Missing ARIA prop(s):
  
  - aria-valuemax
  - aria-valuenow
  

```

```
invalid.jsx:6:15 lint/a11y/useAriaPropsForRole ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! The element with the spinbutton ARIA role does not have the required ARIA attributes.
  
    4 │ var a = <span role="spinbutton" aria-valuemax="100"></span>;
    5 │ var a = <span role="spinbutton" aria-valuemin="0"></span>;
  > 6 │ var a = <span role="spinbutton" aria-valuemin="0" aria-valuemax="100"></span>;
      │               ^^^^^^^^^^^^^^^^^
    7 │ var a = <span role="slider" aria-valuemin="0"></span>;
    8 │ var a = <span role="slider" aria-valuemax="100"></span>;
  
  i Missing ARIA prop(s):
  
  - aria-valuenow
  

```

```
invalid.jsx:7:15 lint/a11y/useAriaPropsForRole ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! The element with the slider ARIA role does not have the required ARIA attributes.
  
    5 │ var a = <span role="spinbutton" aria-valuemin="0"></span>;
    6 │ var a = <span role="spinbutton" aria-valuemin="0" aria-valuemax="100"></span>;
  > 7 │ var a = <span role="slider" aria-valuemin="0"></span>;
      │               ^^^^^^^^^^^^^
    8 │ var a = <span role="slider" aria-valuemax="100"></span>;
    9 │ var a = <span role="slider" aria-valuemin="0" aria-valuemax="100"></span>;
  
  i Missing ARIA prop(s):
  
  - aria-valuemax
  - aria-valuenow
  

```

```
invalid.jsx:8:15 lint/a11y/useAriaPropsForRole ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! The element with the slider ARIA role does not have the required ARIA attributes.
  
     6 │ var a = <span role="spinbutton" aria-valuemin="0" aria-valuemax="100"></span>;
     7 │ var a = <span role="slider" aria-valuemin="0"></span>;
   > 8 │ var a = <span role="slider" aria-valuemax="100"></span>;
       │               ^^^^^^^^^^^^^
     9 │ var a = <span role="slider" aria-valuemin="0" aria-valuemax="100"></span>;
    10 │ var a = <span role="separator" aria-valuemin="0"></span>;
  
  i Missing ARIA prop(s):
  
  - aria-valuemin
  - aria-valuenow
  

```

```
invalid.jsx:9:15 lint/a11y/useAriaPropsForRole ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! The element with the slider ARIA role does not have the required ARIA attributes.
  
     7 │ var a = <span role="slider" aria-valuemin="0"></span>;
     8 │ var a = <span role="slider" aria-valuemax="100"></span>;
   > 9 │ var a = <span role="slider" aria-valuemin="0" aria-valuemax="100"></span>;
       │               ^^^^^^^^^^^^^
    10 │ var a = <span role="separator" aria-valuemin="0"></span>;
    11 │ var a = <span role="separator" aria-valuemax="100"></span>;
  
  i Missing ARIA prop(s):
  
  - aria-valuenow
  

```

```
invalid.jsx:10:15 lint/a11y/useAriaPropsForRole ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! The element with the separator ARIA role does not have the required ARIA attributes.
  
     8 │ var a = <span role="slider" aria-valuemax="100"></span>;
     9 │ var a = <span role="slider" aria-valuemin="0" aria-valuemax="100"></span>;
  > 10 │ var a = <span role="separator" aria-valuemin="0"></span>;
       │               ^^^^^^^^^^^^^^^^
    11 │ var a = <span role="separator" aria-valuemax="100"></span>;
    12 │ var a = <span role="separator" aria-valuemin="0" aria-valuemax="100"></span>;
  
  i Missing ARIA prop(s):
  
  - aria-valuemax
  - aria-valuenow
  

```

```
invalid.jsx:11:15 lint/a11y/useAriaPropsForRole ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! The element with the separator ARIA role does not have the required ARIA attributes.
  
     9 │ var a = <span role="slider" aria-valuemin="0" aria-valuemax="100"></span>;
    10 │ var a = <span role="separator" aria-valuemin="0"></span>;
  > 11 │ var a = <span role="separator" aria-valuemax="100"></span>;
       │               ^^^^^^^^^^^^^^^^
    12 │ var a = <span role="separator" aria-valuemin="0" aria-valuemax="100"></span>;
    13 │ var a = <span role="scrollbar" aria-valuemin="0"></span>;
  
  i Missing ARIA prop(s):
  
  - aria-valuemin
  - aria-valuenow
  

```

```
invalid.jsx:12:15 lint/a11y/useAriaPropsForRole ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! The element with the separator ARIA role does not have the required ARIA attributes.
  
    10 │ var a = <span role="separator" aria-valuemin="0"></span>;
    11 │ var a = <span role="separator" aria-valuemax="100"></span>;
  > 12 │ var a = <span role="separator" aria-valuemin="0" aria-valuemax="100"></span>;
       │               ^^^^^^^^^^^^^^^^
    13 │ var a = <span role="scrollbar" aria-valuemin="0"></span>;
    14 │ var a = <span role="scrollbar" aria-valuemax="100"></span>;
  
  i Missing ARIA prop(s):
  
  - aria-valuenow
  

```

```
invalid.jsx:13:15 lint/a11y/useAriaPropsForRole ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! The element with the scrollbar ARIA role does not have the required ARIA attributes.
  
    11 │ var a = <span role="separator" aria-valuemax="100"></span>;
    12 │ var a = <span role="separator" aria-valuemin="0" aria-valuemax="100"></span>;
  > 13 │ var a = <span role="scrollbar" aria-valuemin="0"></span>;
       │               ^^^^^^^^^^^^^^^^
    14 │ var a = <span role="scrollbar" aria-valuemax="100"></span>;
    15 │ var a = <span role="scrollbar" aria-valuemin="0" aria-valuemax="100"></span>;
  
  i Missing ARIA prop(s):
  
  - aria-valuemax
  - aria-valuenow
  - aria-orientation
  - aria-controls
  

```

```
invalid.jsx:14:15 lint/a11y/useAriaPropsForRole ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! The element with the scrollbar ARIA role does not have the required ARIA attributes.
  
    12 │ var a = <span role="separator" aria-valuemin="0" aria-valuemax="100"></span>;
    13 │ var a = <span role="scrollbar" aria-valuemin="0"></span>;
  > 14 │ var a = <span role="scrollbar" aria-valuemax="100"></span>;
       │               ^^^^^^^^^^^^^^^^
    15 │ var a = <span role="scrollbar" aria-valuemin="0" aria-valuemax="100"></span>;
    16 │ var a = <span role="scrollbar" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal"></span>;
  
  i Missing ARIA prop(s):
  
  - aria-valuemin
  - aria-valuenow
  - aria-orientation
  - aria-controls
  

```

```
invalid.jsx:15:15 lint/a11y/useAriaPropsForRole ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! The element with the scrollbar ARIA role does not have the required ARIA attributes.
  
    13 │ var a = <span role="scrollbar" aria-valuemin="0"></span>;
    14 │ var a = <span role="scrollbar" aria-valuemax="100"></span>;
  > 15 │ var a = <span role="scrollbar" aria-valuemin="0" aria-valuemax="100"></span>;
       │               ^^^^^^^^^^^^^^^^
    16 │ var a = <span role="scrollbar" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal"></span>;
    17 │ var a = <span role="radio"></span>;
  
  i Missing ARIA prop(s):
  
  - aria-valuenow
  - aria-orientation
  - aria-controls
  

```

```
invalid.jsx:16:15 lint/a11y/useAriaPropsForRole ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! The element with the scrollbar ARIA role does not have the required ARIA attributes.
  
    14 │ var a = <span role="scrollbar" aria-valuemax="100"></span>;
    15 │ var a = <span role="scrollbar" aria-valuemin="0" aria-valuemax="100"></span>;
  > 16 │ var a = <span role="scrollbar" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal"></span>;
       │               ^^^^^^^^^^^^^^^^
    17 │ var a = <span role="radio"></span>;
    18 │ var a = <span role="option"></span>;
  
  i Missing ARIA prop(s):
  
  - aria-valuenow
  - aria-controls
  

```

```
invalid.jsx:17:15 lint/a11y/useAriaPropsForRole ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! The element with the radio ARIA role does not have the required ARIA attributes.
  
    15 │ var a = <span role="scrollbar" aria-valuemin="0" aria-valuemax="100"></span>;
    16 │ var a = <span role="scrollbar" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal"></span>;
  > 17 │ var a = <span role="radio"></span>;
       │               ^^^^^^^^^^^^
    18 │ var a = <span role="option"></span>;
    19 │ var a = <span role="heading"></span>;
  
  i Missing ARIA prop(s):
  
  - aria-checked
  

```

```
invalid.jsx:18:15 lint/a11y/useAriaPropsForRole ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! The element with the option ARIA role does not have the required ARIA attributes.
  
    16 │ var a = <span role="scrollbar" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal"></span>;
    17 │ var a = <span role="radio"></span>;
  > 18 │ var a = <span role="option"></span>;
       │               ^^^^^^^^^^^^^
    19 │ var a = <span role="heading"></span>;
    20 │ var a = <span role="combobox"></span>;
  
  i Missing ARIA prop(s):
  
  - aria-selected
  

```

```
invalid.jsx:19:15 lint/a11y/useAriaPropsForRole ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! The element with the heading ARIA role does not have the required ARIA attributes.
  
    17 │ var a = <span role="radio"></span>;
    18 │ var a = <span role="option"></span>;
  > 19 │ var a = <span role="heading"></span>;
       │               ^^^^^^^^^^^^^^
    20 │ var a = <span role="combobox"></span>;
    21 │ var a = <span role="combobox" aria-expanded="true"></span>;
  
  i Missing ARIA prop(s):
  
  - aria-level
  

```

```
invalid.jsx:20:15 lint/a11y/useAriaPropsForRole ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! The element with the combobox ARIA role does not have the required ARIA attributes.
  
    18 │ var a = <span role="option"></span>;
    19 │ var a = <span role="heading"></span>;
  > 20 │ var a = <span role="combobox"></span>;
       │               ^^^^^^^^^^^^^^^
    21 │ var a = <span role="combobox" aria-expanded="true"></span>;
    22 │ var a = <span role="combobox" aria-controls="true"></span>;
  
  i Missing ARIA prop(s):
  
  - aria-controls
  - aria-expanded
  

```

```
invalid.jsx:21:15 lint/a11y/useAriaPropsForRole ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! The element with the combobox ARIA role does not have the required ARIA attributes.
  
    19 │ var a = <span role="heading"></span>;
    20 │ var a = <span role="combobox"></span>;
  > 21 │ var a = <span role="combobox" aria-expanded="true"></span>;
       │               ^^^^^^^^^^^^^^^
    22 │ var a = <span role="combobox" aria-controls="true"></span>;
    23 │ var a = <span role="menuitemcheckbox" ></span>;
  
  i Missing ARIA prop(s):
  
  - aria-controls
  

```

```
invalid.jsx:22:15 lint/a11y/useAriaPropsForRole ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! The element with the combobox ARIA role does not have the required ARIA attributes.
  
    20 │ var a = <span role="combobox"></span>;
    21 │ var a = <span role="combobox" aria-expanded="true"></span>;
  > 22 │ var a = <span role="combobox" aria-controls="true"></span>;
       │               ^^^^^^^^^^^^^^^
    23 │ var a = <span role="menuitemcheckbox" ></span>;
    24 │ var a = <span role="menuitemradio" ></span>;
  
  i Missing ARIA prop(s):
  
  - aria-expanded
  

```

```
invalid.jsx:23:15 lint/a11y/useAriaPropsForRole ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! The element with the menuitemcheckbox ARIA role does not have the required ARIA attributes.
  
    21 │ var a = <span role="combobox" aria-expanded="true"></span>;
    22 │ var a = <span role="combobox" aria-controls="true"></span>;
  > 23 │ var a = <span role="menuitemcheckbox" ></span>;
       │               ^^^^^^^^^^^^^^^^^^^^^^^
    24 │ var a = <span role="menuitemradio" ></span>;
  
  i Missing ARIA prop(s):
  
  - aria-checked
  

```

```
invalid.jsx:24:15 lint/a11y/useAriaPropsForRole ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! The element with the menuitemradio ARIA role does not have the required ARIA attributes.
  
    22 │ var a = <span role="combobox" aria-controls="true"></span>;
    23 │ var a = <span role="menuitemcheckbox" ></span>;
  > 24 │ var a = <span role="menuitemradio" ></span>;
       │               ^^^^^^^^^^^^^^^^^^^^
  
  i Missing ARIA prop(s):
  
  - aria-checked
  

```