Field
À quoi il sert
Field rend le libellé, l’indication et l’erreur d’un contrôle, et les relie au contrôle par son identifiant.
Quand l’utiliser
- Donner un libellé visible et une indication à un champ de formulaire.
- Afficher une erreur sous un champ, avec errorLabel pour le préfixe.
- Marquer un champ obligatoire avec requiredLabel, texte visible accolé au libellé.
Quand ne pas l’utiliser
- Pour un contrôle sans libellé visible : Field exige la prop label.
- Pour une erreur qui concerne tout le formulaire : Field relie le message à un seul contrôle.
Exemples
Par défaut
Celle que vous consultez chaque jour.
Erreur
Celle que vous consultez chaque jour.
Erreur : Saisissez une adresse au format [email protected].
Désactivé
<Field id="courriel" label="Courriel" hint="Adresse professionnelle." required requiredLabel="obligatoire">
<Input id="courriel" name="email" type="email" required describedBy="courriel-hint" />
</Field>Accessibilité
Clavier
- Le champ n’ajoute aucun arrêt de tabulation : seul le contrôle enveloppé reçoit le focus.
- Le libellé est lié par for : un clic sur le libellé place le focus dans le champ.
Lecteur d’écran
- Le libellé nomme le contrôle, et la mention obligatoire fait partie du même libellé.
- L’indication et l’erreur sont lues avec le champ, quand l’intégrateur pose aria-describedby.
- L’erreur n’est pas une région aria-live : elle n’est pas annoncée à son apparition.
Garanti par le composant
- Libellé relié par for et id ; identifiants <id>-hint et <id>-error (Field.test.ts).
- Icône d’erreur décorative : aria-hidden="true" et focusable="false" (Field.test.ts).
- Erreur signalée par le texte et l’icône, jamais par la seule couleur (Field.astro).
À la charge de l’intégrateur
- Poser le même id sur Field et sur le contrôle, puis aria-describedby et aria-invalid.
- Fournir requiredLabel et errorLabel traduits : le composant n’embarque aucun texte.
- Rédiger l’erreur avec la correction attendue, pas seulement « Champ invalide ».
Propriétés
| Propriété | Type | Défaut | Description |
|---|---|---|---|
| required | boolean | — | Champ obligatoire : `requiredLabel` est alors exigé et accolé au libellé. |
| requiredLabel | string | — | Texte visible accolé au libellé, par exemple « obligatoire » : jamais un « * » seul. |
| id (obligatoire) | string | — | Id du contrôle enveloppé ; dérive aussi `<id>-hint` et `<id>-error`. |
| label (obligatoire) | string | — | Libellé visible du champ. |
| hint | string | — | Indication affichée sous le libellé, reliée par `aria-describedby`. |
| error | string | — | Message d'erreur ; s'il est présent, le champ passe en état invalide. |
| errorLabel | string | — | Préfixe de l'erreur, par exemple « Erreur : ». Absent : aucun préfixe rendu. |
| class | string | — | Réservé au placement du composant dans son parent. |
Jetons utilisés
--pp-color-muted--pp-color-status-failed--pp-font-weight-bold--pp-font-weight-medium--pp-font-weight-regular--pp-font-weight-semibold--pp-space-3xs--pp-space-s
Preuves et décisions
- WCAG 1.3.1 Information et relations (Info and Relationships)
- WCAG 1.4.1 Utilisation de la couleur (Use of Color)
- WCAG 3.3.1 Identification des erreurs (Error Identification)
- WCAG 3.3.2 Étiquettes ou instructions (Labels or Instructions)
- Tests : packages/astro/test/Field.test.ts ; apps/docs/e2e/forms.spec.ts