akveo / akveo/nebular

Window Button Accessibility

Abierto
#3,167 0 comentarios 0 reacciones 0 asignados Ver en GitHub
Lenguaje dominante
TypeScript
Estrellas
8.1k
Forks
1.5k
Métricas de merge de PR
Sin PR fusionados en 30 d

Descripción

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

Guía de contribución

Abrir la guía de contribución

Evaluación

Este issue todavía no se ha evaluado.

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.