From 08146086b749b967b49a3485e50a8ddf82d89263 Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Tue, 13 Jul 2021 13:44:02 +0800
Subject: [PATCH] Fix search block button position dropdown accessibility/UX
 issues. (#33376)

* Fix search block using non-accessible toolbar dropdown

* Fix more accessibility issues
---
 packages/block-library/src/search/edit.js | 84 +++++++++++------------
 1 file changed, 40 insertions(+), 44 deletions(-)

diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js
index 1cc7484502571e..e279fcb0ad002b 100644
--- a/packages/block-library/src/search/edit.js
+++ b/packages/block-library/src/search/edit.js
@@ -15,9 +15,7 @@ import {
 	__experimentalUnitControl as UnitControl,
 } from '@wordpress/block-editor';
 import {
-	DropdownMenu,
-	MenuGroup,
-	MenuItem,
+	ToolbarDropdownMenu,
 	ToolbarGroup,
 	Button,
 	ButtonGroup,
@@ -115,6 +113,42 @@ export default function SearchEdit( {
 		);
 	};
 
+	const buttonPositionControls = [
+		{
+			role: 'menuitemradio',
+			title: __( 'Button outside' ),
+			isActive: buttonPosition === 'button-outside',
+			icon: buttonOutside,
+			onClick: () => {
+				setAttributes( {
+					buttonPosition: 'button-outside',
+				} );
+			},
+		},
+		{
+			role: 'menuitemradio',
+			title: __( 'Button inside' ),
+			isActive: buttonPosition === 'button-inside',
+			icon: buttonInside,
+			onClick: () => {
+				setAttributes( {
+					buttonPosition: 'button-inside',
+				} );
+			},
+		},
+		{
+			role: 'menuitemradio',
+			title: __( 'No button' ),
+			isActive: buttonPosition === 'no-button',
+			icon: noButton,
+			onClick: () => {
+				setAttributes( {
+					buttonPosition: 'no-button',
+				} );
+			},
+		},
+	];
+
 	const getButtonPositionIcon = () => {
 		switch ( buttonPosition ) {
 			case 'button-inside':
@@ -201,49 +235,11 @@ export default function SearchEdit( {
 						} }
 						className={ showLabel ? 'is-pressed' : undefined }
 					/>
-					<DropdownMenu
+					<ToolbarDropdownMenu
 						icon={ getButtonPositionIcon() }
 						label={ __( 'Change button position' ) }
-					>
-						{ ( { onClose } ) => (
-							<MenuGroup className="wp-block-search__button-position-menu">
-								<MenuItem
-									icon={ noButton }
-									onClick={ () => {
-										setAttributes( {
-											buttonPosition: 'no-button',
-										} );
-										onClose();
-									} }
-								>
-									{ __( 'No Button' ) }
-								</MenuItem>
-								<MenuItem
-									icon={ buttonOutside }
-									onClick={ () => {
-										setAttributes( {
-											buttonPosition: 'button-outside',
-										} );
-										onClose();
-									} }
-								>
-									{ __( 'Button Outside' ) }
-								</MenuItem>
-								<MenuItem
-									icon={ buttonInside }
-									onClick={ () => {
-										setAttributes( {
-											buttonPosition: 'button-inside',
-										} );
-										onClose();
-									} }
-								>
-									{ __( 'Button Inside' ) }
-								</MenuItem>
-							</MenuGroup>
-						) }
-					</DropdownMenu>
-
+						controls={ buttonPositionControls }
+					/>
 					{ 'no-button' !== buttonPosition && (
 						<ToolbarButton
 							title={ __( 'Use button with icon' ) }