---
source: crates/biome_js_analyze/tests/spec_tests.rs
expression: invalid.jsx
---
# Input
```jsx
<>
  <div role="range"></div>
  <div role="datepicker"></div>
  <div role=""></div>
  <Foo role="Button" />
  <Foo role="datepicker" />
  <div role="unknown-invalid-role" />
  <div role="tabpanel row foobar"></div>
  <div role="doc-endnotes range"></div>
  <div role={null}></div>
  <Foo role="datepicker" />
</>

```

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

  ! Enforce that elements with ARIA roles must use a valid, non-abstract ARIA role.
  
    1 │ <>
  > 2 │   <div role="range"></div>
      │   ^^^^^^^^^^^^^^^^^^
    3 │   <div role="datepicker"></div>
    4 │   <div role=""></div>
  
  i Check WAI-ARIA for valid roles or provide options accordingly.
  
  i Unsafe fix: Remove the invalid role attribute.
     Check the list of all valid role attributes.
  
    2 │ ··<div·role="range"></div>
      │        ------------       

```

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

  ! Enforce that elements with ARIA roles must use a valid, non-abstract ARIA role.
  
    1 │ <>
    2 │   <div role="range"></div>
  > 3 │   <div role="datepicker"></div>
      │   ^^^^^^^^^^^^^^^^^^^^^^^
    4 │   <div role=""></div>
    5 │   <Foo role="Button" />
  
  i Check WAI-ARIA for valid roles or provide options accordingly.
  
  i Unsafe fix: Remove the invalid role attribute.
     Check the list of all valid role attributes.
  
    3 │ ··<div·role="datepicker"></div>
      │        -----------------       

```

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

  ! Enforce that elements with ARIA roles must use a valid, non-abstract ARIA role.
  
    2 │   <div role="range"></div>
    3 │   <div role="datepicker"></div>
  > 4 │   <div role=""></div>
      │   ^^^^^^^^^^^^^
    5 │   <Foo role="Button" />
    6 │   <Foo role="datepicker" />
  
  i Check WAI-ARIA for valid roles or provide options accordingly.
  
  i Unsafe fix: Remove the invalid role attribute.
     Check the list of all valid role attributes.
  
    4 │ ··<div·role=""></div>
      │        -------       

```

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

  ! Enforce that elements with ARIA roles must use a valid, non-abstract ARIA role.
  
    3 │   <div role="datepicker"></div>
    4 │   <div role=""></div>
  > 5 │   <Foo role="Button" />
      │   ^^^^^^^^^^^^^^^^^^^^^
    6 │   <Foo role="datepicker" />
    7 │   <div role="unknown-invalid-role" />
  
  i Check WAI-ARIA for valid roles or provide options accordingly.
  
  i Unsafe fix: Remove the invalid role attribute.
     Check the list of all valid role attributes.
  
    5 │ ··<Foo·role="Button"·/>
      │        --------------  

```

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

  ! Enforce that elements with ARIA roles must use a valid, non-abstract ARIA role.
  
    4 │   <div role=""></div>
    5 │   <Foo role="Button" />
  > 6 │   <Foo role="datepicker" />
      │   ^^^^^^^^^^^^^^^^^^^^^^^^^
    7 │   <div role="unknown-invalid-role" />
    8 │   <div role="tabpanel row foobar"></div>
  
  i Check WAI-ARIA for valid roles or provide options accordingly.
  
  i Unsafe fix: Remove the invalid role attribute.
     Check the list of all valid role attributes.
  
    6 │ ··<Foo·role="datepicker"·/>
      │        ------------------  

```

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

  ! Enforce that elements with ARIA roles must use a valid, non-abstract ARIA role.
  
    5 │   <Foo role="Button" />
    6 │   <Foo role="datepicker" />
  > 7 │   <div role="unknown-invalid-role" />
      │   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    8 │   <div role="tabpanel row foobar"></div>
    9 │   <div role="doc-endnotes range"></div>
  
  i Check WAI-ARIA for valid roles or provide options accordingly.
  
  i Unsafe fix: Remove the invalid role attribute.
     Check the list of all valid role attributes.
  
    7 │ ··<div·role="unknown-invalid-role"·/>
      │        ----------------------------  

```

```
invalid.jsx:8:3 lint/a11y/useValidAriaRole  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Enforce that elements with ARIA roles must use a valid, non-abstract ARIA role.
  
     6 │   <Foo role="datepicker" />
     7 │   <div role="unknown-invalid-role" />
   > 8 │   <div role="tabpanel row foobar"></div>
       │   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
     9 │   <div role="doc-endnotes range"></div>
    10 │   <div role={null}></div>
  
  i Check WAI-ARIA for valid roles or provide options accordingly.
  
  i Unsafe fix: Remove the invalid role attribute.
     Check the list of all valid role attributes.
  
    8 │ ··<div·role="tabpanel·row·foobar"></div>
      │        --------------------------       

```

```
invalid.jsx:9:3 lint/a11y/useValidAriaRole  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Enforce that elements with ARIA roles must use a valid, non-abstract ARIA role.
  
     7 │   <div role="unknown-invalid-role" />
     8 │   <div role="tabpanel row foobar"></div>
   > 9 │   <div role="doc-endnotes range"></div>
       │   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    10 │   <div role={null}></div>
    11 │   <Foo role="datepicker" />
  
  i Check WAI-ARIA for valid roles or provide options accordingly.
  
  i Unsafe fix: Remove the invalid role attribute.
     Check the list of all valid role attributes.
  
    9 │ ··<div·role="doc-endnotes·range"></div>
      │        -------------------------       

```

```
invalid.jsx:10:3 lint/a11y/useValidAriaRole  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Enforce that elements with ARIA roles must use a valid, non-abstract ARIA role.
  
     8 │   <div role="tabpanel row foobar"></div>
     9 │   <div role="doc-endnotes range"></div>
  > 10 │   <div role={null}></div>
       │   ^^^^^^^^^^^^^^^^^
    11 │   <Foo role="datepicker" />
    12 │ </>
  
  i Check WAI-ARIA for valid roles or provide options accordingly.
  
  i Unsafe fix: Remove the invalid role attribute.
     Check the list of all valid role attributes.
  
    10 │ ··<div·role={null}></div>
       │        -----------       

```

```
invalid.jsx:11:3 lint/a11y/useValidAriaRole  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Enforce that elements with ARIA roles must use a valid, non-abstract ARIA role.
  
     9 │   <div role="doc-endnotes range"></div>
    10 │   <div role={null}></div>
  > 11 │   <Foo role="datepicker" />
       │   ^^^^^^^^^^^^^^^^^^^^^^^^^
    12 │ </>
    13 │ 
  
  i Check WAI-ARIA for valid roles or provide options accordingly.
  
  i Unsafe fix: Remove the invalid role attribute.
     Check the list of all valid role attributes.
  
    11 │ ··<Foo·role="datepicker"·/>
       │        ------------------  

```