akveo / akveo/nebular

Window Button Accessibility

Open
#3,167 0 comments 0 reactions 0 assignees View on GitHub
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

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.