HTMLMột dropdown chỉ nghe click là bỏ rơi toàn bộ người dùng bàn phím. Tập phím tối thiểu theo APG (menu button):
- Enter / Space / ArrowDown trên nút: mở menu và focus item đầu.
- ArrowDown / ArrowUp: di chuyển giữa các item (nên cuộn vòng).
- Home / End: nhảy item đầu / cuối.
- Escape: đóng menu và trả focus về nút.
- Tab: đóng menu, đi tiếp ra ngoài — không kẹt bên trong.
- Click ra ngoài: đóng menu.
Trạng thái phải khai báo: nút mang aria-expanded="true|false" và aria-haspopup; container mang role="menu", item mang role="menuitem".
Roving tabindex là kỹ thuật để nhóm item chỉ chiếm một điểm dừng Tab: chỉ item đang active có tabindex="0", các item còn lại tabindex="-1"; khi nhấn mũi tên thì đổi giá trị này và gọi .focus().
js
function focusItem(items, next) {
items.forEach((el, i) => { el.tabIndex = i === next ? 0 : -1 })
items[next].focus()
}Nhờ vậy người dùng Tab một lần là qua cả menu, còn điều hướng bên trong dùng mũi tên — đúng thói quen của widget desktop.
Cách thay thế là aria-activedescendant (focus DOM đứng yên ở container, chỉ đổi id item active), hay dùng cho combobox.