Needless UI

Komponenten

Popover

Schwebende Panels neben einem Button und reichhaltige Tooltips beim Hovern.

Tastaturbedienung

TasteAktion
Enter oder Leertaste auf dem TriggerÖffnet oder schließt das Popover.
TabSpringt in ein geöffnetes Popover, das direkt auf seinen Trigger folgt.
EscSchließt das Popover und setzt den Fokus zurück auf seinen Trigger, oder blendet die Hovercard aus.

Hinweise zur Barrierefreiheit

  • Das Popover ist ein nicht modaler dialog: Benenne es mit aria-label oder aria-labelledby. Sein Trigger erhält aria-haspopup und das aria-expanded des Browsers.
  • Die Hovercard ist ein tooltip und das aria-describedby ihres Triggers, daher wird ihr Text mit dem Trigger vorgelesen. Lass Bedienelemente draußen; dafür gibt es das Popover.
  • Die Hovercard erfüllt WCAG 1.4.13: Esc blendet sie aus, ohne den Fokus zu verschieben, der Mauszeiger kann auf sie wechseln, und sie bleibt sichtbar, solange der Mauszeiger darauf liegt oder sie den Fokus hat.