jsx_a11y/aria-role 正确性

它的作用

具有 ARIA 角色的元素必须使用有效、非抽象的 ARIA 角色。可以在 WAI-ARIA 网站中找到角色定义参考。

这有什么不好？

此成功标准的目的是确保辅助技术 (AT) 可以收集信息、激活（或设置）和随时更新内容中用户界面控件的状态（例如残障人士使用的屏幕阅读器、屏幕放大镜和语音识别软件）。

在可访问的技术中使用标准控件时，这个过程很简单。如果用户界面元素符合该规范，则会满足本条款的条件。

但是，如果创建了自定义控件，或编程（在代码或脚本中）界面元素，使其具有不同于常规的角色和/或功能，那么需要采取一些额外措施，以确保控件向辅助技术提供重要信息，并且允许辅助技术对其进行控制。用户界面控件的一个特别重要的状态是它是否有焦点。控件的焦点状态可以以编程方式确定，并且会将焦点变更通知发送给用户代理和辅助技术。用户界面控件状态的其他示例包括复选框或单选按钮是否已被选中，或者可折叠树或列表节点是否已展开或折叠。

规则选项

该规则采用一个类型为对象的可选对象参数

{
  "rules": {
    "jsx-a11y/aria-role": [
      2,
      {
        "allowedInvalidRoles": ["text"],
        "ignoreNonDOM": true
      }
    ]
  }
}

allowedInvalidRules 是一个可选字符串数组，其中包含除 ARIA 规范之外还应允许的自定义角色，例如，在需要使用非标准角色时的情况。

对于 ignoreNonDOM 选项，它确定开发人员创建的组件是否应经过检查。

示例

适用于该规则的 不正确 代码示例

<div role="datepicker"></div> <!-- Bad: "datepicker" is not an ARIA role -->
<div role="range"></div>      <!-- Bad: "range" is an _abstract_ ARIA role -->
<div role=""></div>           <!-- Bad: An empty ARIA role is not allowed -->
<Foo role={role}></Foo>       <!-- Bad: ignoreNonDOM is set to false or not set -->

适用于该规则的 正确 代码示例

<div role="button"></div>     <!-- Good: "button" is a valid ARIA role -->
<div role={role}></div>       <!-- Good: role is a variable & cannot be determined until runtime. -->
<div></div>                   <!-- Good: No ARIA role -->
<Foo role={role}></Foo>       <!-- Good: ignoreNonDOM is set to true -->

参考

• 规则来源