diff --git a/components/DropdownMenu/DropdownSubMenu.tsx b/components/DropdownMenu/DropdownSubMenu.tsx index 187f9b0668..d78e41df3f 100644 --- a/components/DropdownMenu/DropdownSubMenu.tsx +++ b/components/DropdownMenu/DropdownSubMenu.tsx @@ -36,6 +36,14 @@ const DropdownSubMenu = ({ items }: DropdownMenuProps) => { index === activeTab ? styles.active : "" )} onClick={() => setActiveTab(index)} + tabIndex={0} + onKeyDown={(e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + setActiveTab(index); + } + }} + aria-expanded={activeTab === index} > {submenuTitle} diff --git a/components/Menu/Category.tsx b/components/Menu/Category.tsx index 7410f3cfb2..ee6ff272c6 100644 --- a/components/Menu/Category.tsx +++ b/components/Menu/Category.tsx @@ -70,6 +70,7 @@ const MenuCategory = ({ ? submenus : columns : null; + const toggleOpened = useCallback( (e: React.MouseEvent) => { if (children) { @@ -81,6 +82,7 @@ const MenuCategory = ({ }, [opened, children, id, onToggleOpened, onClick] ); + const open = useCallback( (e: React.MouseEvent) => { onHover(id); @@ -88,6 +90,17 @@ const MenuCategory = ({ [id, onHover] ); + const keyDown = useCallback( + (e: React.KeyboardEvent) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + !opened ? onToggleOpened(id) : onToggleOpened(null); + } + if (e.key === "Escape") onToggleOpened(null); + }, + [id, opened, onToggleOpened] + ); + const containsSubCategories = !!columns || !!submenus; return ( @@ -116,7 +129,10 @@ const MenuCategory = ({ className={cn(styles.menuButton, opened ? styles.opened : "")} onClick={toggleOpened} onMouseEnter={open} + tabIndex={0} data-testid={testId} + onKeyDown={keyDown} + aria-expanded={opened} > {title} {isDropdown === "dropdown" && (