From 682ba3f216a664d90810c6bdab1881c88c6d140e Mon Sep 17 00:00:00 2001
From: Eric Olkowski <thatblindgeye@gmail.com>
Date: Thu, 28 Jul 2022 12:52:00 -0400
Subject: [PATCH] fix(Menu/Nav): flyout variants work with VO navigation

---
 packages/react-core/src/components/Menu/MenuItem.tsx | 12 +++++++-----
 packages/react-core/src/components/Nav/NavItem.tsx   |  6 ++++++
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/packages/react-core/src/components/Menu/MenuItem.tsx b/packages/react-core/src/components/Menu/MenuItem.tsx
index 5255c684a0b..cf9f3a4400c 100644
--- a/packages/react-core/src/components/Menu/MenuItem.tsx
+++ b/packages/react-core/src/components/Menu/MenuItem.tsx
@@ -189,11 +189,12 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
     }
   }, [flyoutVisible, flyoutTarget]);
 
-  const handleFlyout = (event: React.KeyboardEvent) => {
-    const key = event.key;
+  const handleFlyout = (event: React.KeyboardEvent | React.MouseEvent) => {
+    const key = (event as React.KeyboardEvent).key;
     const target = event.target;
+    const type = event.type;
 
-    if (key === ' ' || key === 'Enter' || key === 'ArrowRight') {
+    if (key === ' ' || key === 'Enter' || key === 'ArrowRight' || type === 'click') {
       event.stopPropagation();
       if (!flyoutVisible) {
         showFlyout(true);
@@ -248,7 +249,7 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
   if (isOnPath) {
     additionalProps['aria-expanded'] = true;
   } else if (hasFlyout) {
-    additionalProps['aria-haspopup'] = true;
+    additionalProps['aria-haspopup'] = 'menu';
     additionalProps['aria-expanded'] = flyoutVisible;
   }
   const getAriaCurrent = () => {
@@ -305,12 +306,13 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
             className={css(styles.menuItem, getIsSelected() && !hasCheck && styles.modifiers.selected, className)}
             aria-current={getAriaCurrent()}
             {...(!hasCheck && { disabled: isDisabled })}
-            {...(!hasCheck && { role: 'menuitem' })}
+            {...(!hasCheck && !flyoutMenu && { role: 'menuitem' })}
             ref={innerRef}
             {...(!hasCheck && {
               onClick: (event: any) => {
                 onItemSelect(event, onSelect);
                 _drill && _drill();
+                flyoutMenu && handleFlyout(event);
               }
             })}
             {...(hasCheck && { htmlFor: randomId })}
diff --git a/packages/react-core/src/components/Nav/NavItem.tsx b/packages/react-core/src/components/Nav/NavItem.tsx
index 84c87a77361..103b7517a2e 100644
--- a/packages/react-core/src/components/Nav/NavItem.tsx
+++ b/packages/react-core/src/components/Nav/NavItem.tsx
@@ -150,6 +150,11 @@ export const NavItem: React.FunctionComponent<NavItemProps> = ({
     </span>
   );
 
+  const ariaFlyoutProps = {
+    'aria-haspopup': 'menu',
+    'aria-expanded': flyoutVisible
+  };
+
   const renderDefaultLink = (context: any): React.ReactNode => {
     const preventLinkDefault = preventDefault || !to;
     return (
@@ -164,6 +169,7 @@ export const NavItem: React.FunctionComponent<NavItemProps> = ({
         )}
         aria-current={isActive ? 'page' : null}
         tabIndex={isNavOpen ? null : '-1'}
+        {...(hasFlyout && { ...ariaFlyoutProps })}
         {...props}
       >
         {children}