Fix: accessibility issue of device preview options (#63958)

* Fix: accessibility issue of menugroup

* update: aria label when device type is selected

* update: menuItem to MenuItemChoice

* feature: added speak on device selection

----

Co-authored-by: up1512001 <up1512001@git.wordpress.org>
Co-authored-by: talldan <talldanwp@git.wordpress.org>
Co-authored-by: joedolson <joedolson@git.wordpress.org>
Co-authored-by: jeryj <jeryj@git.wordpress.org>

packages/editor/src/components/preview-dropdown/index.js

@@ -6,11 +6,12 @@ import {
 	DropdownMenu,
 	MenuGroup,
 	MenuItem,
+	MenuItemsChoice,
 	VisuallyHidden,
 	Icon,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { check, desktop, mobile, tablet, external } from '@wordpress/icons';
+import { desktop, mobile, tablet, external } from '@wordpress/icons';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as preferencesStore } from '@wordpress/preferences';
@@ -20,6 +21,7 @@ import { store as preferencesStore } from '@wordpress/preferences';
  */
 import { store as editorStore } from '../../store';
 import PostPreviewButton from '../post-preview-button';
+import { speak } from '@wordpress/a11y';
 
 export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 	const { deviceType, homeUrl, isTemplate, isViewable, showIconLabels } =
@@ -62,6 +64,61 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 		desktop,
 	};
 
+	/**
+	 * The choices for the device type.
+	 *
+	 * @type {Array}
+	 */
+	const choices = [
+		{
+			value: 'Desktop',
+			label: __( 'Desktop' ),
+			icon: desktop,
+		},
+		{
+			value: 'Tablet',
+			label: __( 'Tablet' ),
+			icon: tablet,
+		},
+		{
+			value: 'Mobile',
+			label: __( 'Mobile' ),
+			icon: mobile,
+		},
+	];
+
+	/**
+	 * The selected choice.
+	 *
+	 * @type {Object}
+	 */
+	let selectedChoice = choices.find(
+		( choice ) => choice.value === deviceType
+	);
+
+	/**
+	 * If no selected choice is found, default to the first
+	 */
+	if ( ! selectedChoice ) {
+		selectedChoice = choices[ 0 ];
+	}
+
+	/**
+	 * Handles the selection of a device type.
+	 *
+	 * @param {string} value The device type.
+	 */
+	const onSelect = ( value ) => {
+		setDeviceType( value );
+		if ( value === 'Desktop' ) {
+			speak( __( 'Desktop selected' ), 'assertive' );
+		} else if ( value === 'Tablet' ) {
+			speak( __( 'Tablet selected' ), 'assertive' );
+		} else {
+			speak( __( 'Mobile selected' ), 'assertive' );
+		}
+	};
+
 	return (
 		<DropdownMenu
 			className="editor-preview-dropdown"
@@ -75,24 +132,11 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 			{ ( { onClose } ) => (
 				<>
 					<MenuGroup>
-						<MenuItem
-							onClick={ () => setDeviceType( 'Desktop' ) }
-							icon={ deviceType === 'Desktop' && check }
-						>
-							{ __( 'Desktop' ) }
-						</MenuItem>
-						<MenuItem
-							onClick={ () => setDeviceType( 'Tablet' ) }
-							icon={ deviceType === 'Tablet' && check }
-						>
-							{ __( 'Tablet' ) }
-						</MenuItem>
-						<MenuItem
-							onClick={ () => setDeviceType( 'Mobile' ) }
-							icon={ deviceType === 'Mobile' && check }
-						>
-							{ __( 'Mobile' ) }
-						</MenuItem>
+						<MenuItemsChoice
+							choices={ choices }
+							value={ selectedChoice.value }
+							onSelect={ onSelect }
+						/>
 					</MenuGroup>
 					{ isTemplate && (
 						<MenuGroup>
@@ -118,6 +162,7 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 								className="editor-preview-dropdown__button-external"
 								role="menuitem"
 								forceIsAutosaveable={ forceIsAutosaveable }
+								aria-label={ __( 'Preview in new tab' ) }
 								textContent={
 									<>
 										{ __( 'Preview in new tab' ) }