Put it in your app Keyboard and accessibility
Keyboard and accessibility
Everything the mouse does, the keyboard does too, and a screen reader is told where it is. axe checks every state the browser tests reach, by WCAG 2.2 AA, in both themes.
The keys
| Key | What it does |
|---|---|
| ↑ ↓, Home, End | Through the list or the grid. |
| Enter | Open: a folder goes into it, a file opens in the viewer. |
| Space, Shift + ↑ ↓, ⌘/Ctrl + A | Pick several. |
| F2 | Rename. |
| Delete, Backspace | Into the trash. |
| ⌘/Ctrl + Z | Undo the last trash, move, rename or colour. |
| Shift + F10, the menu key | The menu of what is picked. |
| ← → | In the viewer: the file before and after. |
| Escape | Close the menu, the dialog or the viewer. |
What a screen reader hears
- The list is a listbox: each entry is said with its owner, date and size, and how many are picked.
- The toast is a status that is read, with its Undo button reached by Tab.
- Dialogs keep the focus inside and give it back where it was when they close.
- The upload panel is a region; each file has a progress bar named after it, and a failure is an alert.
- The colours of a folder are a group of radio buttons, each named.
How it is checked
npm run test:browser goes through the drive with the keyboard alone, and runs axe on every state: empty and with files, the list and the grid, each dialog, the trash, a search, Spanish at the width of a phone, a link signed out, the same in the dark theme, chosen and as the system is.