useSemanticElements

诊断类别：lint/a11y/useSemanticElements

¥Diagnostic Category: lint/a11y/useSemanticElements

JSX and TSX

自从：v1.8.0

¥Since: v1.8.0

来源：

¥Sources:

与以下相同：jsx-a11y/prefer-tag-over-role

¥Same as: jsx-a11y/prefer-tag-over-role

它检测 JSX 元素中 role 属性的使用并建议改用语义元素。

¥It detects the use of role attributes in JSX elements and suggests using semantic elements instead.

role 属性用于定义元素的用途，但它应该作为最后的手段。使用 <button>、<nav> 等语义元素更易于访问并提供更好的语义。

¥The role attribute is used to define the purpose of an element, but it should be used as a last resort. Using semantic elements like <button>, <nav> and others are more accessible and provide better semantics.

示例

¥Examples

无效

¥Invalid

<div role="checkbox">

code-block.jsx:2:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ expected &lt; but instead the file ends
  
    1 │ <div role=“checkbox”>
  > 2 │ 
      │ 
  
  ℹ the file ends here
  
    1 │ <div role=“checkbox”>
  > 2 │ 
      │

<div role="img">

code-block.jsx:2:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ expected &lt; but instead the file ends
  
    1 │ <div role=“img”>
  > 2 │ 
      │ 
  
  ℹ the file ends here
  
    1 │ <div role=“img”>
  > 2 │ 
      │

有效

¥Valid

<>
 <div></div>
 <header></header>
 <img alt="" src="image.jpg" />
</>

useSemanticElements

示例

无效

有效

相关链接