« The popover attribute is used to designate an element as a popover element. » La définition du HTML Living Standard tient en une phrase, mais ce qu’elle recouvre change concrètement la manière d’écrire un menu déroulant depuis que le support est devenu fiable sur les navigateurs majeurs.
Avant cet attribut, un menu de filtre accessible nécessitait presque toujours du JavaScript maison pour gérer trois choses : fermer le menu au clic extérieur, fermer le menu à la touche Échap, et replacer le focus sur le bouton déclencheur à la fermeture. L’attribut popover prend en charge ces trois comportements nativement.
Ce que fait réellement l’attribut popover
La mise en œuvre la plus simple associe un bouton déclencheur et un conteneur marqué popover :
<button popovertarget="filtre-couleurs">
Filtrer par couleur
</button>
<div id="filtre-couleurs" popover>
<fieldset>
<legend>Couleurs disponibles</legend>
<label><input type="checkbox" name="couleur" value="bleu"> Bleu</label>
<label><input type="checkbox" name="couleur" value="vert"> Vert</label>
</fieldset>
</div>
Sans une seule ligne de script, ce menu se ferme à la touche Échap, se ferme au clic en dehors de sa zone, s’affiche au-dessus du reste du contenu grâce à la couche top layer du navigateur, et rend le focus au bouton qui l’a ouvert. Le navigateur associe aussi automatiquement les deux éléments par un rôle implicite qui aide les technologies d’assistance à comprendre la relation déclencheur-contenu.
Ce qui reste à la charge du développeur
L’attribut popover gère l’ouverture, la fermeture et le focus au niveau du conteneur, mais il ne gère pas la navigation interne au menu. Si le menu de filtre contient plusieurs groupes de cases à cocher, la navigation par flèches entre les options reste un choix de conception à implémenter séparément, tout comme l’annonce du nombre de filtres actifs.
- Le focus initial à l’ouverture reste sur le premier élément focusable du conteneur par défaut, ce qui convient bien à un menu de filtre mais peut nécessiter un ajustement pour un menu d’actions.
- L’attribut
popover="manual"permet de désactiver la fermeture automatique au clic extérieur, utile si le contenu comporte lui-même des éléments qui ouvrent d’autres calques. - Les événements
toggleetbeforetogglepermettent de synchroniser un état visuel (icône de flèche, texte du bouton) avec l’ouverture réelle du popover.
Où l’attribut popover ne suffit pas
Pour un menu de filtre simple, le gain est net. Pour une fenêtre modale complète avec formulaire, étapes multiples et piège de focus intentionnel, l’élément <dialog> reste plus adapté : il porte une sémantique de boîte de dialogue explicite et un mode modal qui bloque réellement l’interaction avec le reste de la page, ce que le popover ne fait pas par défaut. Les deux mécanismes répondent à des besoins différents et ne s’excluent pas : un site peut très bien utiliser popover pour ses menus contextuels et <dialog> pour ses fenêtres modales.
| Besoin | Solution adaptée |
|---|---|
| Menu de filtre, info-bulle, menu contextuel | Attribut popover |
| Formulaire modal bloquant, confirmation critique | Élément dialog en mode modal |
Le résultat sur un cas concret
Sur un menu de filtre converti récemment, le remplacement du gestionnaire de clic extérieur, de l’écouteur de touche Échap et de la logique de restitution du focus a permis de retirer une quarantaine de lignes de JavaScript maison, remplacées par un seul attribut et deux lignes de synchronisation visuelle sur l’événement toggle. La logique métier du filtre, elle, n’a pas bougé d’un octet.
Conseil maison : ne convertissez pas tous vos calques d’un coup. Commencez par les menus contextuels non bloquants, les plus simples, avant de vous attaquer aux cas plus riches.
En résumé
L’attribut popover ne remplace pas toute réflexion sur l’accessibilité d’un menu déroulant, mais il retire une bonne partie du code répétitif qui accompagnait chaque nouvelle implémentation. Pour un menu de filtre classique, la bascule est presque toujours positive : moins de code à maintenir, un comportement clavier cohérent avec celui que les utilisateurs connaissent déjà sur d’autres sites, et un focus qui revient toujours au bon endroit.
