angular / angular/components

MatDatepicker - WCAG 1.4.11 Issue

Abierto
#25,378 4 comentarios 0 reacciones 0 asignados Ver en GitHub
Accessibility area: material/datepicker P3
Lenguaje dominante
TypeScript
Estrellas
25k
Forks
6.8k
Merge medio
1 d 8 h
PR fusionados (30 d)
91

Descripción

![Primary Date Color-Pass](https://user-images.githubusercontent.com/104395491/190719954-e0a3f751-032b-4c9d-938b-fd37830fb218.jpg)
![Secondary Date Color-Fail](https://user-images.githubusercontent.com/104395491/190719964-db17ab64-b7b5-45a5-a87a-c5ae99941d23.jpg)
### Is this a regression?

- [ ] Yes, this behavior used to work in the previous version

### The previous version in which this bug was not present was

Present in all versions

### Description

The color of the _**secondary date**_ focus state indicator does not meet WCAG 1.4.11 requirements. It's currently at 1.6:1 and it needs to be 3:1 minimum.

https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html

Success Criterion [1.4.11 Non-text Contrast](https://www.w3.org/TR/WCAG21/#non-text-contrast) (Level AA): The visual [presentation](https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html#dfn-presentation) of the following have a [contrast ratio](https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html#dfn-contrast-ratio) of at least 3:1 against adjacent color(s):

**User Interface Components**
Visual information required to identify [user interface components](https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html#dfn-user-interface-component) and [states](https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html#dfn-state), except for inactive components or where the appearance of the component is determined by the user agent and not modified by the author;

**_Graphical Objects_**
Parts of graphics required to understand the content, except when a particular presentation of graphics is [essential](https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html#dfn-essential) to the information being conveyed

[WCAG 1.4.11 - Mat Datepicker.docx](https://github.com/angular/components/files/9243949/WCAG.1.4.11.-.Mat.Datepicker.docx)

### Reproduction

Steps to reproduce:
1. Open the datepicker component
2. Tab into the individual dates
3. Select to pick an active date
4. Go back into datepicker and use arrow keys to move to between non-selected dates

### Expected Behavior

Color contrast should be 3:1 or higher

### Actual Behavior

Color contrast for the secondary date when in focus is 1.6:1

### Environment

- Angular: 12.2
- CDK/Material: 12.2
- Browser(s): Edge and Chrome
- Microsoft Edge - Version 103.0.1264.71 (Official build) (64-bit)
- Chrome - Version 103.0.5060.134 (Official Build) (64-bit)
- Operating System (e.g. Windows, macOS, Ubuntu): Windows 10 Enterprise

Guía de contribución

Abrir la guía de contribución

Línea de trabajo

Comienza reproduciendo el problema de datepicker siguiendo los pasos de teclado indicados y revisa el documento adjunto de WCAG 1.4.11 y las capturas de pantalla. Identifica los estilos del estado de foco secundario de la fecha y, a continuación, verifica que su contraste con los colores adyacentes alcance al menos 3:1 y que el comportamiento de datepicker siga siendo correcto.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
angular, typescript
Área
accessibility, frontend
Tipo de issue
Error
Dificultad
3/5
Tiempo estimado
1-2 días
Estado de actividad
Estancado
Claridad
Bastante claro
Aptitud para principiantes
35/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.