# jsx-a11y/aria-role

> Require `role` to be a real ARIA role that is not abstract

A screen reader ignores a `role` it doesn't know, so an element with `role="datepicker"` is announced as a plain `div`. Abstract roles such as `range`, `widget` and `input` exist only to define other roles in the ARIA specification. Browsers ignore them too.

A `role` can hold several roles separated by spaces, and each one must be valid. A `role` without a value, or with `""`, `null` or `undefined`, is reported. Any other expression isn't checked.

{/* Generated by src/codegen/lint-rule-docs.ts. Do not edit this section. */}

## Configure

Off by default. To turn it on:

```toml bunfig.toml
[lint.rules]
"jsx-a11y/aria-role" = "error" # or "warn"
```

Every option, set to its default:

```toml bunfig.toml
[lint.rules]
"jsx-a11y/aria-role" = ["error", {
  allowedInvalidRoles = [], # list of strings
  ignoreNonDOM = false,
}]
```

{/* End of the generated section. */}

## Examples

Reported:

{/* bad {"count": 4} */}
```jsx
const picker = <div role="datepicker">{days}</div>;
const slider = <div role="range" />;
const panel = <div role="">{children}</div>;
const toggle = <div role="switch toggle" aria-checked={isOn} tabIndex={0} />;
```

Not reported:

{/* good */}
```jsx
const picker = <div role="dialog">{days}</div>;
const slider = <div role="slider" aria-valuenow={volume} tabIndex={0} />;
const panel = <div role={panelRole}>{children}</div>;
const toggle = <div role="switch checkbox" aria-checked={isOn} tabIndex={0} />;
```

## Options

| Option | Default | What it does |
| --- | --- | --- |
| `allowedInvalidRoles` | `[]` | Other values to accept. |
| `ignoreNonDOM` | `false` | Don't check components, where `role` might be an ordinary prop. |

{/* good {"options": [{"allowedInvalidRoles": ["text"]}]} */}
```jsx
const price = <span role="text">{amount} per month</span>;
```

Components are checked by default:

{/* bad */}
```jsx
const member = <UserCard role="admin" />;
```

{/* good {"options": [{"ignoreNonDOM": true}]} */}
```jsx
const member = <UserCard role="admin" />;
```