Add onSelect handler and tabindexes when appropriate

packages/components/src/ui/menu/component.js

@@ -32,7 +32,7 @@ import * as styles from './styles';
  * @param {import('react').Ref<any>} forwardedRef
  */
 function Menu( props, forwardedRef ) {
-	const { children, className, menu, ...otherProps } = useContextSystem(
+	const { as, children, className, menu, ...otherProps } = useContextSystem(
 		props,
 		'Menu'
 	);
@@ -47,7 +47,7 @@ function Menu( props, forwardedRef ) {
 
 	const classes = cx( styles.Menu, className );
 	const menuProps = menu || {};
-	const Component = menu ? ReakitMenu : View;
+	const Component = as || menu ? ReakitMenu : View;
 
 	return (
 		<MenuContext.Provider value={ contextProps }>

packages/components/src/ui/menu/item.js

@@ -30,17 +30,21 @@ import * as styles from './styles';
  */
 function MenuItem( props, forwardedRef ) {
 	const {
+		as,
 		children,
 		className,
 		closeOnClick = false,
 		isBack = false,
 		isOffset = false,
 		isSelected,
 		onClick = noop,
+		onSelect = noop,
+		onKeyDown = noop,
 		prefix,
 		showArrow = false,
 		size,
 		suffix,
+		tabIndex: tabIndexProp,
 		...otherProps
 	} = useContextSystem( props, 'MenuItem' );
 
@@ -56,7 +60,7 @@ function MenuItem( props, forwardedRef ) {
 		className
 	);
 
-	const Component = menu ? ReakitMenuItem : View;
+	const Component = as || ( menu ? ReakitMenuItem : View );
 
 	const prevArrow = useMemo(
 		() =>
@@ -112,15 +116,37 @@ function MenuItem( props, forwardedRef ) {
 	}, [ nextArrow, selectedContent, suffix ] );
 
 	const handleOnClick = useCallback(
-		( event ) => {
+		( /** @type {import('react').MouseEvent<HTMLDivElement>} */ event ) => {
 			onClick( event );
 			if ( menu?.hide && closeOnClick ) {
 				menu.hide();
+			} else {
+				onSelect( event );
 			}
 		},
-		[ closeOnClick, menu, onClick ]
+		[ closeOnClick, menu, onClick, onSelect ]
 	);
 
+	const handleOnKeyDown = useCallback(
+		(
+			/** @type {import('react').KeyboardEvent<HTMLDivElement>} */ event
+		) => {
+			onKeyDown( event );
+			switch ( event.key ) {
+				case 'Enter':
+				case 'Space':
+				case ' ':
+					onSelect( event );
+					break;
+				default:
+					break;
+			}
+		},
+		[ onSelect, onKeyDown ]
+	);
+
+	const tabIndex = tabIndexProp || ( onSelect !== noop ? 0 : undefined );
+
 	return (
 		<BaseButton
 			as={ Component }
@@ -130,11 +156,13 @@ function MenuItem( props, forwardedRef ) {
 			{ ...menu }
 			className={ classes }
 			onClick={ handleOnClick }
+			onKeyDown={ handleOnKeyDown }
 			pre={ prefixContent }
 			ref={ forwardedRef }
 			size={ size }
 			suffix={ suffixContent }
 			textAlign="left"
+			tabIndex={ tabIndex }
 		>
 			{ children }
 		</BaseButton>

packages/components/src/ui/menu/stories/index.js

@@ -20,8 +20,7 @@ const Example = () => {
 			<MenuHeader>WordPress.org</MenuHeader>
 			<MenuItem
 				isSelected={ isSelected }
-				onClick={ () => setIsSelected( ! isSelected ) }
-				onKeyDown={ () => setIsSelected( ! isSelected ) }
+				onSelect={ () => setIsSelected( ! isSelected ) }
 			>
 				Code is Poetry
 			</MenuItem>

packages/components/src/ui/menu/types.ts

@@ -3,6 +3,8 @@
  */
 // eslint-disable-next-line no-restricted-imports
 import type { MenuStateReturn } from 'reakit';
+// eslint-disable-next-line no-restricted-imports
+import type { MouseEvent, KeyboardEvent } from 'react';
 
 /**
  * Internal dependencies
@@ -13,6 +15,8 @@ export type Props = {
 	menu?: MenuStateReturn;
 };
 
+export type SelectEvent = MouseEvent | KeyboardEvent;
+
 export type MenuItemProps = BaseButtonProps & {
 	/**
 	 * Whether to close the menu when the item is clicked.
@@ -40,4 +44,8 @@ export type MenuItemProps = BaseButtonProps & {
 	 * @default false
 	 */
 	showArrow?: boolean;
+	/**
+	 * Called when the menu item is clicked or when a keyDown event happens that is either Enter or Space.
+	 */
+	onSelect?: ( event: SelectEvent ) => void;
 };