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" && (