Skip to main content

jsx-a11y/useAriaPropsForRole

enforce that elements with ARIA roles must have all required attributes for that role

ESLint Equivalent: role-has-required-aria-props

Examples

Invalid

<span role='checkbox'></span>

 file.tsx:1 lint/jsx-a11y/useAriaPropsForRole ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  The element with the checkbox ARIA role does not have the required
    ARIA attributes.

    <span role='checkbox'></span>
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

  Missing aria attribute: aria-checked


<span role='switch'></span>

 file.tsx:1 lint/jsx-a11y/useAriaPropsForRole ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  The element with the switch ARIA role does not have the required ARIA
    attributes.

    <span role='switch'></span>
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^

  Missing aria attribute: aria-checked


<span role='spinbutton'></span>

 file.tsx:1 lint/jsx-a11y/useAriaPropsForRole ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  The element with the spinbutton ARIA role does not have the required
    ARIA attributes.

    <span role='spinbutton'></span>
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

  Missing aria attribute: aria-valuemax

  Missing aria attribute: aria-valuemin

  Missing aria attribute: aria-valuenow


<span role='spinbutton' aria-valuemax='100'></span>

 file.tsx:1 lint/jsx-a11y/useAriaPropsForRole ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  The element with the spinbutton ARIA role does not have the required
    ARIA attributes.

    <span role='spinbutton' aria-valuemax='100'></span>
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

  Missing aria attribute: aria-valuemin

  Missing aria attribute: aria-valuenow


<span role='spinbutton' aria-valuemin='0'></span>

 file.tsx:1 lint/jsx-a11y/useAriaPropsForRole ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  The element with the spinbutton ARIA role does not have the required
    ARIA attributes.

    <span role='spinbutton' aria-valuemin='0'></span>
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

  Missing aria attribute: aria-valuemax

  Missing aria attribute: aria-valuenow


<span role='spinbutton' aria-valuemin='0' aria-valuemax='100'></span>

 file.tsx:1 lint/jsx-a11y/useAriaPropsForRole ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  The element with the spinbutton ARIA role does not have the required
    ARIA attributes.

    <span role='spinbutton' aria-valuemin='0' aria-valuemax='100'></span>

    ^^^

  Missing aria attribute: aria-valuenow


<span role='slider' aria-valuemin='0'></span>

 file.tsx:1 lint/jsx-a11y/useAriaPropsForRole ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  The element with the slider ARIA role does not have the required ARIA
    attributes.

    <span role='slider' aria-valuemin='0'></span>
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

  Missing aria attribute: aria-valuemax

  Missing aria attribute: aria-valuenow


<span role='slider' aria-valuemax='100'></span>

 file.tsx:1 lint/jsx-a11y/useAriaPropsForRole ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  The element with the slider ARIA role does not have the required ARIA
    attributes.

    <span role='slider' aria-valuemax='100'></span>
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

  Missing aria attribute: aria-valuemin

  Missing aria attribute: aria-valuenow


<span role='slider' aria-valuemin='0' aria-valuemax='100'></span>

 file.tsx:1 lint/jsx-a11y/useAriaPropsForRole ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  The element with the slider ARIA role does not have the required ARIA
    attributes.

    <span role='slider' aria-valuemin='0' aria-valuemax='100'></span>
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

  Missing aria attribute: aria-valuenow


<span role='separator' aria-valuemin='0'></span>

 file.tsx:1 lint/jsx-a11y/useAriaPropsForRole ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  The element with the separator ARIA role does not have the required
    ARIA attributes.

    <span role='separator' aria-valuemin='0'></span>
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

  Missing aria attribute: aria-valuemax

  Missing aria attribute: aria-valuenow


<span role='separator' aria-valuemax='100'></span>

 file.tsx:1 lint/jsx-a11y/useAriaPropsForRole ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  The element with the separator ARIA role does not have the required
    ARIA attributes.

    <span role='separator' aria-valuemax='100'></span>
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

  Missing aria attribute: aria-valuemin

  Missing aria attribute: aria-valuenow


<span role='separator' aria-valuemin='0' aria-valuemax='100'></span>

 file.tsx:1 lint/jsx-a11y/useAriaPropsForRole ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  The element with the separator ARIA role does not have the required
    ARIA attributes.

    <span role='separator' aria-valuemin='0' aria-valuemax='100'></span>
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

  Missing aria attribute: aria-valuenow


<span role='scrollbar' aria-valuemin='0'></span>

 file.tsx:1 lint/jsx-a11y/useAriaPropsForRole ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  The element with the scrollbar ARIA role does not have the required
    ARIA attributes.

    <span role='scrollbar' aria-valuemin='0'></span>
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

  Missing aria attribute: aria-valuemax

  Missing aria attribute: aria-valuenow

  Missing aria attribute: aria-orientation

  Missing aria attribute: aria-controls


