-
Notifications
You must be signed in to change notification settings - Fork 4.2k
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
Fix aria-modal attribution with multiple navs on page #37813
Conversation
Size Change: +4 B (0%) Total Size: 1.13 MB
ℹ️ View Unchanged
|
@tellthemachines Code looks sane to me and makes sense. However, I am not sure how to setup multiple navs given the existing A11Y issues in the back-end. Can you throw together a quick test site by any chance or know someone who may be able to? Thanks. |
@alexstine I haven't managed to install the plugin zip generated by this PR; it seems to be missing a file or two. One thing you can try is add a couple of Navigation blocks in the body of a post; if you use the "add all pages" option from the block placeholder you won't need to add any content to them. Then save and view the post on the front end. Let me know if that doesn't work for you, and I'll try and sort out a test site tomorrow. |
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.
Accessibility and code look good. Simple change, applies the attributes correctly now.
Description
Fixes #36600 (last step in fixing this issue, mostly it was addressed in #37434)
If there is more than one Navigation block on the page, the dialog attribute is always attached to the first one. This PR fixes it so attributes are always attached to the correct block.
How has this been tested?
aria-modal="true"
androle="dialog"
are added to that overlay (they should be on thewp-block-navigation__responsive-dialog
element) and not the other navigation block.Screenshots
Types of changes
Bug fix (non-breaking change which fixes an issue)
Checklist:
*.native.js
files for terms that need renaming or removal).