Skip to content
Home Theme Gallery

Keyboard

Every Home-UI component maps to a standard ARIA role and implements the key set that role implies. Nothing is reachable by pointer but unreachable by keyboard.

RoleKeys
button, switch, checkbox, toggleEnter, Space
radiogrouparrows move and select; Tab enters and leaves the group once
sliderarrows, Page Up/Page Down, Home, End
tablistarrows, Home, End, Tab into the active panel
menu, listbox, comboboxarrows, Home, End, Enter, Escape, type-ahead
dialogEscape, trapped Tab and Shift+Tab
grid (calendar)arrows by day, Page Up/Page Down by month, Home/End by week

Composite components use roving tabindex, so a composite is one stop in the page’s tab order, not one stop per item. Arrow keys move focus within it; Tab moves on.

Keys by element
Element Keys
hui-accordion
  • Arrow Up, Arrow Down — Move focus between item triggers, wrapping.
  • Home, End — Move focus to the first or last trigger.
  • Enter, Space — Activate the focused trigger, which is a native button, toggling its panel.
hui-app-shell
  • Tab — The skip control is the first stop; Enter or Space on it moves focus into the main area.
  • F6 — The next region or panel.
  • Shift + F6 — The previous region or panel.
hui-area-chart
  • Tab — Focuses the plot, one stop per chart, and shows the tooltip at the category the keyboard was last on.
  • Arrow Right, Arrow Down — The next category.
  • Arrow Left, Arrow Up — The previous category.
  • Home, End — The first and the last category.
  • Escape — Hides the tooltip; focus stays on the plot.
hui-bar-chart
  • Tab — Focuses the plot, one stop per chart, and shows the tooltip at the category the keyboard was last on.
  • Arrow Right, Arrow Down — The next category.
  • Arrow Left, Arrow Up — The previous category.
  • Home, End — The first and the last category.
  • Escape — Hides the tooltip; focus stays on the plot.
hui-button
  • Tab — Moves focus to and from the button.
  • Enter, Space — Activates the button, exactly as the native control does.
hui-button-group
  • Tab — Walks through the slotted buttons; the group itself is never a tab stop.
  • Each button key — Enter and Space activate whichever button holds focus; the group adds no key handling.
hui-calendar
  • ArrowLeft, ArrowRight — Move the focus one day back or forward.
  • ArrowUp, ArrowDown — Move the focus one week back or forward.
  • PageUp, PageDown — Move the focus one month back or forward.
  • Home, End — Move the focus to the first or last day of the focused week.
  • Enter, Space — Select the focused day.
hui-carousel
  • Arrow Left/Right (or Up/Down) — Moves one slide.
  • Home, End — Moves to the first or last slide.
  • Tab — Reaches the previous, next and dot controls, each named.
hui-checkbox
  • Tab — Moves focus to and from the checkbox; it is a single tab stop.
  • Space, Enter — Toggles the checked state. The internal native button supplies both keys.
hui-combobox
  • ArrowDown, ArrowUp — Open the panel when it is closed; when open, move the highlight to the next or previous enabled option, wrapping at the ends.
  • Home, End — Move the highlight to the first or last option.
  • Enter — Select the highlighted option, commit it to the form and close the panel.
  • Escape — Close the panel without changing the selection.
  • Backspace — On an empty input, clear the current selection.
  • Printable characters — Filter the options by label and highlight the first survivor.
hui-command
  • ArrowDown, ArrowUp — Move the highlight through the visible commands, wrapping at the ends.
  • Home, End — Move the highlight to the first or last visible command.
  • Enter — Run the highlighted command by emitting hui-select, then close.
  • Escape — Close the palette and restore focus to the trigger.
  • Printable characters — Filter the commands and hide a group once all of its items are gone.
hui-confirm-action
  • Enter, Space — Activate the wrapped button or link, which opens the confirmation dialog through the native click.
  • Enter, Escape — Accept or dismiss the native window.confirm() dialog. Focus returns to the page once it closes.
