Une fois la modale refermée, redonner le focus sur le bouton l'ayant ouverte (navigation à la souris)

[ldzintegratore]

[UX] : En utilisant la navigation au clavier pour ouvrir/fermer la modale, le focus est bien redonné sur le bouton l'ayant ouverte mais en navigant tout à la souris (par des clics) et lorsque l'on ferme la modale il n'en est rien visuellement.

FF 61.0.1 et Chrome 67.0.3396.99 et Edge

Dans le cas où le focus est bien redonné (navigation au clavier), l'animation de la position :focus du bouton perturbe puisqu'elle fait disparaitre visuellement sa distinction. Cela redevient un bouton non focusé.
-> laisser la distinction visible (plus foncé avec border-bottom)

[enwin]

Bonjour @ldzintegratore

En effet, visuellement, rien n’est indiqué lorsque le focus est remis sur le bouton ayant ouvert la modale lors d’une navigation par souris.
Dans les styles du site a11y.switch.paris, la distinction sur les styles des différents états d’un bouton est faite en se basant sur le type de “pointeur” utilisé (clavier, doigt, souris, etc.). Avec une utilisation à la souris, seul les états :hover modifient les styles du bouton, au clavier, seul les états :focus.

Ce choix a été fait pour éviter qu’un style :focus (que ce soit le même style que :hover ou un autre) soit visible alors qu’on navigue à la souris, ce style restant visible jusqu’à ce que l’utilisateur clique ailleurs. Le même problème existe lors d’une navigation tactile, nous choisissons donc de modifier le style du bouton seulement lors de l’état :active, les éléments touchés recevant le focus.
Tout cela afin d’éviter les éventuels effets résiduels de focus quand on ne navigue qu’à la souris. Bien entendu, les effets au focus restent bien présents au clavier.

Concernant ton second point, il y a effectivement un délai avant de faire disparaître les styles s’appliquant à une navigation clavier. Est-ce cela dont tu parles ? Sache que ce comportement va être remplacé par une autre méthode rapidement.

Je te remercie de tes retours UX. Nous allons voir comment améliorer ce site et nos futurs développements 🙂