---
source: crates/biome_js_analyze/tests/spec_tests.rs
expression: invalid.jsx
---
# Input
```jsx
var a = <span role="checkbox" aria-checked="test"></span>;
var a = <span aria-autocomplete="test"></span>;
var a = <span aria-invalid="foo"></span>;
var a = <span aria-invalid={`foo` ></span>;
var a = <span aria-invalid={"foo"}></span>;
var a = <span aria-errormessage=""></span>;
var a = <span aria-relevant="fancy"></span>;
var a = <span aria-labelledby=""></span>;
var a = <span aria-labelledby={``}></span>;
var a = <span aria-labelledby={""}></span>;
var a = <span aria-details=""></span>;
var a = <span aria-setsize="hey"></span>;
var a = <span aria-valuemax="hey"></span>;
var a = <span aria-dropeffect="hey"></span>;
var a = <span aria-orientation="hey"></span>;

```

# Diagnostics
```
invalid.jsx:1:31 lint/a11y/useValidAriaValues ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! The value of the ARIA attribute aria-checked is not correct.
  
  > 1 │ var a = <span role="checkbox" aria-checked="test"></span>;
      │                               ^^^^^^^^^^^^^^^^^^^
    2 │ var a = <span aria-autocomplete="test"></span>;
    3 │ var a = <span aria-invalid="foo"></span>;
  
  i The only supported value for the aria-checked property one of the following:
  
  - true
  - false
  - mixed
  

```

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

  ! The value of the ARIA attribute aria-autocomplete is not correct.
  
    1 │ var a = <span role="checkbox" aria-checked="test"></span>;
  > 2 │ var a = <span aria-autocomplete="test"></span>;
      │               ^^^^^^^^^^^^^^^^^^^^^^^^
    3 │ var a = <span aria-invalid="foo"></span>;
    4 │ var a = <span aria-invalid={`foo` ></span>;
  
  i The only supported value for the aria-autocomplete property is one of the following:
  
  - inline
  - list
  - both
  - none
  

```

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

  ! The value of the ARIA attribute aria-invalid is not correct.
  
    1 │ var a = <span role="checkbox" aria-checked="test"></span>;
    2 │ var a = <span aria-autocomplete="test"></span>;
  > 3 │ var a = <span aria-invalid="foo"></span>;
      │               ^^^^^^^^^^^^^^^^^^
    4 │ var a = <span aria-invalid={`foo` ></span>;
    5 │ var a = <span aria-invalid={"foo"}></span>;
  
  i The only supported value for the aria-invalid property is one of the following:
  
  - grammar
  - false
  - spelling
  - true
  

```

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

  ! The value of the ARIA attribute aria-invalid is not correct.
  
    3 │ var a = <span aria-invalid="foo"></span>;
    4 │ var a = <span aria-invalid={`foo` ></span>;
  > 5 │ var a = <span aria-invalid={"foo"}></span>;
      │               ^^^^^^^^^^^^^^^^^^^^
    6 │ var a = <span aria-errormessage=""></span>;
    7 │ var a = <span aria-relevant="fancy"></span>;
  
  i The only supported value for the aria-invalid property is one of the following:
  
  - grammar
  - false
  - spelling
  - true
  

```

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

  ! The value of the ARIA attribute aria-errormessage is not correct.
  
    4 │ var a = <span aria-invalid={`foo` ></span>;
    5 │ var a = <span aria-invalid={"foo"}></span>;
  > 6 │ var a = <span aria-errormessage=""></span>;
      │               ^^^^^^^^^^^^^^^^^^^^
    7 │ var a = <span aria-relevant="fancy"></span>;
    8 │ var a = <span aria-labelledby=""></span>;
  
  i The only supported value is text.
  

```

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

  ! The value of the ARIA attribute aria-relevant is not correct.
  
    5 │ var a = <span aria-invalid={"foo"}></span>;
    6 │ var a = <span aria-errormessage=""></span>;
  > 7 │ var a = <span aria-relevant="fancy"></span>;
      │               ^^^^^^^^^^^^^^^^^^^^^
    8 │ var a = <span aria-labelledby=""></span>;
    9 │ var a = <span aria-labelledby={``}></span>;
  
  i The values supported for aria-relevant property are one or more of the following:
  
  - additions
  - all
  - removals
  - text
  

```

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

  ! The value of the ARIA attribute aria-labelledby is not correct.
  
     6 │ var a = <span aria-errormessage=""></span>;
     7 │ var a = <span aria-relevant="fancy"></span>;
   > 8 │ var a = <span aria-labelledby=""></span>;
       │               ^^^^^^^^^^^^^^^^^^
     9 │ var a = <span aria-labelledby={``}></span>;
    10 │ var a = <span aria-labelledby={""}></span>;
  
  i The only supported value is text.
  

```

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

  ! The value of the ARIA attribute aria-labelledby is not correct.
  
     7 │ var a = <span aria-relevant="fancy"></span>;
     8 │ var a = <span aria-labelledby=""></span>;
   > 9 │ var a = <span aria-labelledby={``}></span>;
       │               ^^^^^^^^^^^^^^^^^^^^
    10 │ var a = <span aria-labelledby={""}></span>;
    11 │ var a = <span aria-details=""></span>;
  
  i The only supported value is text.
  

```

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

  ! The value of the ARIA attribute aria-labelledby is not correct.
  
     8 │ var a = <span aria-labelledby=""></span>;
     9 │ var a = <span aria-labelledby={``}></span>;
  > 10 │ var a = <span aria-labelledby={""}></span>;
       │               ^^^^^^^^^^^^^^^^^^^^
    11 │ var a = <span aria-details=""></span>;
    12 │ var a = <span aria-setsize="hey"></span>;
  
  i The only supported value is text.
  

```

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

  ! The value of the ARIA attribute aria-details is not correct.
  
     9 │ var a = <span aria-labelledby={``}></span>;
    10 │ var a = <span aria-labelledby={""}></span>;
  > 11 │ var a = <span aria-details=""></span>;
       │               ^^^^^^^^^^^^^^^
    12 │ var a = <span aria-setsize="hey"></span>;
    13 │ var a = <span aria-valuemax="hey"></span>;
  
  i The only supported value is text.
  

```

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

  ! The value of the ARIA attribute aria-setsize is not correct.
  
    10 │ var a = <span aria-labelledby={""}></span>;
    11 │ var a = <span aria-details=""></span>;
  > 12 │ var a = <span aria-setsize="hey"></span>;
       │               ^^^^^^^^^^^^^^^^^^
    13 │ var a = <span aria-valuemax="hey"></span>;
    14 │ var a = <span aria-dropeffect="hey"></span>;
  
  i The only value supported is a number without fractional components.
  

```

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

  ! The value of the ARIA attribute aria-valuemax is not correct.
  
    11 │ var a = <span aria-details=""></span>;
    12 │ var a = <span aria-setsize="hey"></span>;
  > 13 │ var a = <span aria-valuemax="hey"></span>;
       │               ^^^^^^^^^^^^^^^^^^^
    14 │ var a = <span aria-dropeffect="hey"></span>;
    15 │ var a = <span aria-orientation="hey"></span>;
  
  i The only supported value is number.
  

```

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

  ! The value of the ARIA attribute aria-dropeffect is not correct.
  
    12 │ var a = <span aria-setsize="hey"></span>;
    13 │ var a = <span aria-valuemax="hey"></span>;
  > 14 │ var a = <span aria-dropeffect="hey"></span>;
       │               ^^^^^^^^^^^^^^^^^^^^^
    15 │ var a = <span aria-orientation="hey"></span>;
    16 │ 
  
  i The values supported for aria-dropeffect property are one or more of the following:
  
  - copy
  - execute
  - link
  - move
  - none
  - popup
  

```

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

  ! The value of the ARIA attribute aria-orientation is not correct.
  
    13 │ var a = <span aria-valuemax="hey"></span>;
    14 │ var a = <span aria-dropeffect="hey"></span>;
  > 15 │ var a = <span aria-orientation="hey"></span>;
       │               ^^^^^^^^^^^^^^^^^^^^^^
    16 │ 
  
  i The only supported value for the aria-orientation property is one of the following:
  
  - vertical
  - undefined
  - horizontal
  

```