3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-06-06 12:52:31 +02:00
Code Issues Projects Releases Packages Wiki Activity

refactor: improve a11y of dropdown menu (#6971)

Browse source 
Co-authored-by: Joshua Chen <sidachen2003@gmail.com>
Co-authored-by: sebastienlorber <lorber.sebastien@gmail.com>
This commit is contained in:
Alexey Pyltsyn 2022-03-25 15:02:24 +03:00 • committed by GitHub
parent c2ac22ec15
commit d879cdca96
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 10 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

11
packages/docusaurus-theme-classic/src/theme/NavbarItem/DropdownNavbarItem.tsx
View file

@ -85,6 +85,9 @@ function DropdownNavbarItemDesktop({
'dropdown--show': showDropdown, 'dropdown--show': showDropdown,
})}> })}>
<NavbarNavLink <NavbarNavLink
aria-haspopup="true"
aria-expanded={showDropdown}
role="button"
href={props.to ? undefined : '#'} href={props.to ? undefined : '#'}
className={clsx('navbar__link', className)} className={clsx('navbar__link', className)}
{...props} {...props}
@ -107,7 +110,13 @@ function DropdownNavbarItemDesktop({
setShowDropdown(false); setShowDropdown(false);
const nextNavbarItem = dropdownRef.current!.nextElementSibling; const nextNavbarItem = dropdownRef.current!.nextElementSibling;
if (nextNavbarItem) { if (nextNavbarItem) {
(nextNavbarItem as HTMLElement).focus(); const targetItem =
nextNavbarItem instanceof HTMLAnchorElement
? nextNavbarItem
: // Next item is another dropdown; focus on the inner
// anchor element instead so there's outline
nextNavbarItem.querySelector('a');
(targetItem as HTMLElement).focus();
} }
} }
}} }}