Keyboard and accessibility
For: People using the web UI.
Use the console with a keyboard, a small screen or reduced motion. This page also names the checks that cover those behaviours.
Keyboard and accessibility
Every page works from the keyboard and in both themes, light and dark. make e2e-a11y runs axe-core over every page in both themes and fails on a serious or critical finding, such as text below WCAG 2.2's contrast of 4.5:1.
Other checks cover controls in use:
make e2e-drawerchecks the open chat drawer.make e2e-consolechecks the period control, an open filter dropdown and a list's pages at desktop and phone widths.make e2e-recordschecks the same controls on Jobs, the audit log and Errors, including each list's period, filter and page token sent to the server.make e2e-listschecks the search, a filter and the pages of Nodes, Plugins and the Inventory.
With reduce motion set in your system, the drawer opens without sliding and nothing spins.
On a phone the console keeps everything in view rather than cutting it: a page's header puts its actions on a line under the title, and a long title, such as a node's or a job's ID, wraps; a page with more than three tabs shows them as a Show select; the studio shows one pane at a time, with Files, Editor and Inspector buttons to switch while keeping edits; and a field never runs wider than the screen.
make e2e-routes checks this on every route of the console, with a real job, agent, tool, node, plugin and routine, in both themes at a desktop's width (1440 px) and a phone's (390 px): it fails on text cut short in a heading, tab, button or label, a control without a name for screen readers, the header's title or controls overlapping, a page that scrolls sideways on the phone, and a serious or critical axe finding, and prints a table of routes and what it found.
- The first Tab on a page offers Skip to the page, past the sidebar.
- A list's rows are stops for Tab: Enter or Space opens the row in its dialog, and Esc closes the dialog and puts you back on the row.
- Type ? in the search (⌘K, Ctrl K) for every shortcut of the console:
| Where | Keys | What they do |
|---|---|---|
| Anywhere | ⌘K, Ctrl K | Open or close the search |
| Anywhere | Esc | Close a dialog, the chats or the search |
| Anywhere | ⌘J, Ctrl J | Open or close the chats; Esc closes them and puts you back where you were |
| Chats | Enter, Shift Enter | Send the message; a new line |
| Chats | ↑ ↓, Alt ↑ Alt ↓ | Move through the list of chats; the chat before or after the open one |
| Search | ↑ ↓, Home End | Move through the results |
| Search | Enter | Open the result, or confirm an action that asks first |
| Lists | Enter, Space | Open the focused row in its dialog |
| Studio | ⌘S, Ctrl S | Save the file |
| Studio | ← →, Home End | Resize a focused pane separator; Home closes its pane and focuses its toggle, End restores its starting width. The panel button reopens it |
| Debugger | J K, ↓ ↑ | Next and previous step; Enter shows its input and output |
Each page says the same four things the same way: that it loads; that there is nothing yet, with what to do first; that it could not load, in the server's words, with Try again; and, where your role does not include the page, which role it needs. The browser tab names the page you are on.
The server sends the app's scripts and styles gzipped: the sign-in page is about 180 kB of them, and a signed-in first load about 330 kB, fonts aside.