Web IDE is not accessible to keyboard users!
Summary
The Web IDE has key components that are not accessible to those using AT, like screen readers, or even for Keyboard-Only users!
Steps to reproduce
Open the Web IDE and attempt to use only your keyboard or AT.
Example Project
any
What is the current bug behavior?
A keyboard user cannot focus the directories and files listed in the file tree. Which means they cannot access the "Create New/Upload" button for a directory, because it's only shown on :hover
or :focus
.
What is the expected correct behavior?
An Keyboard-Only user should be able to tab through the file tree and expand/collapse directories, and focus the "Upload" button, so that they can upload a file to that specific directory.
Relevant logs and/or screenshots
Possible fixes
The core cause is that all the "buttons" in the file tree are actually marked up as <div role="button">
But, they're not in the tab order because they're missing the required tabindex="0"
.
Or, preferably, instead of using div
s, just use the semantic <button>
element instead, which would automatically make them accessible! However, <button>
s do not allow interactive content.