akveo / akveo/nebular

Window Button Accessibility

Aperta
#3,167 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub
Lingua principale
TypeScript
Stelle
8.1k
Fork
1.5k
Metriche di merge delle PR
Nessuna PR unita negli ultimi 30g

Descrizione

### 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

Guida per i contributori

Apri la guida per i contributori

Valutazione

Questa issue non è ancora stata valutata.

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.