hui-data-grid
  • Arrows — The next cell. Up from the first row reaches the header; the filter row is skipped.
  • Home, End — The first or last cell in the row. With Ctrl or Cmd, the first or last cell in the grid.
  • Page Up, Page Down — Ten rows up or down.
  • Enter, Space on a header — Cycles the sort; with Shift, adds the column as another key. Space on the select-all box selects or clears the page.
  • Space on a row — Selects the row; in multiple, toggles it.
  • Shift + Up, Down — In multiple, extends the selection from the anchor.
  • Ctrl or Cmd + A — In multiple, selects every row on the page.
  • Enter on a cell — Activates the cell’s link or button, or emits hui-grid-activate.
  • Alt + Left, Right on a header — Narrows or widens the column by 16px.
hui-date-picker
  • Printable characters — Type an ISO date; a valid one commits to the form, a malformed one blocks submission.
  • Enter, Space — Activate the toggle to open or close the calendar.
  • Calendar grid keys — Once open, the embedded calendar handles arrows, Page Up/Down and Home/End; Enter or Space picks the focused day and closes the panel.
hui-dialog
  • Escape — Requests dismissal through hui-dismiss. The platform event is always prevented so an alert dialog stays up and a guard can refuse.
  • Tab, Shift+Tab — Cycles within the modal; the rest of the document is inert while it is open.
  • Enter, Space — Activates the focused control in the dialog, including the slotted trigger that opens it.
hui-dropdown-menu
  • Arrow Down, Arrow Up — Move to the next or previous enabled item, wrapping. Disabled items are skipped rather than focused.
  • Home, End — Move to the first or last item.
  • Enter, Space — Activate the focused item and report hui-select.
  • Escape, Arrow Left — Close the menu and return focus to the trigger.
  • Printable characters — Type-ahead jumps to the first label starting with the typed buffer, which resets after a pause.
hui-field
  • Tab — Moves focus straight to the wrapped control; the field wrapper is never a tab stop.
  • Control keys — Every key is handled by the wrapped control; hui-field adds no key handling of its own.
hui-input
  • Tab, Shift+Tab — Moves focus to and from the control.
  • Standard editing keys — Arrows, Home, End, Backspace and selection behave exactly as the native input does.
  • Number and date types — Arrow keys step the value, following the browser behaviour for that input type.
hui-input-otp
  • Typing — Fills the focused cell and advances to the next, replacing a digit already there, so a wrong code can be typed over; a multi-character input or paste distributes from the current cell.
  • Arrow Left, Arrow Right — Move focus between cells without changing the value.
  • Home, End — Move focus to the first and last cell.
  • Backspace — Deletes the current character; on an empty cell it clears the previous cell and moves focus back to it.
hui-line-chart
  • Tab — Focuses the plot, one stop per chart, and shows the tooltip at the category the keyboard was last on.
  • Arrow Right, Arrow Down — The next category.
  • Arrow Left, Arrow Up — The previous category.
  • Home, End — The first and the last category.
  • Escape — Hides the tooltip; focus stays on the plot.
hui-listbox
  • Up, Down — Moves the cursor, skipping disabled rows. In single it also selects.
  • Home, End — The first or last enabled row.
  • Page Up, Page Down — Moves by the rows visible in the list.
  • Space — Selects the cursor row; in multiple, toggles it.
  • Shift + Up, Down, Home, End, Page keys — In multiple, extends the range from the anchor.
  • Ctrl/Cmd + A — In multiple, selects every enabled row.
  • Enter — Emits hui-activate for the cursor row.
  • Printable keys — Type-ahead to the next row starting with what was typed.
  • Tab — Reaches the sort heads, then the rows, as one stop.
