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

feat(MenuBar): Make the menu bar role=toolbar and add focus handling #4874

Merged
merged 1 commit into from
Oct 20, 2023

Conversation

susnux
Copy link
Contributor

@susnux susnux commented Oct 17, 2023

📝 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

  • Not part of that issue but we need to keep the focus on the menu item rather than jumping to the content after click.

🏁 Checklist

  • Code is properly formatted (npm run lint / npm run stylelint / composer run cs:check)
  • Sign-off message is added to all commits
  • Tests (unit, integration and/or end-to-end) passing and the changes are covered with tests
  • Documentation (README or documentation) has been updated or is not required

Copy link
Member

@Pytal Pytal left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested and works!

@susnux susnux requested a review from skjnldsv October 19, 2023 10:24
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]>
@juliushaertl
Copy link
Member

Failures are unrelated, especially broken rich workspace seems to come from a recent server merge

@juliushaertl juliushaertl merged commit 9a589e6 into main Oct 20, 2023
26 of 31 checks passed
@juliushaertl juliushaertl deleted the a11y/toolbar branch October 20, 2023 09:07
Copy link
Contributor

Hello there,
Thank you so much for taking the time and effort to create a pull request to our Nextcloud project.

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[BITV] 9.2.4.3/3.9 - Toolbar focus handling
5 participants