bogue: les éléments interatifs sont désactivés (disabled) en lecture seule, et perdent le focus

[jipigi]

Description du bogue / Describe the bug

Actuellement, lorsque nos éléments interactifs sont mis en lecture seule, il sont désactivés, ce qui les empêche de recevoir le focus.

La spec du w3c spécifie qu'un élément en lecture seule doit pouvoir recevoir le focus. On s'alignerait donc avec les recommandations officielles.

Reproduction / To Reproduce

Dans un formulaire ou l'enregistrement se fait au fur et à mesure de la saisie et dans lequel les éléments interatifs sont mis en lecture seule en attendant la confirmation de l'enregistrement, le focus est perdu systématiquement. Par exemple dans une liste déroulante :

• Déplacer le focus jusqu'à la liste avec la touche
• Enfoncer la touche <flèche bas>
• Une fois la valeur voulue active, enfoncer

La valeur sélectionnée est modifiée, et le focus est perdu, voir https://i.imgur.com/Wl1cO0z.gifv.
Ce problème existe pour tous les éléments interactifs sauf le radio, pour lequel il a été corrigé dans #127.

Ce même problème existe aussi pour l'état « en attente » (waiting). Par exemple, imagnons un champ de recherche avec de l'auto suggestion dans lequel on souhaite afficher une icône de chargement pendant qu'il recherche les correspondances en fonction du nouveau caractère saisi. Présentement, si on utilise la props waiting, le champ autocomplete sera désactivé et le focus sera perdu, empêchant l'utilisateur de saisir plus de caractères pour préciser sa recherche.

Comportement attendu / Expected behavior

Isoler les comportements et le visuel de chaque état individuellement. Permettre de définir un ou plusieurs états sur un même composant. Par exemple, un composant pourrait être désactivé ET en attente.

Désactivé
Comportement

• Les éléments désactivés ne reçoivent pas le focus et ne peuvent donc pas être modifiés.
• Les éléments désactivés ne font pas partie de la séquence de navigation avec la touche .
• Les éléments désactivés ne sont pas considérés valides pour la soumission (et ne sont jamais envoyés au serveur).
  Visuel
  Généralement, les contours, textes et autres éléments sont grisés ($m-color--disabled).

Lecture seule
Comportements

• Les éléments en lecture seule peuvent recevoir le focus mais ne peuvent être modifiés. Par contre leur valeur peut être copiée lorsque cela s'applique.
• Les éléments en lecture seule font partie de la séquence de navigation avec la touche .
• Les éléments désactivés peuvent être considérés valides pour la soumission (et peuvent être envoyés au serveur).
  Visuel
  Les éléments en lecture seule ont généralement le même visuel que les ééments désactivés à la différence qu'on doit pouvoir clairement lire leur valeur (ex. le texte est en noir plutôt que d'être grisé).

En attente
Comportements
L'état en attente ne modifie pas le comportement du composant :

• Les éléments en attente reçoivent le focus.
• Les éléments en attente font partie de la séquence de navigation avec la touche .
• Les éléments en attente sont considérés valides pour la soumission.
• Les éléments en attente ne sont ni désactivés ni en lecture seule par défaut mais peuvent l'être au besoin en activant les porps disabled et/ou readonly.
  Visuel
  Un élément en attente affiche une rétroaction visuelle indiquant à l'utilisateur qu'un traitement est en train de se dérouler en arrière plan.

Composition de plusieurs états

• Un élément interactif ne peut pas être à la fois désactivé et en lecture seule, c'est l'état désactivé qui prime (visuellement et dans le comportement).
• Si la props en attente est activée avec un des deux autres états (désactivé et en attente), l'indicateur visuel en attente est simplement ajouté dans le composant.

Captures d'écran / Screenshots

Voir ci-dessus.

Versions affectées / Affected Versions

• Package: modul-components
• version: beta135

Environnement / Environment

Tous

Liens vers les récits Jira

Aucun