<span role='scrollbar' aria-valuemax='100'></span>

 file.tsx:1 lint/jsx-a11y/useAriaPropsForRole ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  The element with the scrollbar ARIA role does not have the required
    ARIA attributes.

    <span role='scrollbar' aria-valuemax='100'></span>
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

  Missing aria attribute: aria-valuemin

  Missing aria attribute: aria-valuenow

  Missing aria attribute: aria-orientation

  Missing aria attribute: aria-controls


<span role='scrollbar' aria-valuemin='0' aria-valuemax='100'></span>

 file.tsx:1 lint/jsx-a11y/useAriaPropsForRole ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  The element with the scrollbar ARIA role does not have the required
    ARIA attributes.

    <span role='scrollbar' aria-valuemin='0' aria-valuemax='100'></span>
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

  Missing aria attribute: aria-valuenow

  Missing aria attribute: aria-orientation

  Missing aria attribute: aria-controls


<span role='scrollbar' aria-valuemin='0' aria-valuemax='100' aria-orientation='horizontal'></span>

 file.tsx:1 lint/jsx-a11y/useAriaPropsForRole ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  The element with the scrollbar ARIA role does not have the required
    ARIA attributes.

    <span role='scrollbar' aria-valuemin='0' aria-valuemax='100'
    aria-orientation='horizontal'></span>
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

  Missing aria attribute: aria-valuenow

  Missing aria attribute: aria-controls


<span role='radio'></span>

 file.tsx:1 lint/jsx-a11y/useAriaPropsForRole ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  The element with the radio ARIA role does not have the required ARIA
    attributes.

    <span role='radio'></span>
    ^^^^^^^^^^^^^^^^^^^^^^^^^^

  Missing aria attribute: aria-checked


<span role='option'></span>

 file.tsx:1 lint/jsx-a11y/useAriaPropsForRole ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  The element with the option ARIA role does not have the required ARIA
    attributes.

    <span role='option'></span>
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^

  Missing aria attribute: aria-selected


<span role='heading'></span>

 file.tsx:1 lint/jsx-a11y/useAriaPropsForRole ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  The element with the heading ARIA role does not have the required
    ARIA attributes.

    <span role='heading'></span>
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^

  Missing aria attribute: aria-level


<span role='combobox'></span>

 file.tsx:1 lint/jsx-a11y/useAriaPropsForRole ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  The element with the combobox ARIA role does not have the required
    ARIA attributes.

    <span role='combobox'></span>
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

  Missing aria attribute: aria-controls

  Missing aria attribute: aria-expanded


<span role='combobox' aria-expanded='true'></span>

 file.tsx:1 lint/jsx-a11y/useAriaPropsForRole ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  The element with the combobox ARIA role does not have the required
    ARIA attributes.

    <span role='combobox' aria-expanded='true'></span>
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

  Missing aria attribute: aria-controls


<span role='combobox' aria-controls='true'></span>

 file.tsx:1 lint/jsx-a11y/useAriaPropsForRole ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  The element with the combobox ARIA role does not have the required
    ARIA attributes.

    <span role='combobox' aria-controls='true'></span>
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

  Missing aria attribute: aria-expanded


<span role='menuitemcheckbox' ></span>

 file.tsx:1 lint/jsx-a11y/useAriaPropsForRole ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  The element with the menuitemcheckbox ARIA role does not have the
    required ARIA attributes.

    <span role='menuitemcheckbox' ></span>
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

  Missing aria attribute: aria-checked


<span role='menuitemradio' ></span>

 file.tsx:1 lint/jsx-a11y/useAriaPropsForRole ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  The element with the menuitemradio ARIA role does not have the
    required ARIA attributes.

    <span role='menuitemradio' ></span>
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

  Missing aria attribute: aria-checked

Valid

<span role='checkbox' aria-checked='true'></span>
<span role='switch' aria-checked='true'></span>
<span role='spinbutton' aria-valuemax='100' aria-valuemin='0' aria-valuenow='50'></span>
<span role='slider' aria-valuemax='100' aria-valuemin='0' aria-valuenow='50'></span>
<span role='separator' aria-valuemax='100' aria-valuemin='0' aria-valuenow='50'></span>
<span role='scrollbar' aria-valuemax='100' aria-valuemin='0' aria-valuenow='50' aria-orientation='horizontal' aria-controls='123'></span>
<span role='radio' aria-checked='true'></span>
<span role='option' aria-selected='true'></span>
<span role='heading' aria-level='1'></span>
<span role='combobox' aria-controls='true' aria-expanded='true'></span>
<span role='menuitemcheckbox' aria-checked='true'></span>
<span role='menuitemradio' aria-checked='true'></span>
<Span role='menuitemradio' ></Span>