Popover API : focus, fermeture et accessibilité

BotBrowser peut rejouer un fixture autorisé et relever les résultats visibles d’ouverture, de fermeture et de focus ; il ne garantit pas le comportement d’une technologie d’assistance ni la disponibilité du repli sur chaque navigateur. Associez ce guide aux contrôles d’accessibilité de Pointer Events et aux tests d’accessibilité de l’automatisation lorsque le parcours combine pointeur et clavier.

TL;DR

• Choisissez popover="auto" pour une surface non modale avec light-dismiss, ou manual quand le code possède chaque fermeture.
• Le top layer ne crée ni piège de focus, ni nom accessible, ni sémantique de dialogue.
• Vérifiez Escape, le clic extérieur, le retour du focus et le fond inert séparément.
• beforetoggle peut annuler ; toggle décrit la transition confirmée et le repli doit conserver le résultat.

Sommaire

• Choisir le modèle d’état
• Top layer et light-dismiss
• Focus et inert sont deux contrats
• Observer beforetoggle et toggle
• Construire un repli utile
• Exécuter une matrice bornée
• Conclusion pratique

Choisir le modèle d’état

La spécification HTML WHATWG définit l’attribut popover et ses algorithmes d’affichage. popover="auto" convient aux menus, aides et filtres non modaux qui peuvent être écartés ; le navigateur gère la pile des popovers automatiques. popover="manual" laisse la décision à l’application quand plusieurs surfaces doivent rester ouvertes ou qu’un bouton « terminé » porte la clôture.

Ne confondez pas cet attribut avec <dialog>. Un popover n’est pas modal, ne piège pas le focus et ne reçoit pas automatiquement de nom accessible. Utilisez un vrai button, popovertarget et un nom décrivant le contenu. Ajoutez des rôles de menu uniquement si le comportement clavier correspondant existe.

Le guide Popover API de MDN présente showPopover(), hidePopover() et togglePopover(). Détectez la méthode avant le chemin impératif et rendez la règle de fermeture visible dans l’interface.

Top layer et light-dismiss

Un popover affiché rejoint le top layer. Pour auto, le navigateur fournit le light-dismiss, mais il ne garantit ni un placement adapté au viewport visuel, ni une sortie visible avec zoom, clavier virtuel ou iframe. Testez Escape et le clic extérieur séparément. Pour manual, fournissez un bouton de fermeture ; ne remplacez pas la sémantique par une couche transparente.

L’introduction de Popover API par Chrome décrit les objectifs de top layer et light-dismiss. Elle n’établit pas une parité entre versions, navigateurs intégrés et technologies d’assistance. Notez version et viewport, puis vérifiez le résultat visible.

Focus et inert sont deux contrats

L’affichage ne décide pas du focus. Selon qu’il s’agit d’une suggestion, d’un menu ou d’un éditeur, gardez le focus sur le déclencheur ou déplacez-le vers le premier contrôle. Mémorisez l’ouvreur et rendez le focus à un élément encore connecté ; sinon, choisissez le titre ou l’action suivante définie par le produit. N’appelez pas focus() sur un nœud détaché.

Vérifiez que clavier, pointeur et technologie d’assistance atteignent les contrôles attendus. Un popover manual peut laisser le fond actif ; une tâche modale s’exprime mieux avec <dialog> et showModal(). Les recommandations WCAG sur le clavier et focus-visible demandent nom, rôle, état, indicateur et action suivante.

Observer beforetoggle et toggle

beforetoggle survient avant la transition et peut la refuser ou préparer le focus. toggle arrive après la transition confirmée. Les changements rapides peuvent être regroupés : consignez opened ou closed-by-escape, pas le texte de page ni une trace de chaque clic.

const trigger = document.querySelector('#filters-button');
const panel = document.querySelector('#filters-panel');
let opener = null;

trigger.addEventListener('click', () => {
  opener = document.activeElement;
  panel.togglePopover();
});
panel.addEventListener('beforetoggle', event => {
  if (event.newState === 'open' && !trigger.isConnected) event.preventDefault();
});
panel.addEventListener('toggle', event => {
  if (event.newState === 'closed' && opener?.isConnected) opener.focus();
});

Ce code décrit une coordination, pas un ordre identique dans tous les navigateurs. Après une annulation, la surface et le focus restent utilisables ; le repli expose le même état lorsque l’événement manque.

Construire un repli utile

Détectez l’API et utilisez un bouton ordinaire, une région cachée au départ et une fermeture avec aria-controls. Gardez contenu et ordre du focus. Si le besoin est modal, utilisez un motif de dialogue pris en charge. Gérez méthode absente, focus refusé, ouvreur supprimé et viewport modifié. BotBrowser compare les états visibles d’un contexte autorisé ; il ne certifie pas la parole d’un lecteur d’écran ni le top layer de chaque build.

Exécuter une matrice bornée

Parcours	Résultat attendu	Défaillance à examiner
Invocation clavier, auto	Ouverture, focus visible, Escape ferme	Focus perdu
Clic extérieur, auto	Fermeture unique et retour du focus	Nettoyage double
Bouton fermer, manual	L’application cache et restaure l’ouvreur	Aucun propriétaire de fermeture
API absente	Contenu et clavier équivalents	Repli inaccessible
Viewport réduit	Sortie visible et texte lisible	Sortie recadrée

Répétez avec zoom, mouvement réduit, tactile et viewport étroit. Vérifiez document.activeElement, le nom accessible, l’indicateur et l’action suivante. Gardez un fixture synthétique et des étiquettes d’état minimales.

Si le popover doit aussi suivre un déclencheur mobile, consultez le guide des limites de l’anchor positioning CSS pour tester anchor-name, les candidats de repli et le clipping séparément du focus.

Conclusion pratique

Choisissez auto ou manual selon le propriétaire de la fermeture et testez top layer, light-dismiss, Escape, focus, inert et repli séparément. WHATWG, MDN et Chrome décrivent la plateforme ; BotBrowser répète un fixture visible autorisé, tandis que l’application garde la responsabilité sémantique.

Sources

• WHATWG HTML : popover
• MDN Popover API
• Chrome : Introducing the Popover API
• WCAG 2.2 : clavier

FAQ

popover="auto" est-il un dialogue modal ?

Non. Utilisez <dialog> et showModal() lorsque la tâche est réellement modale.

Le top layer déplace-t-il le focus ?

Non. Définissez la destination, le retour et le repli si l’ouvreur disparaît.

Chaque popover doit-il se fermer au clic extérieur ?

Non. auto prévoit le light-dismiss ; manual laisse la décision au code.