# jsx-a11y/aria-proptypes

> Require `aria-*` attributes to have a value of the right kind

Each `aria-*` attribute accepts one kind of value. A screen reader ignores a value it doesn't know, so `aria-expanded="yes"` is the same as no `aria-expanded` at all, and nothing tells you.

The rule only checks values written in place: strings, numbers, `true`, `false` and templates. It skips variables and calls.

| Value | Attributes |
| --- | --- |
| `true` or `false` | `aria-busy`, `aria-disabled`, `aria-expanded`, `aria-hidden`, `aria-modal`, `aria-required`, `aria-selected` and others |
| `true`, `false` or `"mixed"` | `aria-checked`, `aria-pressed` |
| A number | `aria-level`, `aria-valuenow`, `aria-valuemin`, `aria-valuemax`, `aria-colspan`, `aria-posinset`, `aria-setsize` and others |
| A string | `aria-label`, `aria-description`, `aria-placeholder`, `aria-valuetext` and others |
| One ID, or a list of IDs | `aria-activedescendant`, `aria-controls`, `aria-describedby`, `aria-labelledby`, `aria-owns` and others |
| Words from a fixed list | `aria-autocomplete`, `aria-current`, `aria-dropeffect`, `aria-haspopup`, `aria-invalid`, `aria-live`, `aria-orientation`, `aria-relevant`, `aria-sort` |

The report lists the values the attribute accepts.

{/* 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-proptypes" = "error" # or "warn"
```

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

## Examples

Reported:

{/* bad {"count": 4} */}
```jsx
const toggle = <button aria-expanded="yes">Menu</button>;
const title = <div role="heading" aria-level="two">Billing</div>;
const column = <th aria-sort="up">Name</th>;
const status = <div aria-live="loud">{message}</div>;
```

Not reported:

{/* good */}
```jsx
const toggle = <button aria-expanded={isOpen}>Menu</button>;
const title = <div role="heading" aria-level={2}>Billing</div>;
const column = <th aria-sort="ascending">Name</th>;
const status = <div aria-live="polite">{message}</div>;
```