mirror of
https://github.com/facebook/docusaurus.git
synced 2025-06-01 18:32:52 +02:00
refactor: improve a11y of dropdown menu (#6971)
Co-authored-by: Joshua Chen <sidachen2003@gmail.com> Co-authored-by: sebastienlorber <lorber.sebastien@gmail.com>
This commit is contained in:
parent
c2ac22ec15
commit
d879cdca96
1 changed files with 10 additions and 1 deletions
|
@ -85,6 +85,9 @@ function DropdownNavbarItemDesktop({
|
|||
'dropdown--show': showDropdown,
|
||||
})}>
|
||||
<NavbarNavLink
|
||||
aria-haspopup="true"
|
||||
aria-expanded={showDropdown}
|
||||
role="button"
|
||||
href={props.to ? undefined : '#'}
|
||||
className={clsx('navbar__link', className)}
|
||||
{...props}
|
||||
|
@ -107,7 +110,13 @@ function DropdownNavbarItemDesktop({
|
|||
setShowDropdown(false);
|
||||
const nextNavbarItem = dropdownRef.current!.nextElementSibling;
|
||||
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();
|
||||
}
|
||||
}
|
||||
}}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue