Window Button Accessibility
- Dominant language
- TypeScript
- Stars
- 8.1k
- Forks
- 1.5k
- PR merge metrics
- No merged PRs in 30d
Description
### Issue type
**I'm submitting a ...** (check one with "x")
* [ ] bug report
* [X] feature request
### Issue description
**Current behavior:**
The header buttons on Window components (e.g. minimize, expand, close) do not meet [WCAG accessibility standards](https://www.w3.org/TR/WCAG22/) (they do not have aria labels that can be read by a screen reader). When you tab to one of the buttons with a screen reader enabled, it just says "button".
**Expected behavior:**
Each button should have an `aria-label` attribute so that it says something like "Close Window" when you tab to the button with a screen reader enabled.
**Steps to reproduce:**
1. Install screen reader software like NVDA (free) or JAWS.
2. Run a website that uses the Nebular framework and has a dialog window component
- Example: The first showcase on https://akveo.github.io/nebular/docs/components/window/overview#nbwindowservice
4. Open the window
5. With the screen reader enabled, use the tab key to navigate fields in the window
- When the close button is in focus, the screen reader should say something like "Close Window button". Instead, it just says "button" because the HTML button element has no `aria-label` (or equivalent) attribute.
**Related code:**
View on the [Nebular - Window Angular UI Component](https://akveo.github.io/nebular/docs/components/window/overview#nbwindowservice) page in the first showcase
The fix would be to add something like this to each button (just the `aria-label` attribute):
```
...
```
### Other information:
https://www.w3.org/TR/WCAG22/
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label
Contributor guide
Assessment
This issue has not been assessed yet.