Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ensuring Quill picker is fully accessible #1999

Merged
merged 1 commit into from Mar 12, 2018

Conversation

@erinsinger93
Copy link
Contributor

commented Mar 6, 2018

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.

@erinsinger93 erinsinger93 force-pushed the erinsinger93:develop branch from 2ff8339 to 5328a45 Mar 6, 2018
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.
@erinsinger93 erinsinger93 force-pushed the erinsinger93:develop branch from 5328a45 to cf48ce8 Mar 6, 2018
@jhchen

This comment has been minimized.

Copy link
Member

commented Mar 7, 2018

Thanks for the PR -- it looks very detailed! I'll try to review this weekend

@erinsinger93

This comment has been minimized.

Copy link
Contributor Author

commented Mar 9, 2018

@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

@jhchen jhchen merged commit cf48ce8 into quilljs:develop Mar 12, 2018
1 check passed
1 check passed
continuous-integration/travis-ci/pr The Travis CI build passed
Details
@jhchen

This comment has been minimized.

Copy link
Member

commented Mar 12, 2018

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
Projects
None yet
2 participants
You can’t perform that action at this time.