dequelabs / dequelabs/axe-core

label-content-name-mismatch should consider cases that don't use `aria-label` (such as sr-only elements)

Open
#4,261 3 comments 0 reactions 0 assignees View on GitHub
feat label-content-name-mismatch
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:

grafik

## Should pass

```html
one
one
one three
```

## Should fail

```html
two
one two three
```

Contributor guide

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.