Adds menubar ARIA semantics to editor menu #3191
Merged
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.
Related to #2933, makes progress on @lindapaiste's #2968 (thanks for starting some of this already!)
Changes:
role="menubar"
from nav div to file menurole="menuitem"
from<li>
to<button>
or<a>
, whichever element performs a functionrole="menuitem"
to login and sign up linksaria-expanded
to dropdownsindex.integration.test.jsx
to look forrole='menubar'
instead ofrole='navigation'
This PR tries to add ARIA
menubar
semantics to the editor navigation menu, to further support accessibility features like the ones described in issue #2933. The main challenge was resolving how to maintain bothrole=menubar
androle=navigation
on the page. ARIA guidelines differentiate on what makes a menubar (a widget offering a list of actions or functions) vs navigation (a collection of links used for navigating the web page or page content). Menubars are also more closely associated with the menus of desktop applications like Photoshop rather than typical examples of site navigation. Since the web editor's file menu functions more like an application than site navigation, I followed the W3C's menubar pattern where possible.The biggest change is probably substituting the header
<nav>
element for a<div>
; I gaverole=navigation
to the right portion of the nav bar since that dealt more closely with links to other pages. It may also make sense to wrap those lists in a<nav>
element but I have to look into that more.Since the
menubar
pattern implies specific keyboard behaviors, it would help to implement those features as a next step.References:
I have verified that this pull request:
npm run lint
)npm run test
)develop
branch.Fixes #123