Needless UI

Composants

Popover

Des panneaux flottants à côté d’un bouton, et des infobulles riches au survol.

Interaction au clavier

ToucheAction
Entrée ou Espace sur le déclencheurOuvre ou ferme le popover.
TabEntre dans un popover ouvert, qui suit directement son déclencheur.
ÉchapFerme le popover et rend le focus à son déclencheur, ou masque la hovercard.

Notes d’accessibilité

  • Le popover est un dialog non modal : nommez-le avec aria-label ou aria-labelledby. Son déclencheur reçoit aria-haspopup et l’aria-expanded du navigateur.
  • La hovercard est un tooltip et l’aria-describedby de son déclencheur : son texte est donc lu avec le déclencheur. N’y mettez pas de contrôles ; utilisez un popover pour cela.
  • La hovercard respecte le critère WCAG 1.4.13 : Échap la masque sans déplacer le focus, le pointeur peut passer dessus, et elle reste affichée tant qu’elle est survolée ou a le focus.