Fix accessibility issues #184
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
See ajaxorg/ace#5114 When the text cursor is in the editor, the user can now press the Esc key to exit the editor. Pressing the Enter key when the focus ring is visible around the editor will enter the editor again.
This is necessary to be able to control the file tree using the keyboard. Before this commit, the file tree could be navigated using the arrow keys, but when selecting a file by pressing Enter, nothing happened other than highlighting the file tree item with a blue background. It was simply impossible to open a file without a mouse, because you need a mouse to trigger a double-click event. Now a file will open as soon as the corresponding file tree entry is selected, so pressing Enter opens the file. A side effect is that a single click (instead of a double-click) is now enough to open a file. I don't think this is a problem - it matches the behavior of the file tree in Visual Studio Code, for example.
Until now, the overflowing content in the "info panel" and "converter" (at higher zooms, or generally if their dedicated space is too small) has been cut off and inaccessible (this is because GoldenLayout containers have `overflow: hidden` by default). Now a scrollbar appears if needed.
The [modal](https://getbootstrap.com/docs/3.4/javascript/#modals) component in Bootstrap 3.4.1 that we were using to display modals/dialogs until now had some weird behavior in terms of moving focus using the keyboard. When moving the focus forward using the Tab key, it would cycle through the links inside the About modal as expected. Except that after the Close button, the focus would go to a "hidden place" (which was actually the entire `div.modal` element) before the first link in the modal would be focused again. When moving the focus backward using Shift+Tab, the focus would move from the first link to the browser address bar, not to the last element (the Close button in the case of the About modal) as expected. The [`a11y-dialog`](https://a11y-dialog.netlify.app/) library is specifically designed to fix accessibility issues like this, so now we only use some of Bootstrap styles for modal contents, but we no longer use any Bootstrap JS code to display the modal. Instead, showing/hiding the modal is now left entirely to `a11y-dialog`.
This was done mainly for the "@kaitai_io" link in the About modal. Uses the fix from microsoft/vscode#38948
`tabindex="-1"` has been removed from context menu items, allowing navigation between them using the Tab key. Context menus are now wrapped in a "dialog window" using the `a11y-dialog` library. This ensures that the Tab key (and the Shift+Tab key combination) only moves the focus between items in the currently open context menu. The Esc key closes the context menu. When the context menu is opened, the entire browser window is covered with a transparent layer, and clicking on it also closes the context menu.
Member
Author
|
For the record, here is the report from the aforementioned accessibility audit that this pull request addresses: To the best of my knowledge, all identified issues have been addressed except for this sub-item of issue 5:
The reason is that panels and tabs in Web IDE are handled by the Golden Layout library, which apparently does not implement any form of keyboard accessibility. Implementing it would likely require a significant amount of effort and time, which was considered out of scope. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This pull request addresses accessibility issues identified by the HAN University of Applied Sciences as part of an accessibility audit. The work is financially supported by the NLnet Foundation.