noHeaderScope

诊断类别：lint/a11y/noHeaderScope

¥Diagnostic Category: lint/a11y/noHeaderScope

JSX and TSX

自从：v1.0.0

¥Since: v1.0.0

来源：

¥Sources:

与以下相同：jsx-a11y/scope

¥Same as: jsx-a11y/scope

范围属性应仅用于 <th> 元素。

¥The scope prop should be used only on <th> elements.

示例

¥Examples

无效

¥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

<th scope={scope}></th>

<th scope="col"></th>

可访问性指南

¥Accessibility guidelines

noHeaderScope

示例

无效

有效

可访问性指南

相关链接