angular / angular/components

feat(mat-form-field): Option to allow MatHint to persist alongside MatError

Abierto
#24,319 10 comentarios 3 reacciones 0 asignados Ver en GitHub
area: material/form-field P2
Lenguaje dominante
TypeScript
Estrellas
25k
Forks
6.8k
Merge medio
1 d 8 h
PR fusionados (30 d)
91

Descripción

### Feature Description

On every Angular Material project I've worked on, our accessibility team has flagged that the `mat-hint` disappears when `mat-error` appears. To be accessible, it is required that the `mat-hint` continues to persist somehow. Currently, the `mat-hint` element is fully removed from the DOM: https://github.com/angular/components/blob/master/src/material/form-field/form-field.html#L83

This has been brought up on SO several times:
- https://stackoverflow.com/questions/60185384/keep-the-displaying-of-both-error-and-hint-if-error
- https://stackoverflow.com/questions/47166694/angular-material-input-with-hint-text-and-error-text-at-the-same-time

To compensate, on each project we:

1. Write a wrapper component around `MatLabel`, `MatHint`, and `MatError`, as well as `MatInput`, `MatSelect`, `MatCheckbox`, etc, duplicating all of their inputs, or
2. Write a wrapper component around `MatLabel`, `MatHint`, and `MatError`, using content projection for the form controls, which breaks the synchronization between all the elements.

Either way, we spend a lot of time on ugly hacks with which we are always ultimately unsatisfied.

I propose we hide `mat-hint` with CSS (e.g. `display: none`) instead of fully removing it from the DOM. This will allow users to easily continue to persist `mat-hint` as they see fit, simply by overriding the CSS.

(Alternatively, or in addition, we could add e.g. `@Input('persistHint')` to `mat-form-field`, but this would require more of a reworking of `mat-form-field`'s logic, and would also require making some design decisions about how `mat-hint` should look when displayed alongside errors, for which the Material guidelines don't give instruction AFAIK.)

Guía de contribución

Abrir la guía de contribución

Línea de trabajo

Comienza leyendo src/material/form-field/form-field.html en la ubicación enlazada de renderizado de hints e inspecciona cómo se coordinan actualmente MatHint y MatError. Compara el enfoque propuesto de persistencia mediante CSS con la entrada alternativa persistHint y, a continuación, identifica la decisión de diseño necesaria para mostrar ambos. Se considera terminado cuando el comportamiento elegido está implementado sin la eliminación actual del DOM y está cubierto por las pruebas relevantes de form-field.

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
Nueva funcionalidad
Dificultad
5/5
Tiempo estimado
Más de una semana
Estado de actividad
Estancado
Claridad
Bastante claro
Aptitud para principiantes
25/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.