Address CodeRabbit feedback

Author: rebeccaalpert

packages/react-core/src/components/Menu/MenuContext.ts

@@ -57,6 +57,14 @@ export const getMenuItemInteractiveRole = (menuRole?: string): string | undefine
   return 'menuitem';
 };
 
+/** Returns the ARIA role for a menu item action button based on the parent menu role. */
+export const getMenuItemActionInteractiveRole = (menuRole?: string): string | undefined => {
+  if (menuRole === 'listbox' || menuRole === 'list') {
+    return undefined;
+  }
+  return 'menuitem';
+};
+
 /** Returns the ARIA role for a menu item's list item wrapper based on the parent menu role. */
 export const getMenuListItemRole = (menuRole: string | undefined, hasCheckbox: boolean): string | undefined => {
   if (menuRole === 'list') {

packages/react-core/src/components/Menu/MenuItemAction.tsx

@@ -1,7 +1,7 @@
 import { forwardRef } from 'react';
 import styles from '@patternfly/react-styles/css/components/Menu/menu';
 import { css } from '@patternfly/react-styles';
-import { getMenuItemInteractiveRole, MenuContext, MenuItemContext } from './MenuContext';
+import { getMenuItemActionInteractiveRole, MenuContext, MenuItemContext } from './MenuContext';
 import { Button } from '../Button';
 export interface MenuItemActionProps extends React.HTMLProps<HTMLDivElement> {
   /** Additional classes added to the action button */
@@ -35,7 +35,7 @@ const MenuItemActionBase: React.FunctionComponent<MenuItemActionProps> = ({
 }: MenuItemActionProps) => (
   <MenuContext.Consumer>
     {({ onActionClick, role: menuRole }) => {
-      const interactiveRole = getMenuItemInteractiveRole(menuRole);
+      const interactiveRole = getMenuItemActionInteractiveRole(menuRole);
       return (
         <MenuItemContext.Consumer>
           {({ itemId, isDisabled: isDisabledContext }) => {

packages/react-core/src/components/Menu/__tests__/Menu.test.tsx

@@ -3,6 +3,7 @@ import '@testing-library/jest-dom';
 
 import { Menu } from '../Menu';
 import { MenuItem, MenuItemProps } from '../MenuItem';
+import { MenuItemAction } from '../MenuItemAction';
 import { MenuList } from '../MenuList';
 import { MenuContent } from '../MenuContent';
 
@@ -132,6 +133,29 @@ describe('Menu', () => {
       expect(screen.getByRole('listbox')).toBeInTheDocument();
       expect(screen.getByRole('option', { name: 'Item' })).toBeInTheDocument();
     });
+
+    test('should not expose menu item actions as options', () => {
+      render(
+        <Menu role="listbox" selected={0}>
+          <MenuContent>
+            <MenuList>
+              <MenuItem
+                itemId={0}
+                actions={<MenuItemAction aria-label="Favorite action" actionId="fav" icon="favorites" />}
+              >
+                Item
+              </MenuItem>
+            </MenuList>
+          </MenuContent>
+        </Menu>
+      );
+
+      expect(screen.getByRole('option', { name: 'Item' })).toBeInTheDocument();
+
+      const actionButton = screen.getByRole('button', { name: 'Favorite action' });
+      expect(actionButton).not.toHaveAttribute('role');
+      expect(screen.queryByRole('option', { name: 'Favorite action' })).not.toBeInTheDocument();
+    });
   });
 
   describe('with default menu role', () => {