L'API Popover atterrit en ligne de référence

Una Kravets

La mise à jour va prendre effet ! L'une des fonctionnalités qui m'intéressent le plus vient d'arriver sur tous les navigateurs récents. Elle fait officiellement partie de Baseline 2024. Cette fonctionnalité est l'API Popover. Popover fournit de nombreuses primitives et affordances de développeur impressionnantes pour la création d'interfaces multicouches telles que des info-bulles, des menus, des interfaces utilisateur pédagogiques, etc.

Voici quelques exemples des fonctionnalités disponibles dans les fenêtres pop-up:

• Promotion sur la couche supérieure. Des pop-ups s'afficheront dans la couche supérieure au-dessus du reste de la page, vous n'avez donc pas besoin de jouer avec z-index.
• Fonctionnalité Light-Ignorer. Si vous cliquez en dehors de la zone pop-up, celui-ci se ferme et le curseur est rétabli.
• Gestion des sélections par défaut. Si vous ouvrez le pop-over, l'onglet suivant s'arrête dans celui-ci.
• Combinaisons de claviers accessibles. Appuyez sur la touche esc ou basculez deux fois pour fermer le pop-up et rétablir le curseur.
• Liaisons de composants accessibles. Connecter un élément de pop-over à un déclencheur de pop-over sémantiquement.

Créer des pop-ups

La création de pop-ups est assez simple. Pour utiliser les valeurs par défaut, il vous suffit d'avoir un élément button pour déclencher le pop-up et un élément à déclencher.

• Tout d'abord, définissez un attribut popover sur l'élément, qui fera office de pop-over.
• Ensuite, ajoutez un id unique à l'élément pop-over.
• Enfin, pour connecter le bouton au pop-over, définissez la popovertarget du bouton sur la valeur id de l'élément pop-over.

Ce processus est illustré dans le code suivant :

<button popovertarget="my-popover">Open Popover</button>

<div id="my-popover" popover>
  <p><p>I am a popover with more information. Hit <kbd>esc</kbd> or click away to close me.<p></p>
</div>

Pour un contrôle plus précis des fenêtres pop-up, vous pouvez définir explicitement leurs types. Par exemple, l'utilisation d'un attribut popover simple sans valeur équivaut à popover="auto". La valeur auto active le comportement de fermeture légère et ferme automatiquement les autres fenêtres pop-up. Utilisez popover="manual" et vous devrez ajouter un bouton de fermeture. Les fenêtres pop-up manuelles ne ferment pas les autres fenêtres pop-up et ne permettent pas aux utilisateurs de les fermer en cliquant ailleurs dans l'interface utilisateur. Pour créer un pop-over manuel, procédez comme suit:

<button popovertarget="my-popover" class="trigger-btn"> Open Popover </button>

<div id="my-popover" popover=manual>
  <p>I am a popover with more information. Hit the close button or toggle to close me.<p>
  <button class="close-btn" popovertarget="my-popover" popovertargetaction="hide">
    <span aria-hidden="true">❌</span>
    <span class="sr-only">Close</span>
  </button>
</div>

Pop-over ou boîte de dialogue modale

Vous vous demandez peut-être si vous avez besoin d'un pop-over quand une boîte de dialogue existe, et que la réponse est: ce n'est peut-être pas le cas.

Il est important de noter que l'attribut popover ne fournit pas de sémantique en soi. Bien que vous puissiez désormais créer des expériences semblables à des boîtes de dialogue modales à l'aide d'un pop-up, il existe quelques différences clés entre les deux:

Conclusion et lecture complémentaire

popover apporte de nombreuses fonctionnalités intéressantes sur la plate-forme. Pour en savoir plus sur cette API, y compris sur son accessibilité et sur la documentation concernant l'ensemble de fonctionnalités, nous vous recommandons de lire les ressources suivantes:

• Sémantique et attribut pop-over : "quoi utiliser quand" de Hidde de Vries
• À propos de l'accessibilité dans la fenêtre pop-up: ce que fait le navigateur et ne fait pas par Hidde de Vries
• Documentation MNN sur le pop-over