search

dnum-mi / vue-dsfr

Portage en Vue du DSFR
https://vue-ds.fr
Other
61 stars 28 forks source link

DsfrInput : le message d'erreur n'est pas accessible #766

Closed hfroot closed 7 months ago

hfroot commented 7 months ago

En regardant l'exemple d'un champ de saisi en erreur : https://storybook.vue-ds.fr/?path=/story/composants-dsfrinput--champ-en-erreur il me paraît que le lien entre le champ et le message d'erreur n'est pas fait.

Le DSFR conseil un aria-describedby sur l'input : https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/champ-de-saisie

HTML généré par vue-dsfr

<div class="fr-input-group fr-input-group--error">
  <label data-v-0171a9ee="" class="fr-label" for="basic-qifkz-input">
    Label champ de saisie
  </label>
  <input data-v-0171a9ee="" id="basic-qifkz-input" placeholder="Placeholder" class="fr-input fr-input--error" />
  <div class="fr-messages-group">
    <p id="basic-9p7z6-input" data-testid="basic-9p7z6-input" class="fr-error-text">
      <span>Message d’erreur</span>
    </p>
  </div>
</div>

HTML conseillé par DSFR

<div class="fr-input-group fr-input-group--error">
    <label class="fr-label" for="text-input-error">
      Label champs de saisie
    </label>
    <input class="fr-input fr-input--error" aria-describedby="text-input-error-desc-error" type="text" id="text-input-error" name="text-input-error">
    <p id="text-input-error-desc-error" class="fr-error-text">
      Texte d’erreur obligatoire
    </p>
</div>
laruiss commented 7 months ago

Si vous souhaitez utiliser un message d’erreur, il ne faut pas utiliser DsfrInput, qui ne comprend pas de prop error-message, mais DsfrInputGroup, vous pouvez voir sur cet exemple que la liaison aria est correcte : https://vue-dsfr-zod.netlify.app/

hfroot commented 7 months ago

Ah je vois merci. Dans ce cas est-ce qu'il faut le coup de supprimer les exemples de DsfrInput du site pour encourager l'utilisation de la version plus accessible ?

laruiss commented 7 months ago

Dans les exemples, c’est bien DsfrInputGroup qui est utilisé, si on demande à voir le code de Champ de saisie avec erreurs, :

<template>
  <DsfrInputGroup :error-message="errorMessage">
    <DsfrInput
      :model-value="modelValue"
      :label="label"
      :label-visible="labelVisible"
      :placeholder="placeholder"
      :is-invalid="isInvalid"
    />
  </DsfrInputGroup>
</template>

Dans la nouvelle documentation, c’est bien indiqué qu’il n’y a pas de message d’erreur ou de succès pour DsfrInput