Style Book: Focus the Style Book when opened, and enable ESCAPE key t…

…o close (#48151)

* Style Book: Focus the Style Book when opened, and enable ESCAPE key to close Style Book

* Add e2e test for Escape key

* Combine e2e tests

* Store style book locator in a const and reuse

packages/edit-site/src/components/style-book/index.js

@@ -24,8 +24,14 @@ import {
 	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 import { closeSmall } from '@wordpress/icons';
-import { useResizeObserver } from '@wordpress/compose';
+import {
+	useResizeObserver,
+	useFocusOnMount,
+	useFocusReturn,
+	useMergeRefs,
+} from '@wordpress/compose';
 import { useMemo, memo } from '@wordpress/element';
+import { ESCAPE } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
@@ -90,6 +96,9 @@ function getExamples() {
 
 function StyleBook( { isSelected, onSelect, onClose } ) {
 	const [ resizeObserver, sizes ] = useResizeObserver();
+	const focusOnMountRef = useFocusOnMount( 'firstElement' );
+	const sectionFocusReturnRef = useFocusReturn();
+
 	const [ textColor ] = useGlobalStyle( 'color.text' );
 	const [ backgroundColor ] = useGlobalStyle( 'color.background' );
 	const examples = useMemo( getExamples, [] );
@@ -108,8 +117,17 @@ function StyleBook( { isSelected, onSelect, onClose } ) {
 				} ) ),
 		[ examples ]
 	);
+
+	function closeOnEscape( event ) {
+		if ( event.keyCode === ESCAPE && ! event.defaultPrevented ) {
+			event.preventDefault();
+			onClose();
+		}
+	}
+
 	return (
 		<StyleBookFill>
+			{ /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ }
 			<section
 				className={ classnames( 'edit-site-style-book', {
 					'is-wide': sizes.width > 600,
@@ -119,13 +137,19 @@ function StyleBook( { isSelected, onSelect, onClose } ) {
 					background: backgroundColor,
 				} }
 				aria-label={ __( 'Style Book' ) }
+				onKeyDown={ closeOnEscape }
+				ref={ useMergeRefs( [
+					sectionFocusReturnRef,
+					focusOnMountRef,
+				] ) }
 			>
 				{ resizeObserver }
 				<Button
 					className="edit-site-style-book__close-button"
 					icon={ closeSmall }
 					label={ __( 'Close Style Book' ) }
 					onClick={ onClose }
+					showTooltip={ false }
 				/>
 				<TabPanel
 					className="edit-site-style-book__tab-panel"

test/e2e/specs/site-editor/style-book.spec.js

@@ -117,13 +117,35 @@ test.describe( 'Style Book', () => {
 		).toBeVisible();
 	} );
 
-	test( 'should disappear when closed', async ( { page } ) => {
-		await page.click(
-			'role=region[name="Style Book"i] >> role=button[name="Close Style Book"i]'
-		);
+	test( 'should disappear when closed via click event or Escape key', async ( {
+		page,
+	} ) => {
+		const styleBookRegion = page.getByRole( 'region', {
+			name: 'Style Book',
+		} );
+
+		// Close Style Book via click event.
+		await styleBookRegion
+			.getByRole( 'button', { name: 'Close Style Book' } )
+			.click();
 
 		await expect(
-			page.locator( 'role=region[name="Style Book"i]' )
+			styleBookRegion,
+			'should close when close button is clicked'
+		).not.toBeVisible();
+
+		// Open Style Book again.
+		await page.getByRole( 'button', { name: 'Style Book' } ).click();
+		await expect(
+			styleBookRegion,
+			'style book should be visible'
+		).toBeVisible();
+
+		// Close Style Book via Escape key.
+		await page.keyboard.press( 'Escape' );
+		await expect(
+			styleBookRegion,
+			'should close when Escape key is pressed'
 		).not.toBeVisible();
 	} );
 } );