noHeaderScope
Diagnostic Category: lint/a11y/noHeaderScope
Since: v1.0.0
Sources:
- Same as:
jsx-a11y/scope
The scope prop should be used only on <th> elements.
Examples
Section titled ExamplesInvalid
Section titled Invalid<div scope={scope} />code-block.jsx:1:6 lint/a11y/noHeaderScope FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✖ Avoid using the scope attribute on elements other than th elements.
> 1 │ <div scope={scope} />
│ ^^^^^^^^^^^^^
2 │
ℹ The scope attribute is used to associate a data cell with its corresponding header cell in a data table,
so it should be placed on th elements to provide accessibility to screen readers.
ℹ Follow the links for more information,
WCAG 1.3.1
WCAG 4.1.1
ℹ Unsafe fix: Remove the scope attribute.
1 │ <div·scope={scope}·/>
│ --------------
<div scope="col" />code-block.jsx:1:6 lint/a11y/noHeaderScope FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✖ Avoid using the scope attribute on elements other than th elements.
> 1 │ <div scope=“col” />
│ ^^^^^^^^^^^
2 │
ℹ The scope attribute is used to associate a data cell with its corresponding header cell in a data table,
so it should be placed on th elements to provide accessibility to screen readers.
ℹ Follow the links for more information,
WCAG 1.3.1
WCAG 4.1.1
ℹ Unsafe fix: Remove the scope attribute.
1 │ <div·scope=“col”·/>
│ ------------
Valid
Section titled Valid<th scope={scope}></th><th scope="col"></th>