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:
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

View file

@ -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();
}
}
}}