[docs][backdrop] Gives only visual feedback of state change, no communication to assistive tech
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 99.1k
- Forks
- 32.5k
- Avg merge
- 2d 17h
- Merged PRs (30d)
- 106
Description
Duplicates
- I have searched the existing issues
Latest version
- I have tested the latest version
Current behavior 😯
Activating backdrop gives a visual indication of state change (eg with spinner) but nothing is communicated to Assisive tech user. See video using https://mui.com/components/backdrop/ with Voiceover+ Safari
https://user-images.githubusercontent.com/378048/157264996-afecfb88-fdab-400c-b20a-546893d0fec0.mp4
This is a level A WCAG failure of 4.1.2: Name, Role, Value
The spinner animation should also stop after 5 seconds if user prefers reduced motion (using CSS media query) to comply with WCAG Success Criterion 2.2.2 Pause, Stop, Hide.
Expected behavior 🤔
Add appropriate aria info, eg https://adrianroselli.com/2020/11/more-accessible-skeletons.html
Steps to reproduce 🕹
Steps:
Context 🔦
No response
Your environment 🌎
`npx @mui/envinfo`
Don't forget to mention which browser you used.
Output from `npx @mui/envinfo` goes here.
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 with the Backdrop documentation and reproduce the behavior using VoiceOver with Safari. Read the linked WCAG Name, Role, Value and Pause, Stop, Hide guidance, then inspect the Backdrop implementation and its existing tests, which the issue does not name. Done means state changes are communicated to assistive technology and the spinner respects reduced-motion requirements.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 62/100