src/content/docs/linter/rules/use-valid-aria-role.mdx
import { Tabs, TabItem } from '@astrojs/starlight/components';
<Tabs> <TabItem label="JSX and TSX" icon="seti:javascript"> ## Summary - Rule available since: `v1.4.0` - Diagnostic Category: [`lint/a11y/useValidAriaRole`](/reference/diagnostics#diagnostic-category) - This rule is **recommended**, meaning it is enabled by default. - This rule has an [**unsafe**](/linter/#unsafe-fixes) fix. - The default severity of this rule is [**error**](/reference/diagnostics#error). - Sources: - Same as [`jsx-a11y/aria-role`](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/aria-role.md){
"linter": {
"rules": {
"a11y": {
"useValidAriaRole": "error"
}
}
}
}
Elements with ARIA roles must use a valid, non-abstract ARIA role.
<div role="datepicker"></div>
<div role="range"></div>
<div role=""></div>
<Foo role="foo"></Foo>
<>
<div role="button"></div>
<div role={role}></div>
<div></div>
</>
allowInvalidRolesIt allows specifying a list of roles that might be invalid otherwise
{
"linter": {
"rules": {
"a11y": {
"useValidAriaRole": {
"options": {
"allowInvalidRoles": [
"datepicker"
]
}
}
}
}
}
}
<div role="datepicker"></div>
ignoreNonDomUse this option to ignore non-DOM elements, such as components
{
"linter": {
"rules": {
"a11y": {
"useValidAriaRole": {
"options": {
"ignoreNonDom": true
}
}
}
}
}
}
<Datepicker role="foo"></Datepicker>
{
"linter": {
"rules": {
"a11y": {
"useValidAriaRole": "error"
}
}
}
}
Elements with ARIA roles must use a valid, non-abstract ARIA role.
Remember that this rule only supports static values for the role attribute.
Dynamic role values are not checked.
<div role="datepicker"></div>
<div role="range"></div>
<div role=""></div>
<div role="button"></div>
<div></div>
allowInvalidRolesIt allows specifying a list of roles that might be invalid otherwise
{
"linter": {
"rules": {
"a11y": {
"useValidAriaRole": {
"options": {
"allowInvalidRoles": [
"datepicker"
]
}
}
}
}
}
}
<div role="datepicker"></div>