A11Y improvements for DropdownNavbarItemDesktop #9439
Conversation
✅ [V2]Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify site configuration. |
| onMouseEnter={() => setShowDropdown(true)} | ||
| onMouseLeave={() => setShowDropdown(false)} | ||
| onKeyDown={onKeyDown} | ||
| className={clsx('navbar__item', 'dropdown', { | ||
| 'dropdown--right': position === 'right', | ||
| 'dropdown--show': showDropdown, | ||
| // When hydrated, handle hover state in JS | ||
| // It need to be kept in sync with the button onClick | ||
| 'dropdown--hoverable': !isBrowser, | ||
| })}> |
There was a problem hiding this comment.
It should be the same behavior as https://squareup.com navbar and https://www.radix-ui.com/primitives/docs/components/navigation-menu
The dropdown can be collapsed with a click on the button if it was open with a hover
| role="button" | ||
| href={props.to ? undefined : '#'} | ||
| className={clsx('navbar__link', className)} | ||
| {...props} |
There was a problem hiding this comment.
In this draft/test I removed from now the props spread
⚡️ Lighthouse report for the deploy preview of this PR
|
| .dropdownButton { | ||
| font-size: inherit; | ||
| border: none; | ||
| background: none; | ||
| color: var(--ifm-navbar-link-color); | ||
| font-weight: var(--ifm-font-weight-semibold); | ||
| cursor: pointer; | ||
| padding: 0; | ||
| } | ||
|
|
||
| .dropdownButton:hover { | ||
| color: var(--ifm-navbar-link-hover-color); | ||
| } | ||
|
|
||
| .dropdownButton::after { | ||
| display: inline-block; | ||
| border-color: currentColor transparent; | ||
| border-style: solid; | ||
| border-width: 0.4em 0.4em 0; | ||
| content: ''; | ||
| margin-left: 0.3em; | ||
| position: relative; | ||
| top: 2px; | ||
| transform: translateY(-50%); | ||
| } |
There was a problem hiding this comment.
Because I used a native button, I needed to reset native styles. I guess everything from this file should be moved/refactored to this repo https://github.com/facebookincubator/infima
I didn't reuse the navbar__link in this current PR because they were some styles I didn't want, for example:
|
Hi @Josh-Cena @slorber Still a draft, what do you think of the changes? I could also make a smaller PR, that would still fix the issue (#8478). We could keep the |
|
Hey Thanks for your work on this |
Pre-flight checklist
Motivation
The goal of this PR is to improve the usability of the dropdown buttons, for example, the version dropdown:
Improvements
buttoninstead of alinkwith an ARIA Role, a button should be usable with theSPACEandENTERkey, it was only working with theENTERkey.https://www.w3.org/TR/using-aria/#rule1
Escape key to close the dropdown
I removed
aria-haspopup: true: When using this ARIA attributes, the dropdown should match the menu roleSee also https://adrianroselli.com/2017/10/dont-use-aria-menu-roles-for-site-nav.html
onClickexpands and collapses the dropdown (For this issue Bug(navbar): languages and doc version drop downs are inaccessible via the keyboard and screen reader #8478 (comment))Test Plan
On https://deploy-preview-9439--docusaurus-2.netlify.app/
Keyboard:
Hover
Test links
Deploy preview: https://deploy-preview-9439--docusaurus-2.netlify.app/
Related issues/PRs
#8478