L'article explore les problèmes de superposition des éléments en CSS et les solutions modernes comme les popovers et les dialogs. Il explique comment les contextes de superposition (stacking contexts) peuvent compliquer l'utilisation de z-index et comment les éléments comme les popovers et les dialogs peuvent accéder à la "top layer" pour résoudre ces problèmes. Cependant, l'article met en lumière un conflit potentiel entre les popovers et les dialogs, notamment en matière d'accessibilité, où un utilisateur au clavier peut rencontrer des difficultés pour interagir avec un popover (comme une notification toast) lorsqu'un dialog est ouvert. L'auteur illustre ce problème avec un exemple concret et un CodePen démonstratif.
Un tutoriel / guide pour la création de popovers - pour rappel, la différence entre infobulle (tooltip) et popover est essentiellement la quantité d'information affichée
Cet article explique comment créer un menu hamburger accessible et fonctionnel sans utiliser JavaScript, en s'appuyant sur l'API Popover. Cette approche permet de garantir une navigation fluide et accessible pour tous les utilisateurs, y compris ceux utilisant des lecteurs d'écran. L'article détaille les étapes pour structurer le menu en HTML sémantique, utiliser les attributs Popover pour gérer l'affichage du menu, et ajouter des attributs ARIA pour améliorer l'accessibilité. Des exemples de code et des conseils pratiques sont fournis pour animer l'ouverture et la fermeture du menu, tout en respectant les bonnes pratiques d'UX.
Tout est dans le titre
Plusieurs solutions sont proposées : l'élément details, l'élément dialog, et l'API popover
Tout est dans le titre
Tout est dans le titre