hui-menubar
  • Arrow Left/Right — Moves between menus; with one open, opens the next without closing and reopening.
  • Tab — The whole bar is one tab stop; the arrow keys move within it.
  • Escape — Closes the open menu and returns focus to its trigger.
hui-navigation-menu
  • Arrow Left/Right (or Up/Down) — Moves focus between the top-level links.
  • Enter — Follows the link; on an item with a panel, opens the panel and moves focus to its first link.
  • Escape — Closes the open panel and returns focus to its link; then closes the folded menu and returns focus to its button.
hui-pagination
  • Tab — Moves focus through the real links in order.
  • Enter — Follows the focused link, exactly as a normal anchor does.
hui-path
  • Tab — Each link, trigger and chevron in turn. With roving, into and out of the trail as one stop.
  • Left, Right — With roving, the previous or next control, not wrapping; reversed in right-to-left.
  • Home, End — With roving, the first or last control.
  • Down — On a chevron, opens its children. With roving, on a menu trigger, opens the menu.
  • Enter — In the edit field, commits the path.
  • Escape — In the edit field, restores the trail. In an open menu, closes it and returns to its trigger.
hui-path-node
  • Down — On the chevron, opens the children menu.
hui-pie-chart
  • Tab — Focuses the plot, one stop per chart, and shows the tooltip at the category the keyboard was last on.
  • Arrow Right, Arrow Down — The next category.
  • Arrow Left, Arrow Up — The previous category.
  • Home, End — The first and the last category.
  • Escape — Hides the tooltip; focus stays on the plot.
hui-popover
  • Escape — Closes the panel through the platform's popover handling and returns focus to the trigger.
  • Enter, Space — Activate the slotted trigger through its own control, which opens or closes the panel.
  • Tab, Shift+Tab — Move through the page normally; the panel is non-modal and traps nothing. Leaving the panel with Tab closes it.
hui-radial-chart
  • Tab — Focuses the plot, one stop per chart, and shows the tooltip at the category the keyboard was last on.
  • Arrow Right, Arrow Down — The next category.
  • Arrow Left, Arrow Up — The previous category.
  • Home, End — The first and the last category.
  • Escape — Hides the tooltip; focus stays on the plot.
hui-radio-group
  • Tab — Enters and leaves the group as a single tab stop; the selected item, or the first, holds tabindex="0".
  • Arrow keys — Up, Down, Left and Right all move and select, wrapping at the ends.
  • Space, Enter — Selects the focused item.
  • Home, End — Jump to the first and last item.
hui-resizable
  • Arrow keys — Move the focused separator by 2 percent.
  • Home, End — Move to the minimum or maximum.
  • Enter — Collapses or restores a collapsible pane.
hui-search-field
  • Printable characters — Update the value and emit input.
  • Tab — Moves focus from the input to the clear button while it is visible.
  • Enter, Space — Activate the clear button, which empties the field and emits input and change.
hui-select
  • Arrow Down, Arrow Up, Enter, Space — While closed, open the listbox; Enter and Space also open it without moving the active option.
  • Arrow Down, Arrow Up, Home, End — While open, move the active option, wrapping and skipping disabled options.
  • Enter, Space (single) — Select the active option, emit input and change, and close.
  • Space (multiple) — Toggle the active option without closing, so several can be chosen in one opening.
  • Ctrl or Cmd + A (multiple) — Select every enabled option.
  • Escape — Close the listbox and keep the current value.
  • Printable characters — Type-ahead moves the active option to the first label starting with the typed buffer.
hui-sidebar
  • Enter, Space — Toggles from the rail or a slotted trigger.
  • Tab — Moves through the menu items; the rail is a real control. Tabbing into an unpinned sidebar floats it open at once, with no hover dwell, and tabbing out of it closes it again.
  • Escape — Closes the sheet when it presents as one below the breakpoint, and closes a floating unpinned panel. It does not unpin: a pin is a layout, not an overlay.
