dequelabs / dequelabs/axe-core

label-title-only fails when `aria-labelledby` points to a node with `sr-only`

Open
#5,014 3 comments 0 reactions 0 assignees View on GitHub
best practice fix rules
Dominant language
JavaScript
Stars
7.5k
Forks
933
Avg merge
2d 23h
Merged PRs (30d)
17

Description

### Product

axe-core

### Product Version

4.11.1

### Latest Version

- [x] I have tested the issue with the latest version of the product

### Issue Description

#### Expectation
When the input has an `aria-labelledby` pointing to a node with `sr-only` Tailwind class, it should pass

#### Actual
When the input has an `aria-labelledby` pointing to a node with `sr-only` Tailwind class, it fails with `label-title-only` violation:

```
"Form elements should have a visible label (label-title-only)"
│ Fix all of the following:
│ Only title used to generate label for form element
```

#### How to Reproduce
```html

Upload a file

Max 5 MB, .jpg or .png only
```

Fails

```html

Upload a file

Max 5 MB, .jpg or .png only
```

Passes

### Additional Context
`sr-only` is used in Tailwind to only expose elements to screen readers, but axe doesn't seem to consider this when validating `label-title-only`

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.