a11y - separate nav expander from link #7868
Conversation
katiegoines
changed the title
|
Menu Links are causing a full page reload Screen.Recording.2024-08-09.at.2.25.21.PM.mov |
|
Also it looks like we are losing the current menu item selected font color |
@jacoblogan as discussed, I'm not seeing that behavior anymore: toggleexapnd.mov |
src/components/Menu/MenuItem.tsx
Outdated
| const buttons = item.getElementsByTagName('button'); | ||
| if (links[0].getAttribute('tabIndex') == 0) { | ||
| for (const link of links) { | ||
| link.setAttribute('tabIndex', -1); |
There was a problem hiding this comment.
It looks like the desired tab behavior only works when opening the link after landing on a page, reloading while already on a page leaves these visible menu links untabbable
Screen.Recording.2024-08-15.at.9.18.18.AM.mov
src/components/Menu/MenuItem.tsx
Outdated
| button.setAttribute('tabIndex', -1); | ||
| } | ||
| } else if (-links[0].getAttribute('tabIndex')) { | ||
| links[0]?.setAttribute('tabIndex', 0); |
There was a problem hiding this comment.
It looks like the tabIndex can get out of sync with the display by clicking on the button and the link. I wonder if there is another attribute that could be used to determine if this should be tabbable. Something like tracking the open state in the parent and using that isOpen state to determine the tabIndex of the menu items.
Screen.Recording.2024-08-15.at.9.29.31.AM.mov
Description of changes:
[ISSUE] The concern here is that it isn't clear that clicking a link in the nav that has children will also expand it. They suggest adding a separate button (around the arrow) that can be used to toggle the children open and close using a disclosure pattern.
Staging: https://a11y-toggle-expand-nav-links.d1egzztxsxq9xz.amplifyapp.com/
Related GitHub issue #, if available:
Instructions
If this PR should not be merged upon approval for any reason, please submit as a DRAFT
Which product(s) are affected by this PR (if applicable)?
Which platform(s) are affected by this PR (if applicable)?
Please add the product(s)/platform(s) affected to the PR title
Checks
Does this PR conform to the styleguide?
Does this PR include filetypes other than markdown or images? Please add or update unit tests accordingly.
Are any files being deleted with this PR? If so, have the needed redirects been created?
Are all links in MDX files using the MDX link syntax rather than HTML link syntax?
ref: MDX:
[link](https://docs.amplify.aws/)HTML:
<a href="https://docs.amplify.aws/">link</a>When this PR is ready to merge, please check the box below
By submitting this pull request, I confirm that my contribution is made under the terms of the Apache 2.0 license.