@patternfly/react-core 4.228.0 → 4.228.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.228.0",
+  "version": "4.228.1",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -34,9 +34,9 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.79.0",
-    "@patternfly/react-styles": "^4.78.0",
-    "@patternfly/react-tokens": "^4.80.0",
+    "@patternfly/react-icons": "^4.79.1",
+    "@patternfly/react-styles": "^4.78.1",
+    "@patternfly/react-tokens": "^4.80.1",
     "focus-trap": "6.9.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
@@ -60,5 +60,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "f02b0e0e72ea0aa326e1d512b1da0397b10e7f9a"
+  "gitHead": "f6c791bad9fa1bc817102fea17d5ba7243cd6121"
 }

package/src/components/Menu/MenuItem.tsx

@@ -192,11 +192,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);
@@ -251,7 +252,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 = () => {
@@ -309,12 +310,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 })}

package/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}