Make save panel a dialog with proper labels, fix site editor focus loss after save

packages/edit-site/src/components/save-panel/index.js

@@ -77,11 +77,13 @@ const EntitiesSavedStatesForPreview = ( { onClose } ) => {
 	);
 };
 
-const _EntitiesSavedStates = ( { onClose } ) => {
+const _EntitiesSavedStates = ( { onClose, renderDialog = undefined } ) => {
 	if ( isPreviewingTheme() ) {
 		return <EntitiesSavedStatesForPreview onClose={ onClose } />;
 	}
-	return <EntitiesSavedStates close={ onClose } />;
+	return (
+		<EntitiesSavedStates close={ onClose } renderDialog={ renderDialog } />
+	);
 };
 
 export default function SavePanel() {
@@ -142,21 +144,23 @@ export default function SavePanel() {
 			} ) }
 			ariaLabel={ __( 'Save panel' ) }
 		>
-			{ isSaveViewOpen ? (
-				<_EntitiesSavedStates onClose={ onClose } />
-			) : (
-				<div className="edit-site-editor__toggle-save-panel">
-					<Button
-						variant="secondary"
-						className="edit-site-editor__toggle-save-panel-button"
-						onClick={ () => setIsSaveViewOpened( true ) }
-						aria-expanded={ false }
-						disabled={ disabled }
-						__experimentalIsFocusable
-					>
-						{ __( 'Open save panel' ) }
-					</Button>
-				</div>
+			<div className="edit-site-editor__toggle-save-panel">
+				<Button
+					variant="secondary"
+					className={ classnames(
+						'edit-site-editor__toggle-save-panel-button',
+						{ 'screen-reader-text': isSaveViewOpen }
+					) }
+					onClick={ () => setIsSaveViewOpened( true ) }
+					aria-haspopup={ 'dialog' }
+					disabled={ disabled }
+					__experimentalIsFocusable
+				>
+					{ __( 'Open save panel' ) }
+				</Button>
+			</div>
+			{ isSaveViewOpen && (
+				<_EntitiesSavedStates onClose={ onClose } renderDialog />
 			) }
 		</NavigableRegion>
 	);

packages/editor/src/components/entities-saved-states/index.js

@@ -11,7 +11,10 @@ import {
 } from '@wordpress/element';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
-import { __experimentalUseDialog as useDialog } from '@wordpress/compose';
+import {
+	__experimentalUseDialog as useDialog,
+	useInstanceId,
+} from '@wordpress/compose';
 import { store as noticesStore } from '@wordpress/notices';
 
 /**
@@ -31,10 +34,17 @@ function identity( values ) {
 	return values;
 }
 
-export default function EntitiesSavedStates( { close } ) {
+export default function EntitiesSavedStates( {
+	close,
+	renderDialog = undefined,
+} ) {
 	const isDirtyProps = useIsDirty();
 	return (
-		<EntitiesSavedStatesExtensible close={ close } { ...isDirtyProps } />
+		<EntitiesSavedStatesExtensible
+			close={ close }
+			renderDialog={ renderDialog }
+			{ ...isDirtyProps }
+		/>
 	);
 }
 
@@ -44,6 +54,7 @@ export function EntitiesSavedStatesExtensible( {
 	onSave = identity,
 	saveEnabled: saveEnabledProp = undefined,
 	saveLabel = __( 'Save' ),
+	renderDialog = undefined,
 
 	dirtyEntityRecords,
 	isDirty,
@@ -183,12 +194,20 @@ export function EntitiesSavedStatesExtensible( {
 	const [ saveDialogRef, saveDialogProps ] = useDialog( {
 		onClose: () => dismissPanel(),
 	} );
+	const dialogLabel = useInstanceId( EntitiesSavedStatesExtensible, 'label' );
+	const dialogDescription = useInstanceId(
+		EntitiesSavedStatesExtensible,
+		'description'
+	);
 
 	return (
 		<div
 			ref={ saveDialogRef }
 			{ ...saveDialogProps }
 			className="entities-saved-states__panel"
+			role={ renderDialog ? 'dialog' : undefined }
+			aria-labelledby={ renderDialog ? dialogLabel : undefined }
+			aria-describedby={ renderDialog ? dialogDescription : undefined }
 		>
 			<Flex className="entities-saved-states__panel-header" gap={ 2 }>
 				<FlexItem
@@ -197,6 +216,7 @@ export function EntitiesSavedStatesExtensible( {
 					ref={ saveButtonRef }
 					variant="primary"
 					disabled={ ! saveEnabled }
+					__experimentalIsFocusable
 					onClick={ saveCheckedEntities }
 					className="editor-entities-saved-states__save-button"
 				>
@@ -213,11 +233,16 @@ export function EntitiesSavedStatesExtensible( {
 			</Flex>
 
 			<div className="entities-saved-states__text-prompt">
-				<strong className="entities-saved-states__text-prompt--header">
-					{ __( 'Are you ready to save?' ) }
-				</strong>
-				{ additionalPrompt }
-				<p>
+				<div
+					className="entities-saved-states__text-prompt--header-wrapper"
+					id={ renderDialog ? dialogLabel : undefined }
+				>
+					<strong className="entities-saved-states__text-prompt--header">
+						{ __( 'Are you ready to save?' ) }
+					</strong>
+					{ additionalPrompt }
+				</div>
+				<p id={ renderDialog ? dialogDescription : undefined }>
 					{ isDirty
 						? createInterpolateElement(
 								sprintf(

test/e2e/specs/site-editor/multi-entity-saving.spec.js

@@ -51,6 +51,13 @@
 				.getByRole( 'region', { name: 'Editor top bar' } )
 				.getByRole( 'button', { name: 'Saved' } )
 		).toBeDisabled();
+
+		// Check focus returns to Open save panel button.
+		await expect(
+			page
+				.getByRole( 'region', { name: 'Save panel' } )
+				.getByRole( 'button', { name: 'Open save panel' } )
+		).toBeFocused();
 	} );
 
 	test( 'save flow should allow re-saving after changing the same block attribute', async ( {