Gestion des états
La gestion des états est un des éléments clés pour rendre un site accessible. Les changements d’état doivent être nets et évidents. Ci-dessous les recommendation à appliquer lors de design et de développement en lien avec le design system.
Boutons
Normal: État visuel par défaut, la couleur du background doit généralement contraster avec le fond dans le bloc sur lequel c’est appliqué.
Hover: Changement de couleur (background, texte et/ou bordure) et changement de curseur (pointer)
Focus/focus-within: un outline qui suit la forme du bouton
Active: combinaison des styles du hover et du focus
Liens
Normal: Aucun underline. S’assurer du contraste de la couleur de lien vs celle du texte lors du design.
Hover: Appliquer un underline et un changement de couleur
Focus: Appliquer un underline et un outline par défaut (utliser focus-visible pour l’appliquer pour éviter d’avoir le outline sur le focus du clic)
Active: Retirer le underline appliqué sur le hover et le focus
Transition
Lors de la déclaration de la propriété transition sur les éléments interactifs, utiliser par défaut ces variables:
transition: color var(--easing--state) var(--duration--faster);
// éventuellement --duration--state