Composant Select, Input et Upload - surcharge de l'attribut aria-describedby #388
Description
Bonjour,
Je rencontre un problème sur les composants Input, Select et Upload avec l'attribut "aria-describedby".
Pour des raisons d'accessibilité, j'ai besoin de set cet attribut dans les nativeInputProps pour faire le lien entre le champ et un message d'information :
Mais l'attribut aria-describedby de l'input est surchargé avec l'id des messages d'erreurs et donc il est impossible de lier l'input et les infos.
Exemple avec l'Input :
<Input
label="Email de connexion *"
hintText={FORMAT_EMAIL}
className={classNames('o-formulaire__input--petit', { 'o-input--readonly': agent?.actif === false })}
nativeInputProps={{
defaultValue: agent?.email,
...register('email'),
'aria-required': true,
'aria-describedby': "alerte-compte-inactif",
readOnly: agent?.actif === false,
}}
state={errors.email ? 'error' : 'default'}
stateRelatedMessage={errors.email?.message}
/>
Résultat obtenu dans le DOM :
<div class="fr-input-group o-formulaire__input--petit o-input--readonly">
<label class="fr-label" for="input-:r5l:">Email de connexion *<span class="fr-hint-text">Format : [email protected]</span></label>
<input
name="email"
aria-required="true"
aria-describedby="input-:r5l:-desc-error"
readonly=""
class="fr-input"
type="text"
id="input-:r5l:"
value="[email protected]">
<div id="input-:r5l:-messages-group" class="fr-messages-group" aria-live="polite"></div>
</div>
(Le comportement est le même avec le Select ou le Upload)
Il faudrait pouvoir concaténer les attributs aria des nativesInputProps avec celles générées par le composant.
Exemple de résultat attendu : aria-describedby="input-:r5l:-desc-error alerte-compte-inactif"
Est-ce qu'une modification des composants est envisageable ?
PI :
version react-dsfr : 1.14.1