[a11y][Dataviews] Fix: Dropdown menus with only one item.

WordPress · Dec 5, 2023 · 7dca5ba · 7dca5ba
1 parent efb7099
commit 7dca5ba
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 36 deletions.
diff --git a/packages/dataviews/src/item-actions.js b/packages/dataviews/src/item-actions.js
@@ -101,6 +101,54 @@ function ActionsDropdownMenuGroup( { actions, item } ) {
 	);
 }
 
+function PrimaryActions( { primaryActions, item } ) {
+	return primaryActions.map( ( action ) => {
+		if ( !! action.RenderModal ) {
+			return (
+				<ActionWithModal
+					key={ action.id }
+					action={ action }
+					item={ item }
+					ActionTrigger={ ButtonTrigger }
+				/>
+			);
+		}
+		return (
+			<ButtonTrigger
+				key={ action.id }
+				action={ action }
+				onClick={ () => action.callback( item ) }
+			/>
+		);
+	} );
+}
+
+function SecondaryActions( { secondaryActions, item } ) {
+	// If there is only one secondary action, it should be rendered as a primary action avoid an unnecessary dropdown.
+	if ( secondaryActions.length === 1 ) {
+		return (
+			<PrimaryActions primaryActions={ secondaryActions } item={ item } />
+		);
+	}
+	return (
+		<DropdownMenu
+			trigger={
+				<Button
+					size="compact"
+					icon={ moreVertical }
+					label={ __( 'Actions' ) }
+				/>
+			}
+			placement="bottom-end"
+		>
+			<ActionsDropdownMenuGroup
+				actions={ secondaryActions }
+				item={ item }
+			/>
+		</DropdownMenu>
+	);
+}
+
 export default function ItemActions( { item, actions, isCompact } ) {
 	const { primaryActions, secondaryActions } = useMemo( () => {
 		return actions.reduce(
@@ -141,42 +189,17 @@ export default function ItemActions( { item, actions, isCompact } ) {
 				width: 'auto',
 			} }
 		>
-			{ !! primaryActions.length &&
-				primaryActions.map( ( action ) => {
-					if ( !! action.RenderModal ) {
-						return (
-							<ActionWithModal
-								key={ action.id }
-								action={ action }
-								item={ item }
-								ActionTrigger={ ButtonTrigger }
-							/>
-						);
-					}
-					return (
-						<ButtonTrigger
-							key={ action.id }
-							action={ action }
-							onClick={ () => action.callback( item ) }
-						/>
-					);
-				} ) }
+			{ !! primaryActions.length && (
+				<PrimaryActions
+					primaryActions={ primaryActions }
+					item={ item }
+				/>
+			) }
 			{ !! secondaryActions.length && (
-				<DropdownMenu
-					trigger={
-						<Button
-							size="compact"
-							icon={ moreVertical }
-							label={ __( 'Actions' ) }
-						/>
-					}
-					placement="bottom-end"
-				>
-					<ActionsDropdownMenuGroup
-						actions={ secondaryActions }
-						item={ item }
-					/>
-				</DropdownMenu>
+				<SecondaryActions
+					item={ item }
+					secondaryActions={ secondaryActions }
+				/>
 			) }
 		</HStack>
 	);

diff --git a/packages/edit-site/src/components/actions/index.js b/packages/edit-site/src/components/actions/index.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { external, trash, backup } from '@wordpress/icons';
+import { external, trash, backup, edit } from '@wordpress/icons';
 import { addQueryArgs } from '@wordpress/url';
 import { useDispatch } from '@wordpress/data';
 import { decodeEntities } from '@wordpress/html-entities';
@@ -225,6 +225,7 @@ export function useEditPostAction() {
 			isEligible( { status } ) {
 				return status !== 'trash';
 			},
+			icon: edit,
 			callback( post ) {
 				history.push( {
 					postId: post.id,