-
Notifications
You must be signed in to change notification settings - Fork 87
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
feat(MenuBar): Make the menu bar role=toolbar
and add focus handling
#4874
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Tested and works!
For accessibility the toolbar should be implemented using `role=toolbar`. This requires custom focus handling[1] this is done by making only one element tabable. [1] https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/toolbar_role#description Signed-off-by: Ferdinand Thiessen <[email protected]>
4d334c9
to
e7c33bb
Compare
Failures are unrelated, especially broken rich workspace seems to come from a recent server merge |
Hello there, We hope that the review process is going smooth and is helpful for you. We want to ensure your pull request is reviewed to your satisfaction. If you have a moment, our community management team would very much appreciate your feedback on your experience with this PR review process. Your feedback is valuable to us as we continuously strive to improve our community developer experience. Please take a moment to complete our short survey by clicking on the following link: https://cloud.nextcloud.com/apps/forms/s/i9Ago4EQRZ7TWxjfmeEpPkf6 Thank you for contributing to Nextcloud and we hope to hear from you soon! |
📝 Summary
For accessibility the toolbar should be implemented using
role=toolbar
. This requires custom focus handling[1] this is done by making only one element tabable / only one tab stop.I had to remove the ActionEntry component as this functional component did not forward the template ref, so replaced it with a conditional component.
[1] https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/toolbar_role#description
🖼️ Screenshots
vokoscreenNG-2023-10-18_00-31-22.mp4
As you can see there is only one tab stop in the toolbar (the last used formatting option).
🚧 TODO
🏁 Checklist
npm run lint
/npm run stylelint
/composer run cs:check
)