Ensuring Quill picker is fully accessible #1999
Merged
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
Previously, the Quill picker was not a part of the tab order, which makes the picker inaccessible to screen readers/keyboard only users. Furthermore, once the picker was added to the tab order, I found that the picker options were not tabbable either, so I made the option items tabbable as well. I also made the dropdown escapable, so that screen reader/keyboard only users who opened the dropdown could exit out of it. Finally, I added the appropriate ARIA attributes to make sure screen readers could describe the state of the picker properly.
|
Thanks for the PR -- it looks very detailed! I'll try to review this weekend |
|
@jhchen I also ended up making one edit to LinkedIn's picker to make it open via spacebar too as per Microsoft's accessibility guidelines, so I can go back and add that into this PR if Quill wants this change too |
|
Thank you for the contribution and especially the tests! Feel free to submit another PR for the spacebar support. Are there any other accessibility gaps with the editor or toolbar? |
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.
I work at LinkedIn, and we recently ran into some accessibility issues with the Quill picker concerning tabbing and ARIA attributes.
In our own LinkedIn picker (that extends the Quill picker), I've implemented the following changes to make the picker accessible, so I figured I'd put a pull request here too in case Quill developers were interested in benefitting from these accessibility changes.
Previously, the Quill picker was not a part of the tab order, which makes the picker inaccessible to screen readers/keyboard only users.
Furthermore, once the picker was added to the tab order, I found that the picker options were not tabbable. So, I made the option items tabbable and also added functionality to be able to select option items via use of the "Enter" key. I also made the dropdown escapable, so that screen reader/keyboard only users who opened the dropdown could exit out of it.
Finally, I added the appropriate ARIA attributes to make sure screen readers could describe the state of the picker properly.
Please feel free to reach out if you have any questions.