dequelabs / dequelabs/axe-core
label-content-name-mismatch should consider cases that don't use `aria-label` (such as sr-only elements)
- Dominant language
- JavaScript
- Stars
- 7.5k
- Forks
- 933
- Avg merge
- 2d 13h
- Merged PRs (30d)
- 29
Description
### Product
axe-core
### Feature Description
Take the following HTML with accessible names defined via `aria-label`:
```html
1: View all
2: View all
3: View videos
```
Variants 1 and 2 pass the "label-content-name-mismatch" rule because it just checks the prefix of the `aria-label` against the actual text content of the node. Variant 3 fails the test because `all of my` is inserted in the middle of the label, but is clearly a more descriptive label for the given button.
The "label-content-name-mismatch" rule should be more relaxed and just check if all words of the accessible name are in occuring in the same order as in the visible text.
Here a screenshot of a concrete example in Lightouse 11 with axe-core 4.8:
## Should pass
```html
one
one
one three
```
## Should fail
```html
two
one two three
```
Contributor guide
Research direction
Use the label-content-name-mismatch rule as the entry point and compare its behavior with the HTML examples in this issue. Trace accessible-name handling for aria-label and sr-only content, then add coverage for the listed pass and fail cases; done means the expected cases produce the requested rule results.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- accessibility
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 45/100