PaletteEdit: Name picker dialogs and add screen reader dismissal

packages/components/CHANGELOG.md

@@ -21,6 +21,7 @@
 
 ### Bug Fixes
 
+-   `PaletteEdit`: Name picker dialogs and add screen-reader-only dismissal controls while preserving live edits ([#84333](https://github.com/WordPress/gutenberg/pull/84333)).
 -   `Grid`: Fix the `bottomLeft` alignment, which resolved to the top right corner instead of the bottom left one ([#82641](https://github.com/WordPress/gutenberg/pull/82641)).
 -   Keep JavaScript color fallbacks in sync with the generated design tokens. ([#84569](https://github.com/WordPress/gutenberg/pull/84569))
 -   `Tabs`: Restore the `fit-content` width of horizontal tab lists, which stretched to full width after the SCSS Modules migration ([#84626](https://github.com/WordPress/gutenberg/pull/84626)).

packages/components/src/palette-edit/index.tsx

@@ -32,6 +32,7 @@ import { Heading } from '../heading';
 import { View } from '../view';
 import InputControl from '../input-control';
 import ColorIndicator from '../color-indicator';
+import { VisuallyHidden } from '../visually-hidden';
 import styles from './style.module.scss';
 import { DEFAULT_GRADIENT } from '../custom-gradient-picker/constants';
 import CustomGradientPicker from '../custom-gradient-picker';
@@ -315,6 +316,16 @@ function ColorPickerPopover< T extends PaletteElement >( {
 	popoverProps: receivedPopoverProps,
 	onClose = () => {},
 }: ColorPickerPopoverProps< T > ) {
+	const dismissButton = (
+		<VisuallyHidden
+			as="button"
+			type="button"
+			tabIndex={ -1 }
+			onClick={ onClose }
+		>
+			{ __( 'Close' ) }
+		</VisuallyHidden>
+	);
 	const popoverProps: ColorPickerPopoverProps< T >[ 'popoverProps' ] =
 		useMemo(
 			() => ( {
@@ -335,7 +346,21 @@ function ColorPickerPopover< T extends PaletteElement >( {
 		);
 
 	return (
-		<Popover { ...popoverProps } onClose={ onClose }>
+		<Popover
+			role="dialog"
+			aria-label={ sprintf(
+				// translators: %s is a color, gradient or duotone name, e.g. "Red".
+				__( 'Edit: %s' ),
+				element.name.trim().length
+					? element.name
+					: getElementValue( element, variant ) || ''
+			) }
+			{ ...popoverProps }
+			onClose={ onClose }
+		>
+			{ /* Screen reader users can dismiss from either end of the popup
+			     without adding a visible control or a keyboard Tab stop. */ }
+			{ dismissButton }
 			{ variant === 'color' && (
 				<ColorPicker
 					color={ element.color }
@@ -403,6 +428,7 @@ function ColorPickerPopover< T extends PaletteElement >( {
 					</VStack>
 				</div>
 			) }
+			{ dismissButton }
 		</Popover>
 	);
 }

packages/components/src/palette-edit/test/index.browser.test.tsx

@@ -1,13 +1,14 @@
 import { describe, expect, it, test, vi } from 'vitest';
 import { userEvent } from 'vitest/browser';
-import { screen, waitFor, within } from '@testing-library/react';
+import { act, screen, waitFor, within } from '@testing-library/react';
 import { render } from 'vitest-browser-react';
+import { useState } from '@wordpress/element';
 import PaletteEdit, {
 	getNameAndSlugForPosition,
 	deduplicateElementSlugs,
 } from '..';
 import Modal from '../../modal';
-import type { PaletteElement } from '../types';
+import type { Color, PaletteElement } from '../types';
 
 const noop = () => {};
 
@@ -256,26 +257,29 @@ describe( 'PaletteEdit', () => {
 			name: 'color',
 			props: { colors },
 			buttonName: 'Primary',
+			dialogName: 'Edit: Primary',
 			editorRole: 'textbox' as const,
 			editorName: 'Hex color',
 		},
 		{
 			name: 'gradient',
 			props: { gradients },
 			buttonName: 'Gradient: Pale ocean',
+			dialogName: 'Edit: Pale ocean',
 			editorRole: 'combobox' as const,
 			editorName: 'Type',
 		},
 		{
 			name: 'duotone',
 			props: { duotones, colorPalette: colors },
 			buttonName: 'Duotone: Purple and yellow',
+			dialogName: 'Edit: Purple and yellow',
 			editorRole: 'button' as const,
 			editorName: /Shadows/,
 		},
 	] )(
 		'shows $name swatches as named command buttons that open the editor',
-		async ( { props, buttonName, editorRole, editorName } ) => {
+		async ( { props, buttonName, dialogName, editorRole, editorName } ) => {
 			await render( <PaletteEdit { ...defaultProps } { ...props } /> );
 
 			const group = screen.getByRole( 'group', { name: 'Test label' } );
@@ -293,13 +297,95 @@ describe( 'PaletteEdit', () => {
 
 			await userEvent.click( swatch );
 			await waitFor( () => {
+				expect(
+					screen.getByRole( 'dialog', { name: dialogName } )
+				).toBeVisible();
 				expect(
 					screen.getByRole( editorRole, { name: editorName } )
 				).toBeVisible();
 			} );
 		}
 	);
 
+	it.each( [
+		{ view: 'swatches', action: 'Close' },
+		{ view: 'details', action: 'Close' },
+		{ view: 'swatches', action: 'Escape' },
+		{ view: 'details', action: 'Escape' },
+	] )(
+		'retains live edits and returns focus when dismissed with $action in $view',
+		async ( { view, action } ) => {
+			const onChange = vi.fn();
+			function ControlledPalette() {
+				const [ value, setValue ] = useState< Color[] >( colors );
+				return (
+					<PaletteEdit
+						{ ...defaultProps }
+						colors={ value }
+						onChange={ ( nextColors ) => {
+							onChange( nextColors );
+							setValue( nextColors ?? [] );
+						} }
+					/>
+				);
+			}
+			await render( <ControlledPalette /> );
+			if ( view === 'details' ) {
+				await userEvent.click(
+					screen.getByRole( 'button', { name: 'Color options' } )
+				);
+				await userEvent.click(
+					await screen.findByRole( 'menuitem', {
+						name: 'Show details',
+					} )
+				);
+			}
+			const swatch = screen.getByRole( 'button', {
+				name: view === 'details' ? 'Edit: Primary' : 'Primary',
+			} );
+			swatch.focus();
+			await userEvent.keyboard( '{Enter}' );
+			const dialog = await screen.findByRole( 'dialog', {
+				name: 'Edit: Primary',
+			} );
+			const closeButtons = within( dialog ).getAllByRole( 'button', {
+				name: 'Close',
+			} );
+			expect( closeButtons ).toHaveLength( 2 );
+			for ( const button of closeButtons ) {
+				expect( button ).toHaveAttribute( 'tabindex', '-1' );
+				const { width, height } = button.getBoundingClientRect();
+				expect( width ).toBeLessThanOrEqual( 1 );
+				expect( height ).toBeLessThanOrEqual( 1 );
+			}
+			const input = within( dialog ).getByRole( 'textbox', {
+				name: 'Hex color',
+			} );
+			await userEvent.fill( input, 'ff0000' );
+			await waitFor( () =>
+				expect( onChange ).toHaveBeenCalledWith( [
+					{ ...colors[ 0 ], color: '#ff0000' },
+					colors[ 1 ],
+				] )
+			);
+			if ( action === 'Close' ) {
+				// Activate as assistive technology does, without moving the
+				// pointer to a control that is intentionally visually hidden.
+				act( () => closeButtons[ view === 'details' ? 1 : 0 ].click() );
+			} else {
+				await userEvent.keyboard( '{Escape}' );
+			}
+			await waitFor( () => {
+				expect( dialog ).not.toBeInTheDocument();
+				expect( swatch ).toHaveFocus();
+			} );
+			await userEvent.click( swatch );
+			expect(
+				await screen.findByRole( 'textbox', { name: 'Hex color' } )
+			).toHaveValue( 'FF0000' );
+		}
+	);
+
 	it( 'tabs between command swatches and opens one with Space', async () => {
 		await render( <PaletteEdit { ...defaultProps } colors={ colors } /> );