fix(a11y): add accessibility for dropdown submenu via tab

src/components/DropdownMenu/DropdownMenuItem.tsx

@@ -62,15 +62,42 @@ export const DropdownMenuItem = <T,>({
     }, [closeMenu, closeSubmenu, hasSubmenu, toggle]);
 
     const handleMenuItemClick = React.useCallback(
-        (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
+        (
+            event: React.MouseEvent<HTMLElement, MouseEvent> &
+                React.MouseEvent<HTMLAnchorElement, MouseEvent>,
+        ) => {
+            event.preventDefault();
+
+            props.extraProps?.onClick?.(
+                event as React.MouseEvent<HTMLDivElement, MouseEvent> &
+                    React.MouseEvent<HTMLAnchorElement, MouseEvent>,
+            );
+
             if (hasSubmenu) {
+                event.stopPropagation();
+
+                if (isSubmenuOpen) {
+                    closeSubmenu();
+                } else {
+                    openSubmenu();
+                }
+
                 return;
             }
 
             action?.(event, data as unknown as T);
             handleCloseMenu();
         },
-        [action, data, handleCloseMenu, hasSubmenu],
+        [
+            action,
+            data,
+            handleCloseMenu,
+            hasSubmenu,
+            isSubmenuOpen,
+            openSubmenu,
+            closeSubmenu,
+            props.extraProps,
+        ],
     );
 
     const extraProps = React.useMemo(() => {

src/components/DropdownMenu/DropdownMenuPopup.tsx

@@ -4,10 +4,10 @@ import * as React from 'react';
 
 import {KeyCode} from '../../constants';
 import {useListNavigation} from '../../hooks';
-import {Menu} from '../Menu';
 import type {MenuProps} from '../Menu';
-import {Popup} from '../Popup';
+import {Menu} from '../Menu';
 import type {PopupProps} from '../Popup';
+import {Popup} from '../Popup';
 
 import {cnDropdownMenu} from './DropdownMenu.classname';
 import {DropdownMenuContext} from './DropdownMenuContext';
@@ -161,6 +161,7 @@ export const DropdownMenuPopup = <T,>({
 
                             const extraProps = {
                                 ...item.extraProps,
+                                onClick: activate,
                                 onMouseEnter: activate,
                             };