fix(Tabs): fixed keyboard use and positioning of TabsAndTable dropdowns

packages/react-core/src/components/Dropdown/DropdownItem.tsx

@@ -27,7 +27,7 @@ export interface DropdownItemProps extends Omit<MenuItemProps, 'ref'>, OUIAProps
   ouiaSafe?: boolean;
 }
 
-const DropdownItemBase: React.FunctionComponent<MenuItemProps> = ({
+const DropdownItemBase: React.FunctionComponent<DropdownItemProps> = ({
   children,
   className,
   description,
@@ -42,20 +42,21 @@ const DropdownItemBase: React.FunctionComponent<MenuItemProps> = ({
   const ouiaProps = useOUIAProps(DropdownItem.displayName, ouiaId, ouiaSafe);
   return (
     <MenuItem
-      ref={innerRef}
       className={css(className)}
       description={description}
       isDisabled={isDisabled}
       itemId={itemId}
       onClick={onClick}
+      ref={innerRef}
       {...ouiaProps}
       {...props}
     >
       {children}
     </MenuItem>
   );
 };
-export const DropdownItem = React.forwardRef((props: DropdownItemProps, ref: React.Ref<any>) => (
+
+export const DropdownItem = React.forwardRef((props: DropdownItemProps, ref: React.Ref<HTMLAnchorElement | HTMLButtonElement>) => (
   <DropdownItemBase {...props} innerRef={ref} />
 ));
 

packages/react-core/src/demos/examples/DashboardWrapper.js

@@ -58,7 +58,7 @@ export default class DashboardWrapper extends React.Component {
       header,
       sidebar,
       sidebarNavOpen,
-      onPageResize,
+      onPageResize = () => {},
       hasNoBreadcrumb,
       notificationDrawer,
       isNotificationDrawerExpanded,

packages/react-core/src/demos/examples/Tabs/TabsAndTable.tsx

@@ -56,6 +56,7 @@ import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-i
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import SortAmountDownIcon from '@patternfly/react-icons/dist/esm/icons/sort-amount-down-icon';
+import { KeyTypes } from '../../../helpers';
 
 interface Repository {
   name: string;
@@ -135,15 +136,47 @@ export const TablesAndTabs = () => {
     }
   ];
 
+  const firstActionRef = React.useRef<HTMLButtonElement>(null);
+
+  /** Handles when the user clicks on the custom action toggle, stops propagation to prevent the drawer from opening */
+  const handleActionsToggleClick = (event: React.MouseEvent, ActionsToggleProps: CustomActionsToggleProps) => {
+    const { onToggle } = ActionsToggleProps;
+
+    onToggle(event);
+    event.stopPropagation();
+  };
+
+  /** Enables keyboard navigation of the custom actions toggle */
+  const handleActionsToggleKeyDown = (event: React.KeyboardEvent, ActionsToggleProps: CustomActionsToggleProps) => {
+    const { onToggle } = ActionsToggleProps;
+    const { Enter, Space, Escape, ArrowDown, ArrowUp } = KeyTypes;
+
+    const shouldToggle = [Enter, Space, Escape].includes(event.key);
+    const shouldFocus = [ArrowDown, ArrowUp, Enter, Space].includes(event.key);
+
+    if (shouldToggle) {
+      event.preventDefault();
+      event.stopPropagation();
+      onToggle(event);
+    }
+
+    if (shouldFocus) {
+      setTimeout(() => {
+        firstActionRef.current?.focus();
+      }, 0);
+    }
+  };
+
   const customActionsToggle = (props: CustomActionsToggleProps, toggleName: string) => (
     <MenuToggle
       isDisabled={props.isDisabled}
-      onClick={(event: any) => {
-        props.onToggle(event);
-        event.stopPropagation();
-      }}
+      onClick={(event: React.MouseEvent) => handleActionsToggleClick(event, props)}
+      onKeyDown={(event: React.KeyboardEvent) => handleActionsToggleKeyDown(event, props)}
       variant="plain"
       aria-label={`${toggleName} actions`}
+      aria-haspopup="menu"
+      isExpanded={props.isOpen}
+      ref={props.toggleRef}
     >
       <EllipsisVIcon />
     </MenuToggle>
@@ -270,6 +303,7 @@ export const TablesAndTabs = () => {
               <ActionsColumn
                 items={defaultActions}
                 actionsToggle={(props: CustomActionsToggleProps) => customActionsToggle(props, repo.name)}
+                firstActionItemRef={firstActionRef}
               />
             </Td>
           </Tr>

packages/react-table/src/components/Table/ActionsColumn.tsx

@@ -8,7 +8,7 @@ import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-ico
 import { Tooltip } from '@patternfly/react-core/dist/esm/components/Tooltip';
 
 export interface CustomActionsToggleProps {
-  onToggle: (event: React.MouseEvent) => void;
+  onToggle: (event: React.MouseEvent | React.KeyboardEvent) => void;
   isOpen: boolean;
   isDisabled: boolean;
   toggleRef: React.Ref<any>;
@@ -28,6 +28,8 @@ export interface ActionsColumnProps extends Omit<React.HTMLProps<HTMLElement>, '
   popperProps?: any;
   /** @hide Forwarded ref */
   innerRef?: React.Ref<any>;
+  /** Ref to forward to the first item in the popup menu */
+  firstActionItemRef?: React.Ref<HTMLButtonElement>;
 }
 
 const ActionsColumnBase: React.FunctionComponent<ActionsColumnProps> = ({
@@ -40,6 +42,8 @@ const ActionsColumnBase: React.FunctionComponent<ActionsColumnProps> = ({
     position: 'right',
     direction: 'down'
   },
+  innerRef,
+  firstActionItemRef,
   ...props
 }: ActionsColumnProps) => {
   const [isOpen, setIsOpen] = React.useState(false);
@@ -103,15 +107,16 @@ const ActionsColumnBase: React.FunctionComponent<ActionsColumnProps> = ({
           )
         }
         {...(rowData && rowData.actionProps)}
+        ref={innerRef}
         {...props}
         popperProps={popperProps}
       >
         <DropdownList>
           {items
             .filter((item) => !item.isOutsideDropdown)
-            .map(({ title, itemKey, onClick, tooltip, tooltipProps, isSeparator, ...props }, key) => {
+            .map(({ title, itemKey, onClick, tooltip, tooltipProps, isSeparator, ...props }, index) => {
               if (isSeparator) {
-                return <Divider key={itemKey || key} data-key={itemKey || key} />;
+                return <Divider key={itemKey || index} data-key={itemKey || index} />;
               }
               const item = (
                 <DropdownItem
@@ -120,16 +125,17 @@ const ActionsColumnBase: React.FunctionComponent<ActionsColumnProps> = ({
                     onToggle();
                   }}
                   {...props}
-                  key={itemKey || key}
-                  data-key={itemKey || key}
+                  key={itemKey || index}
+                  data-key={itemKey || index}
+                  ref={index === 0 ? firstActionItemRef : undefined}
                 >
                   {title}
                 </DropdownItem>
               );
 
               if (tooltip) {
                 return (
-                  <Tooltip key={itemKey || key} content={tooltip} {...tooltipProps}>
+                  <Tooltip key={itemKey || index} content={tooltip} {...tooltipProps}>
                     {item}
                   </Tooltip>
                 );