angular / angular/components

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

Ouverte
#24,319 10 commentaires 3 réactions 0 personnes assignées Voir sur GitHub
area: material/form-field P2
Langage dominant
TypeScript
Étoiles
25k
Forks
6.8k
Merge moyen
1 j 8 h
PR mergées (30 j)
91

Description

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

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par lire src/material/form-field/form-field.html à l’emplacement lié du rendu des hints et examinez comment MatHint et MatError sont actuellement coordonnés. Comparez l’approche proposée de persistance via CSS avec l’entrée alternative persistHint, puis identifiez la décision de conception requise pour afficher les deux. C’est terminé lorsque le comportement choisi est implémenté sans la suppression actuelle du DOM et couvert par les tests pertinents de form-field.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
angular, typescript
Domaine
accessibility, frontend
Type d'issue
Fonctionnalité
Difficulté
5/5
Temps estimé
Plus d'une semaine
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
25/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.