hui-slider
  • Arrow keys — Step the focused thumb up or down; Left and Down decrease, Right and Up increase.
  • Page Up, Page Down — Move the thumb by a larger step, as the native range input does.
  • Home, End — Jump to the minimum and maximum.
  • Tab — Moves between the two inputs in range mode, which are separate controls.
hui-switch
  • Tab — Moves focus to and from the switch; it is a single tab stop.
  • Space, Enter — Toggles the switch. The internal native button supplies both keys.
hui-table
  • Tab — Reaches each selection control and sort header in order.
  • Space — Toggles a selection checkbox.
  • Enter, Space — Activates a sort header, emitting hui-sort.
hui-tabs
  • Arrow Left, Arrow Right — Horizontal orientation: move focus between tabs, wrapping. With automatic activation the panel follows focus.
  • Arrow Up, Arrow Down — Vertical orientation: move focus between tabs, wrapping.
  • Home, End — Move focus to the first or last tab.
  • Enter, Space — In manual activation, commit the focused tab without waiting for the next arrow press.
  • Enter (navigation mode) — Follows the focused link, natively, as the browser does for any anchor. The arrows move focus and the tab stop without changing the server's aria-current.
hui-textarea
  • Tab, Shift+Tab — Moves focus to and from the control; Tab does not insert a tab character.
  • Enter — Inserts a newline.
  • Standard editing keys — Arrows, Home, End, Backspace and selection behave exactly as the native textarea does.
hui-theme-toggle
  • Tab — Moves focus to the slotted control, or to the element when it supplies its own button role.
  • Enter, Space — Cycles the theme when the element carries role="button"; otherwise the slotted native control activates as usual.
hui-toast
  • Tab — Moving focus into a toast fires focusin, which pauses its dismissal; leaving resumes the timer.
  • Enter, Space — Activate a data-dismiss control inside a toasted item to dismiss it, emitting hui-toast-dismiss.
hui-toggle
  • Tab — Moves focus to and from the toggle; it is one tab stop.
  • Space, Enter — Toggles the pressed state, supplied by the internal native button.
  • Arrow keys — Move focus only when the toggle sits inside a hui-toggle-group, which owns the roving tabindex.
hui-toggle-group
  • Tab — Enters and leaves the group as one tab stop; one item holds tabindex="0" and the rest -1.
  • Arrow keys — Move focus between segments, wrapping at the ends; Home and End jump to the first and last.
  • Space, Enter — Activates the focused segment, toggling it in multiple mode and replacing the value in single mode.
hui-tooltip
  • Tab — Moving keyboard focus onto the trigger opens the tooltip immediately.
  • Escape — Closes the tooltip without moving focus, as WCAG 1.4.13 requires.
  • Tab (rich) — The panel follows the anchor in the DOM, so Tab from the trigger reaches interactive content in a rich tooltip without a trap.
hui-tree
  • Up, Down — The previous or next visible item, skipping disabled ones. In single it also selects.
  • Right — A closed branch opens; an open branch moves to its first child; a leaf does nothing.
  • Left — An open branch closes; anything else moves to its parent.
  • Home, End — The first or last visible item.
  • * — Opens every sibling branch at the cursor’s level.
  • Space — Selects the cursor item; in multiple toggles it; in checkbox toggles its check.
  • Shift + Up, Down, Home, End — In multiple, extends the range from the anchor over the visible items.
  • Enter — Emits hui-activate for the cursor item.
  • Printable keys — Type-ahead over the visible labels.

packages/ui/tests/keyboard/keyboard.spec.ts asserts each documented key set — not a sample of it — and the component specs add the tab, roving, type-ahead and grid-navigation cases. Each overlay has a focus spec asserting entry, trapping where applicable, and restoration. The same suites run in Chromium, Firefox and WebKit.

Accessibility is not proved by automation alone. Periodic manual passes with keyboard only, the accessibility tree and at least one screen reader remain part of the process, per the solution specification.

See also Screen readers.