Skip to content

useValidAriaValues

Diagnostic Category: lint/a11y/useValidAriaValues

Since: v1.0.0

Sources:

Enforce that ARIA state and property values are valid.

<span role="checkbox" aria-checked="test">some text</span>
code-block.jsx:1:23 lint/a11y/useValidAriaValues ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

The value of the ARIA attribute aria-checked is not correct.

> 1 │ <span role=“checkbox” aria-checked=“test”>some text</span>
^^^^^^^^^^^^^^^^^^^
2 │

The only supported value for the aria-checked property one of the following:

- true
- false
- mixed

<span aria-labelledby="">some text</span>
code-block.jsx:1:7 lint/a11y/useValidAriaValues ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

The value of the ARIA attribute aria-labelledby is not correct.

> 1 │ <span aria-labelledby="">some text</span>
^^^^^^^^^^^^^^^^^^
2 │

The only supported value is a space-separated list of HTML identifiers.

<span aria-valuemax="hey">some text</span>
code-block.jsx:1:7 lint/a11y/useValidAriaValues ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

The value of the ARIA attribute aria-valuemax is not correct.

> 1 │ <span aria-valuemax=“hey”>some text</span>
^^^^^^^^^^^^^^^^^^^
2 │

The only supported value is number.

<span aria-orientation="hey">some text</span>
code-block.jsx:1:7 lint/a11y/useValidAriaValues ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

The value of the ARIA attribute aria-orientation is not correct.

> 1 │ <span aria-orientation=“hey”>some text</span>
^^^^^^^^^^^^^^^^^^^^^^
2 │

The only supported value for the aria-orientation property is one of the following:

- vertical
- undefined
- horizontal

<>
<span role="checkbox" aria-checked={checked} >some text</span>
<span aria-labelledby="fooId barId" >some text</span>
</>