dequelabs / dequelabs/axe-core
Implement proper support for aria-owns
- Dominant language
- JavaScript
- Stars
- 7.5k
- Forks
- 933
- Avg merge
- 2d 23h
- Merged PRs (30d)
- 17
Description
Axe-core doesn't properly process aria-owns. Rules like `aria-required-parent` and `aria-required-children` don't account for it. Just generally, the rules don't understand that ARIA properties inherit on the accessibility tree, so the `aria-hidden` or `aria-disabled` properties should apply to owned elements, rather than to descendants. That impacts lots of things all over the place.
Axe has ignored `aria-owned` for a while because it wasn't supported in Safari + VO. That is no longer the case, so axe really needs to know about this. I think the way to do this would be to add an "owns" and "owner" property to the virtual DOM that axe can walk in the same way it walks the flat tree by using the parent / child props on VirtualNodes.
I've been trying to figure out how browsers handle edge cases. I've done a bunch of testing and had some surprising results. I'm mostly opening this ticket to have a place to put the results of this. For Firefox and Chrome I inspected the accessibility tree through devtools. For Safari I used VoiceOver to try and figure out the tree.
## Duplicate IDs
```html
- Bob A
- Bob B
```
Chrome & Firefox
> list, 1 item, "Bob A"
> list, 1 item, "Bob B"
Safari (with VoiceOver) seems to get confused about this, Read everything just halts when it hits this list. Going through it line by line it repeats "Bob A", and skips "Bob B". Navigating in reverse order sometimes announces "Bob B", but not consistently.
## Competing aria-owns attrs
```html
- LI 1
- LI 2
- LI 3
```
Chrome & Firefox
> UL 1 owns UL 3
Safari:
> UL 2 owns UL 3
## Cyclical ownership
```html
- A
- B
- C
- D
```
Chrome
> D > C > B > A
Firefox & Safari
> C > B > A > D
## Invalid aria-owns
```html
- foo
- Bar
```
Bar obviously cannot own its parent. But surprisingly that doesn't prevent another element with aria-owns from adopting `ul#foo`. Chrome, Firefox, Safari seem consistent in this, there are two lists with one item, the first with "bar" and the second with "foo".
> list > listitem > "bar"
> list > listitem > "foo"
## ariaOwnsElements
We'll need to make sure this works when `ariaOwnsElements` is used as well. We cannot rely on reverse ID lookup to work out if an element has an owner.
Contributor guide
Assessment
This issue has not been assessed yet.