Needless UI

Mga component

Popover

Mga lumulutang na panel sa tabi ng button, at mga rich tooltip sa hover.

Paggamit ng keyboard

KeyAksyon
Enter o Space sa triggerBinubuksan o isinasara ang popover.
TabPumapasok sa bukas na popover, na kasunod mismo ng trigger nito.
EscapeIsinasara ang popover at ibinabalik ang focus sa trigger nito, o itinatago ang hovercard.

Mga tala sa accessibility

  • Non-modal na dialog ang popover: pangalanan ito gamit ang aria-label o aria-labelledby. Nakakakuha ang trigger nito ng aria-haspopup at ng aria-expanded ng browser.
  • Isang tooltip ang hovercard at ito ang aria-describedby ng trigger nito, kaya binabasa ang text nito kasama ng trigger. Huwag maglagay ng mga control dito; gumamit ng popover para sa mga iyon.
  • Sumusunod ang hovercard sa WCAG 1.4.13: itinatago ito ng Escape nang hindi inililipat ang focus, puwedeng ilipat ang pointer papunta rito, at nananatili ito habang naka-hover o naka-focus.