Focus-within ou l’inception de l’attention

Article écrit par Victor Darras

Bonjour à tous, en ce début d’été un article assez léger sur un pseudo-sélecteur CSS que vous connaissez peut-être : :focus-within. Avec son nom assez évocateur, il vous permet de sélectionner un élément dont l’un des enfants serait focused. Nous allons voir ensemble comment s’en servir au sein d’un formulaire simple et d’un formulaire en plusieurs étapes. Enfin nous verrons comment cette solution nous permet de créer un dropdown sans JavaScript et accessible au clavier.

Focus-within dans un formulaire, la base

See the Pen focus-within example by Victor Darras (@victordarras) on CodePen.

Dans cet exemple, nous appliquons un effet d’outline sur l’ensemble du formulaire, s’il devait être intégré au sein d’une page plus complexe, cela permettrait d’avoir une vue plus claire sur l’action en cours, en plus du focus classique mais plus discret sur l’input qu’il contient.

Le code intéressant pour cette solution est le suivant :

form:focus-within {   outline: 1px solid #0142bb; } 

Un formulaire plus complet

Dans le cas où nous aurions un formulaire avec beaucoup de champs, nous pourrions le diviser en plusieurs vues distinctes avec des étapes. Mais il est parfois nécessaires de voir l’ensemble des informations d’un formulaire. Pour cela, je vous propose une autre solution :

See the Pen focus-within example by Victor Darras (@victordarras) on CodePen.

Ici nous appliquons un style de focus sur chaque section de formulaire, ce qui permet de distinguer facilement (en plus de l’input) à quelle étape nous en sommes dans le remplissage. C’est un indice visuel plutôt agréable, notamment dans des cas où il serait possible de scroller dans la page et où nous pourrions perdre le fil du remplissage, sur mobile par exemple. (L’exemple de formulaire plus haut n’est pas forcément très long, mais vous voyez l’idée).

Pas vraiment plus compliqué que l’exemple précédent, on applique directement la règle sur la section :

.form-section:focus-within {   background: rgba(1, 66, 187, 0.1); } 

Un exemple plus original ? Un dropdown accessible au clavier

Il est aussi possible grâce à cette fonctionnalité de créer un dropdown sans JavaScript, qui soit accessible au clavier comme au clic ou au survol :

See the Pen focus-within example 3 by Victor Darras (@victordarras) on CodePen.

Revenons plus en détails sur cet exemple afin de bien comprendre tous ces rouages…

Le markup, tout ce qu’il y a de plus classique

On commence comme souvent avec le markup HTML où j’ai mis pour l’exemple quelques liens dans une topbar, et au milieu de cette navigation une entrée qui permettra d’ouvrir le dropdown, à laquelle on attribue la classe .has-dropdown. À l’intérieur de celle-ci, on ajoute le texte affiché ainsi que le contenu ouvrable dans une div avec la classe .dropdown.

<div class="Topbar">   <div class="Topbar__logo"></div>   <nav class="Topbar__nav">     <a class="Topbar__link" href="#check" tabindex="1">Accueil</a>     <div class="Topbar__link has-dropdown" tabindex="1">       Blog       <div class="dropdown">         <a class="Topbar__link" href="#last" tabindex="1">Dernier articles</a><a class="Topbar__link" href="#authors" tabindex="1">Tous les auteurs</a>       </div>     </div>     <a class="Topbar__link" href="#contact" tabindex="1">Contact</a>   </nav> </div> 

Le point le plus important sur cette partie est de s’assurer de définir des tabindex, sur le .has-dropdown en particulier, afin qu’il soit accessible avec la touche TAB du clavier.

Passons maintenant aux styles en 2 parties. La première concerne l’entrée de menu et ne contient rien d’autre que l’indice (la flèche vers le bas) et la position:relative; qui nous permettra par la suite de positionner notre sous-menu en absolute. (Pour le reste des styles de l’exemple, je vous laisse explorer le CodePen, ils n’ont rien de très pertinent pour cet article.)

.has-dropdown {   position: relative; } .has-dropdown:after {   content: '▼';   opacity: 0.7;   font-size: 0.75em; } 

Vient ensuite le dropdown en lui-même. Positionné en absolu, avec quelques règles de style — couleur de fond, box-shadow — pour le démarquer du reste et quelques règles afin de le dissimuler tant qu’il n’est nécessaire.

.dropdown {   position: absolute;   right: 0;   top: 100%;   width: 8em;   display: flex;   flex-flow: column;   align-items: flex-end;   padding: 1em;   gap: 0.5em;   background-color: #fff;   border-radius: 0.5em;   box-shadow: 0 2px 3px rgba(0,0,0,0.1), 0 5px 30px rgba(0,0,0,0.05);   transition: all 0.16s ease;   /* hide it by default */   opacity: 0;   transform-origin: top;   transform: scaleY(0); } 

Pour finir il convient d’ajouter les quelques règles qui permettront d’afficher notre dropdown. D’abord au :hover afin de gérer l’usage à la souris et sur mobile. Ensuite au ayant le :focus sur le terme « blog » pour gérer la navigation au clavier et bien sûr le tant attendu focus-within :

Nous voulons évidemment que ce dropdown reste ouvert pendant que nous parcourons les entrées de ce « sous-menu » et c’est possible avec :focus-within qu’on peut appliquer au choix sur .has-dropdown ou plus simplement sur le .dropdown puisque dans les 2 cas nous aurons le :focus sur l’un de leurs enfants.

.has-dropdown:hover .dropdown, .has-dropdown:focus .dropdown, .dropdown:focus-within {   opacity: 1;   transform: none; } 

Si tout s’est déroulé comme prévu, nous devrions arriver au même comportement que dans l’exemple plus haut. J’espère que cette petite anecdote CSS vous sera utile autant qu’elle a pu l’être pour moi et si c’est le cas, n’hésitez pas à la partager autour de vous.