Skip to main content

a11y/useAriaProptypes

enforce ARIA state and property values are valid

ESLint Equivalent: aria-proptypes

Examples

Invalid

<span role="checkbox" aria-checked="test" ></span>

 file.tsx:1:22 lint/a11y/useAriaProptypes ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

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

    <span role="checkbox" aria-checked="test" ></span>
                          ^^^^^^^^^^^^^^^^^^^


<span aria-autocomplete="test" ></span>

 file.tsx:1:6 lint/a11y/useAriaProptypes ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

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

    <span aria-autocomplete="test" ></span>
          ^^^^^^^^^^^^^^^^^^^^^^^^

  The supported values for the aria-autocomplete attribute are:
    "inline", "list", "both", "none"


<span aria-invalid="foo"></span>

 file.tsx:1:6 lint/a11y/useAriaProptypes ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

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

    <span aria-invalid="foo"></span>
          ^^^^^^^^^^^^^^^^^^

  The supported values for the aria-invalid attribute are: "grammar",
    false, "spelling", true


<span aria-errormessage="" ></span>

 file.tsx:1:6 lint/a11y/useAriaProptypes ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

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

    <span aria-errormessage="" ></span>
          ^^^^^^^^^^^^^^^^^^^^


<span aria-relevant="fancy" ></span>

 file.tsx:1:6 lint/a11y/useAriaProptypes ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

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

    <span aria-relevant="fancy" ></span>
          ^^^^^^^^^^^^^^^^^^^^^

  The supported values for the aria-relevant attribute are:
    "additions", "all", "removals", "text"


<span aria-labelledby="" ></span>

 file.tsx:1:6 lint/a11y/useAriaProptypes ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

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

    <span aria-labelledby="" ></span>
          ^^^^^^^^^^^^^^^^^^


<span aria-labelledby={``} ></span>

 file.tsx:1:6 lint/a11y/useAriaProptypes ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

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

    <span aria-labelledby={``} ></span>
          ^^^^^^^^^^^^^^^^^^^^


<span aria-details="" ></span>

 file.tsx:1:6 lint/a11y/useAriaProptypes ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

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

    <span aria-details="" ></span>
          ^^^^^^^^^^^^^^^

<span role="checkbox" aria-checked="test" ></span>

 file.html:1:22 lint/a11y/useAriaProptypes ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

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

    <span role="checkbox" aria-checked="test" ></span>
                          ^^^^^^^^^^^^^^^^^^^


<span aria-autocomplete="test" ></span>

 file.html:1:6 lint/a11y/useAriaProptypes ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

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

    <span aria-autocomplete="test" ></span>
          ^^^^^^^^^^^^^^^^^^^^^^^^

  The supported values for the aria-autocomplete attribute are:
    "inline", "list", "both", "none"


<span aria-invalid="foo"></span>

 file.html:1:6 lint/a11y/useAriaProptypes ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

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

    <span aria-invalid="foo"></span>
          ^^^^^^^^^^^^^^^^^^

  The supported values for the aria-invalid attribute are: "grammar",
    false, "spelling", true


<span aria-errormessage="" ></span>

 file.html:1:6 lint/a11y/useAriaProptypes ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

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

    <span aria-errormessage="" ></span>
          ^^^^^^^^^^^^^^^^^^^^


<span aria-relevant="fancy" ></span>

 file.html:1:6 lint/a11y/useAriaProptypes ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

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

    <span aria-relevant="fancy" ></span>
          ^^^^^^^^^^^^^^^^^^^^^

  The supported values for the aria-relevant attribute are:
    "additions", "all", "removals", "text"


<span aria-labelledby="" ></span>

 file.html:1:6 lint/a11y/useAriaProptypes ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

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

    <span aria-labelledby="" ></span>
          ^^^^^^^^^^^^^^^^^^


<span aria-details="" ></span>

 file.html:1:6 lint/a11y/useAriaProptypes ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

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

    <span aria-details="" ></span>
          ^^^^^^^^^^^^^^^

Valid

<span role="checkbox" aria-checked={checked} ></span>
<span role="checkbox" aria-checked="true" ></span>
<span role="checkbox" aria-checked={true} ></span>
<span role="checkbox" aria-checked="false" ></span>
<span role="checkbox" aria-checked="mixed" ></span>
<span role="checkbox" aria-autocomplete="both" ></span>
<span role="checkbox" aria-autocomplete="inline" ></span>
<span role="checkbox" aria-autocomplete="list" ></span>
<span role="checkbox" aria-autocomplete="none" ></span>
<span aria-invalid="true"></span>
<span aria-invalid="grammar"></span>
<span aria-invalid="false"></span>
<span aria-invalid={false}></span>
<span role="checkbox" aria-errormessage="someid" ></span>
<span role="checkbox" aria-relevant="additions" ></span>
<span role="checkbox" aria-relevant="additions all" ></span>
<span aria-labelledby="id" ></span>
<span aria-labelledby="fooId barId" ></span>
<span aria-details="someid" ></span>
<span role="checkbox" aria-checked="true" ></span>
<span role="checkbox" aria-checked="false" ></span>
<span role="checkbox" aria-checked="mixed" ></span>
<span role="checkbox" aria-autocomplete="both" ></span>
<span role="checkbox" aria-autocomplete="inline" ></span>
<span role="checkbox" aria-autocomplete="list" ></span>
<span role="checkbox" aria-autocomplete="none" ></span>
<span aria-invalid="true"></span>
<span aria-invalid="grammar"></span>
<span aria-invalid="false"></span>
<span role="checkbox" aria-errormessage="someid" ></span>
<span role="checkbox" aria-relevant="additions" ></span>
<span role="checkbox" aria-relevant="additions all" ></span>
<span aria-labelledby="id" ></span>
<span aria-labelledby="fooId barId" ></span>
<span aria-details="someid" ></span>