Fix accessibility issues #184
Draft
Conversation
This file contains 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`.
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.