dequelabs / dequelabs/axe-core
Consider how hidden text in visible elements impacts rules
- Dominant language
- JavaScript
- Stars
- 7.5k
- Forks
- 933
- Avg merge
- 2d 13h
- Merged PRs (30d)
- 29
Description
We recently adjusted the `isHiddenForEveryone` method to ensure that elements inside a closed `` tag would be considered hidden, without the actual `details` and `summary` elements getting marked as hidden. This worked, but there is still a bit of a gap, in that child text nodes of the details element will be assumed visible, because the `details` element is visible. The "Hello world" text node in the following should not be considered visible:
```html
Hello world
```
A very similar problem exists on elements with `content-visibility: hidden`, which doesn't hide the element, but hides all child nodes, including text. For example the following "Hello world" text is considered visible by axe-core.
```html
Hello world
```
This has some implications for rules like color-contrast, which should not be testing these hidden text nodes. This problem also has some implications for accessible text, which when testing in Chrome seems to treat elements with `content-visibiity: hidden` as hidden, rather than treating its content as hidden. You can tell from the following example. Axe-core returns "Hello" as the accessible name, but in Chrome this ends up as "Hello planet Earth"
```html
Hello planet Earth
```
Worse yet for details, the following is reported by axe-core as "" but by Chrome as "Hello planet Mars":
```html
Hello
planet Mars
```
This needs testing in other browsers before we can work on a solve.
Contributor guide
Research direction
Start with the isHiddenForEveryone method and reproduce the closed and content-visibility: hidden examples in the issue. Test their text visibility and accessible names in other browsers before deciding how behavior should change. Done means the browser differences are understood and covered by tests before a solution is implemented.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- accessibility
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100