Make Elements accessible using keyboard (issue 1162) #1168
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
Basically, all browsers have this little neat feature that allows users to select elements by pressing the Tab key. It selects the top element and goes down to the right by pressing Tab again. Most of these elements that are selected are interactive elements. Sometimes, interactive elements are not selected due to some markup issues. This commit makes it possible to select user menu through the tab key, thereby making buttons in the user menu a lot more accessible for users who only have keyboards. The changes made are as follows: 1. Make all user menu buttons have a tabindex attribute 2. When the enter key is pressed, evaluate the necessary callback
The Contacts page is the second previously less accessible component in issue 1162. This commit hooks all the necessary "keydown" and "keypress" events and the "tabindex" attribute. Beyond that, this commit has one change that is important to denote. That is, the sorting mechanism of the contacts page. The sorting mechanism used to be done through the CSS attribute: "order". However, this only changes the visual order not the functional element order. This particularily affects keyboard navigation and makes it completely random. The new change of this commit makes the sorting method through jQuery's sort function. Other methods simply erased away very important callbacks and other internal DOM properties that erase away much of the functionality. This approach is preferred because it reduces code complexity.
Beside making linter silent and /teams keyboard accessible, there was
a modification to the styling of the messaging elements that allowed
/contacts to be sorted through Javascript.
There was another modification to the styling of the drive to make the
keyboard focus border visible. Lastly, most of the modification done on
./www/teams/inner.js was through this acme command (that uses sed):
Edit , | sed 's|.click(function () {|.on("click keypress", function (e) {\nif(e.type === "keypress" \&\& e.originalEvent.which !== 13) return;|g'
The command above basically replaced all instance of "click(" to an
event handler that subscribes to "keypress" that starts with checking
that the enter key was entered. If not, it just stops the handler.
Making settings sidebar keyboard accessible was as simple as: 1. Modifying the click to an on event 2. Adding 'tabindex' It was simple because all the categories were generated through the map function.
This commit basically makes any element in the toolbar that is selected by the keyboard visible.
ghost
requested a review
from 
ghost
added
Accessibility
|
Thanks lemondevxyz for the PR! In my opinion we should find a solution with less code duplication. @yflory will be available in a week. We can discuss this topic then. |
|
I could see an application wide solution being made through wrapping jQuery's Or, a solution could be in the form of a button component similar to the |
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 PR request basically fixes issue #1162. It tackles every step in the issue, namely:
Tested on Google Chrome, Desktop, Linux.
Do note that the fixes are in several commits, be sure to check the commits' description for more information.