Skip to main content

a11y/noHeaderScope

enforce scope prop is only used on th elements

ESLint Equivalent: scope

Examples

Invalid

<div scope={scope} />

 file.tsx:1 lint/a11y/noHeaderScope  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid using the scope attribute on elements other than th elements.

    <div scope={scope} />
    ^^^^^^^^^^^^^^^^^^^^^

  Using the scope attribute incorrectly on tables makes them difficult
    to navigate using the keyboard.

  Safe fix

  - <div·scope={scope}·/>
  + <div·/>


<div scope='col' />

 file.tsx:1 lint/a11y/noHeaderScope  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid using the scope attribute on elements other than th elements.

    <div scope='col' />
    ^^^^^^^^^^^^^^^^^^^

  Using the scope attribute incorrectly on tables makes them difficult
    to navigate using the keyboard.

  Safe fix

  - <div·scope="col"·/>
  + <div·/>

<div scope="col" />

 file.html:1 lint/a11y/noHeaderScope  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid using the scope attribute on elements other than th elements.

    <div scope="col" />
    ^^^^^^^^^^^^^^^^

  Using the scope attribute incorrectly on tables makes them difficult
    to navigate using the keyboard.

  Safe fix

  - <div·scope="col"·/>
  + <div·/>

Valid

<th scope={scope}></th>
<th scope='col'></th>
<th scope="col"></th>