Mettre à jour le design du focus pour le rendre accessible

[gregpetit]

Le design actuel du focus n'est pas accessible pour toutes les composantes. Ce dernier a donc été révisé et 2 déclinaisons ont été ajoutées.

Nouveaux styles de focus

• Style par défaut mis à jour : box-shadow: 0px 0px 0px 2px #FFFFFF, 0px 0px 0px 4px #0079C4;
• Style inversé mis à jour : box-shadow: 0px 0px 0px 2px #101215, 0px 0px 0px 4px #FFB833;
• Style intérieur (nouveau) : box-shadow: inset 0px 0px 0px 4px #FFFFFF, inset 0px 0px 0px 6px #0079C4;

Composantes concernées et type de focus à appliquer Voir le billet JIRA où toutes les composantes sont listées.

[gregpetit]

@alexisletrotteur Pour info, voici le billet pour le nouveau design du focus quand tu seras prêt.

[alexisletrotteur]

Disponible sur dev pour review:

https://services.dev.interne.montreal.ca/boite-outils4/

[gregpetit]

@alexisletrotteur Il y a seulement deux oublis :

• Pour la liste d'objet utilitaire, l'ensemble de l'élément de liste doit être focusable (avec le style intérieur) si c'est un lien, pas seulement les élément intéractifs à l'intérieur de l'élément de liste (bouton, case à cocher, etc.)
• Il manque le focus pour les en-têtes de tableau cliquables (style intérieur)

[alexisletrotteur]

Pour la liste d'objet utilitaire il n'y a pas d'exemple avec des lien présentement dans la BAO. Par contre, je ne me souviens plus trop pourquoi mais le style hover et l'icone de main s'applique quand même au survol de l'élément de liste. Ça devra être corrigé avec la nouvelle liste d'objet. Une balise a ne peut pas contenir un bouton ou un autre lien, il va donc falloir regarder comment bien construire ce genre d'élément.

Pour lLes entêtes de tableau, ça devra être revu parce que présentement ce n'est pas codé comme des éléments focusable.

[gregpetit]

OK c'est noté. Alors tout est beau.