Fix Notification docs samples a11y
Nobody has claimed this yet.
- Dominant language
- AsciiDoc
- Stars
- 38
- Forks
- 225
- Avg merge
- 1d 4h
- Merged PRs (30d)
- 170
Description
The Notification samples with rich content (text, buttons) use a layout that doesn't adapt to smaller viewport sizes; the contents overflow the notification.The Notification samples with rich content (text, buttons) use a layout that doesn't adapt to smaller viewport sizes; the contents overflow the notification.
=> As a quick-fix, enable wrapping on the HorizontalLayouts used in the samples.
The number badge in the notification button in the Use Sparingly example applies an aria-label on the button instead of relying on the Badge within the button to supply an accessible name for it. Remove the aria-label and use the Badge's number variant to provide a screen-reader accessible but invisible "Notifications" text in addition to the number.
Contributor guide
No contributing guide indexed for this repository
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 in the Notification documentation samples, especially the rich-content examples and the Use Sparingly example linked in the issue. Check the HorizontalLayouts and notification button markup; done means content wraps at smaller viewports and the number Badge supplies the screen-reader label without the button's aria-label.
Written by the indexing model from the issue text.
Assessment
- Domain
- accessibility, documentation
- Issue type
- Documentation
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 72/100