Needless UI

Komponen

Popover

Panel mengambang di samping tombol, dan tooltip kaya konten saat hover.

Interaksi keyboard

TombolAksi
Enter atau Spasi pada pemicuMembuka atau menutup popover.
TabMasuk ke popover yang terbuka, yang berada tepat setelah pemicunya.
EscMenutup popover dan mengembalikan fokus ke pemicunya, atau menyembunyikan hovercard.

Catatan aksesibilitas

  • Popover adalah dialog non-modal: beri nama dengan aria-label atau aria-labelledby. Pemicunya mendapat aria-haspopup dan aria-expanded dari browser.
  • Hovercard adalah tooltip sekaligus aria-describedby milik pemicunya, sehingga teksnya dibacakan bersama pemicu. Jangan taruh kontrol di dalamnya; gunakan popover untuk itu.
  • Hovercard memenuhi WCAG 1.4.13: Esc menyembunyikannya tanpa memindahkan fokus, pointer bisa berpindah ke atasnya, dan hovercard tetap tampil selama di-hover atau difokus.