Skip to main content

a11y/useAriaProps

enforce all aria-* props are valid

ESLint Equivalent: aria-props

Examples

Invalid

<input className='' aria-labell='' />

 file.jsx:1:20 lint/a11y/useAriaProps  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━

  aria-labell is an invalid ARIA attribute.

    <input className='' aria-labell='' />
                        ^^^^^^^^^^^^^^

  Suggested fix: ARIA Spelling Mistake

  - aria-labell=""
  + aria-label=""

  


<div aria-='foobar' />

 file.jsx:1:5 lint/a11y/useAriaProps ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  aria- is an invalid ARIA attribute.

    <div aria-='foobar' />
         ^^^^^^^^^^^^^^


<div aria-labeledby='foobar' />

 file.jsx:1:5 lint/a11y/useAriaProps  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  aria-labeledby is an invalid ARIA attribute.

    <div aria-labeledby='foobar' />
         ^^^^^^^^^^^^^^^^^^^^^^^

  Suggested fix: ARIA Spelling Mistake

  - aria-labeledby="foobar"
  + aria-labelledby="foobar"

  


<div aria-skldjfaria-klajsd='foobar' />

 file.jsx:1:5 lint/a11y/useAriaProps ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  aria-skldjfaria-klajsd is an invalid ARIA attribute.

    <div aria-skldjfaria-klajsd='foobar' />
         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

<input class="" aria-labell="" />

 file.html:1:16 lint/a11y/useAriaProps  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━

  aria-labell is an invalid ARIA attribute.

    <input class="" aria-labell="" />
                    ^^^^^^^^^^^^^^

  Suggested fix: ARIA Spelling Mistake

  - aria-labell=""
  + aria-label=""

  


<div aria-="foobar" />

 file.html:1:5 lint/a11y/useAriaProps ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  aria- is an invalid ARIA attribute.

    <div aria-="foobar" />
         ^^^^^^^^^^^^^^


<div aria-labeledby="foobar" />

 file.html:1:5 lint/a11y/useAriaProps  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━

  aria-labeledby is an invalid ARIA attribute.

    <div aria-labeledby="foobar" />
         ^^^^^^^^^^^^^^^^^^^^^^^

  Suggested fix: ARIA Spelling Mistake

  - aria-labeledby="foobar"
  + aria-labelledby="foobar"

  


<div aria-skldjfaria-klajsd="foobar" />

 file.html:1:5 lint/a11y/useAriaProps ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  aria-skldjfaria-klajsd is an invalid ARIA attribute.

    <div aria-skldjfaria-klajsd="foobar" />
         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

Valid

<div />
<div></div>
<div aria='wee'></div>
<div abcARIAdef='true'></div>
<div fooaria-foobar='true'></div>
<div fooaria-hidden='true'></div>
<input type='text' aria-errormessage='foobar' />
<div />
<div></div>
<div aria="wee"></div>
<div abcARIAdef="true"></div>
<div fooaria-foobar="true"></div>
<div fooaria-hidden="true"></div>
<input type="text" aria-errormessage="foobar" />