Shadows: Improve accessibility of shadows dropdown (WordPress#58828)

* Improve accebility of shadows dropdown

* fix mobile unit tests by moving privateApis unlock inside components

packages/block-editor/src/components/global-styles/shadow-panel-components.js

@@ -5,19 +5,25 @@ import { __ } from '@wordpress/i18n';
 import {
 	__experimentalVStack as VStack,
 	__experimentalHeading as Heading,
-	__experimentalGrid as Grid,
 	__experimentalHStack as HStack,
 	__experimentalDropdownContentWrapper as DropdownContentWrapper,
 	Button,
 	FlexItem,
 	Dropdown,
+	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import { shadow as shadowIcon, Icon, check } from '@wordpress/icons';
+
 /**
  * External dependencies
  */
 import classNames from 'classnames';
 
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
 export function ShadowPopoverContainer( { shadow, onShadowChange, settings } ) {
 	const defaultShadows = settings?.shadow?.presets?.default || [];
 	const themeShadows = settings?.shadow?.presets?.theme || [];
@@ -43,8 +49,16 @@ export function ShadowPopoverContainer( { shadow, onShadowChange, settings } ) {
 }
 
 export function ShadowPresets( { presets, activeShadow, onSelect } ) {
+	const { CompositeV2: Composite, useCompositeStoreV2: useCompositeStore } =
+		unlock( componentsPrivateApis );
+	const compositeStore = useCompositeStore();
 	return ! presets ? null : (
-		<Grid columns={ 6 } gap={ 0 } align="center" justify="center">
+		<Composite
+			store={ compositeStore }
+			role="listbox"
+			className="block-editor-global-styles__shadow__list"
+			aria-label={ __( 'Drop shadows' ) }
+		>
 			{ presets.map( ( { name, slug, shadow } ) => (
 				<ShadowIndicator
 					key={ slug }
@@ -56,23 +70,35 @@ export function ShadowPresets( { presets, activeShadow, onSelect } ) {
 					shadow={ shadow }
 				/>
 			) ) }
-		</Grid>
+		</Composite>
 	);
 }
 
 export function ShadowIndicator( { label, isActive, onSelect, shadow } ) {
+	const { CompositeItemV2: CompositeItem } = unlock( componentsPrivateApis );
 	return (
-		<div className="block-editor-global-styles__shadow-indicator-wrapper">
-			<Button
-				className="block-editor-global-styles__shadow-indicator"
-				onClick={ onSelect }
-				label={ label }
-				style={ { boxShadow: shadow } }
-				showTooltip
-			>
-				{ isActive && <Icon icon={ check } /> }
-			</Button>
-		</div>
+		<CompositeItem
+			role="option"
+			aria-label={ label }
+			aria-selected={ isActive }
+			className={ classNames(
+				'block-editor-global-styles__shadow__item',
+				{
+					'is-active': isActive,
+				}
+			) }
+			render={
+				<Button
+					className="block-editor-global-styles__shadow-indicator"
+					onClick={ onSelect }
+					label={ label }
+					style={ { boxShadow: shadow } }
+					showTooltip
+				>
+					{ isActive && <Icon icon={ check } /> }
+				</Button>
+			}
+		/>
 	);
 }
 

packages/block-editor/src/components/global-styles/style.scss

@@ -21,24 +21,31 @@
 	}
 }
 
-// wrapper to clip the shadow beyond 6px
-.block-editor-global-styles__shadow-indicator-wrapper {
-	padding: $grid-unit-15 * 0.5;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
-
 // These styles are similar to the color palette.
 .block-editor-global-styles__shadow-indicator {
 	color: $gray-800;
 	border: $gray-200 $border-width solid;
 	border-radius: $radius-block-ui;
 	cursor: pointer;
 	padding: 0;
+	margin-right: $grid-unit-15;
+	margin-bottom: $grid-unit-15;
+
+	height: $button-size-small + 2 * $border-width;
+	width: $button-size-small + 2 * $border-width;
+	box-sizing: border-box;
+
+	transform: scale(1);
+	transition: transform 0.1s ease;
+	will-change: transform;
 
-	height: $button-size-small;
-	width: $button-size-small;
+	&:focus {
+		border: #{ $border-width * 2 } solid $gray-700;
+	}
+
+	&:hover {
+		transform: scale(1.2);
+	}
 }
 
 .block-editor-global-styles-advanced-panel__custom-css-input textarea {