Keyboard Interaction
General Keyboard Interaction
At Xelix we’re working on making keyboard navigation across our platform more efficient and accessible. Below shows the keyboard interactions we currently support in most areas of our application.
Navigation
- Tab: Move focus to the next interactive element (e.g., button, link, input field)
- Shift + Tab: Move focus to the previous interactive element
- Arrow keys: Navigate interactive lists or groups (e.g., menus, dropdown lists, radio buttons)
Trigger
- Enter: Trigger or activate interactive elements (e.g., press a button, open a dropdown menu)
Selection and Toggle
- Space: Select or deselect elements with a checked/unchecked state (e.g., checkboxes, toggle switches)
Copy/Paste
- Ctrl (Cmd) + c: Copy selection to clipboard
- Ctrl (Cmd) + v: Paste clipboard contents
Cancel
- Esc: Cancel an action or close an element (e.g., close a dropdown)
Note The keys selected can be seen on the bottom left corner of the video.
Keyboard Interaction in Tables
General keyboard interactions apply in our tables, with some additional functionalities listed below.
Navigation
- Arrow keys: Move focus up, down, left, and right to navigate cells
- Tab: Move focus to next cell (horizontal movement)
- Shift + Tab: Move focus to previous cell (horizontal movement)
Trigger
- Enter: Focus an interactive element within a focused cell
Selection and Toggle
- Space: Select or deselect a row when any cell in the row is focused
Sorting and Filtering Columns
Focus the header cell of the column you want to sort or filter, then:
- Enter: Focus the first available control (either sort or filter)
- Tab: Move focus to the next available control
- Shift + Tab: Move focus to the previous control
Moving, and Resizing Columns
Focus the header cell of the column you want to move or resize, then:
- Shift + Arrow keys: Move the column (horizontal movement)
- Alt (Option) + Arrow keys: Resize the column (horizontal movement)