dequelabs / dequelabs/axe-core
Clarifications to allowed roles on li element
- Dominant language
- JavaScript
- Stars
- 7.5k
- Forks
- 933
- Avg merge
- 2d 23h
- Merged PRs (30d)
- 17
Description
[ARIA in HTML](https://github.com/w3c/html-aria/pull/410) is clarifying the allowed roles on `li` elements.
>No `role` if the parent list element has an implicit or explicit `list` role.
>
>Otherwise, any `role`.
> NOTE: See `ul`, `ol`, or `menu` for allowed roles for list elements.
This update **disallows any role** on an `li` element so long as it is a child of a `ul`, `ol` or `menu` element is exposed as an implicit or explicit role=list. A role of `listitem` could produce a **warning** for unnecessary use of a redundant role.
However, if the parent `ul`, `ol` or `menu` has its implicit list role overwritten, then the `li` may have **Any role** so long as that role is an allowed role of its ancestor elements.
For example, the following `li` may have a `role=button` specified as the parent list element as a `role=none`
```html
- ...
```
However, as the following `ul` has a `role=menu` specified, the `role=button` is not allowed. The only allowed roles for the `li` would be `menuitem`, `menuitemcheckbox` or `menuitemradio` (or `none`/`presentation` so long as within the `li` there is one of the menteioned `menuitem*` roles).
```html
- ...
```
similar to the following, as while the `ul` has a `role=none`, it is a child of a `role=tablist`, so therefor the `li` may only have a role that is an expected descendant of a `tablist`.
```html
- ...
```
Finally, even though the following would be flagged for invalid HTML, the `li` is again allowed **any role** as it is exposed as a `generic` role when not correctly nested within a list element:
```html
....
...
```
Additional [test cases provided here](https://w3c.github.io/html-aria/tests/li-element-roles.html).
Contributor guide
Assessment
This issue has not been assessed yet.