[Bug Report][3.10.5] VDataTableServer progress bar missing aria-label
Open
Nobody has claimed this yet.
a11y
C: VDataTable
S: triage
- Dominant language
- TypeScript
- Stars
- 41k
- Forks
- 7.1k
- Avg merge
- 1d 21h
- Merged PRs (30d)
- 11
Description
Environment
Vuetify Version: 3.10.5
Vue Version: 3.5.22
OS: Windows 10 (current)
Steps to reproduce
- Set loading prop in v-data-table-server to "true".
- Add loading-text prop with some text to describe the progress bar.
- In dev-tools accessibility tree, notice the missing aria label for the progress bar.
Expected Behavior
The progress bar should have an accessible label that identifies what is loading, this should be possible to set using the loading-text prop.
Actual Behavior
The loading-text prop sets visible text to describe the progress bar, but is not added as an aria-label which causes accessibility errors.
Reproduction Link
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start at the VDataTableServer loading state and reproduce the issue with loading and loading-text enabled, then inspect the accessibility tree. The report names no source file or test; done means the progress bar exposes the loading-text value as its accessible label and the accessibility error is resolved.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- accessibility
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 55/100