Fix EntitiesSavedStates panel dialog props.

WordPress · Dec 2, 2024 · d382287 · d382287
1 parent d251f75
commit d382287
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 14 deletions.
diff --git a/packages/edit-site/src/components/save-panel/index.js b/packages/edit-site/src/components/save-panel/index.js
@@ -31,7 +31,7 @@ const { EntitiesSavedStatesExtensible, NavigableRegion } =
 	unlock( privateApis );
 const { useLocation } = unlock( routerPrivateApis );
 
-const EntitiesSavedStatesForPreview = ( { onClose } ) => {
+const EntitiesSavedStatesForPreview = ( { onClose, renderDialog = false } ) => {
 	const isDirtyProps = useEntitiesSavedStatesIsDirty();
 	let activateSaveLabel;
 	if ( isDirtyProps.isDirty ) {
@@ -75,14 +75,20 @@ const EntitiesSavedStatesForPreview = ( { onClose } ) => {
 				onSave,
 				saveEnabled: true,
 				saveLabel: activateSaveLabel,
+				renderDialog,
 			} }
 		/>
 	);
 };
 
-const _EntitiesSavedStates = ( { onClose, renderDialog = undefined } ) => {
+const _EntitiesSavedStates = ( { onClose, renderDialog = false } ) => {
 	if ( isPreviewingTheme() ) {
-		return <EntitiesSavedStatesForPreview onClose={ onClose } />;
+		return (
+			<EntitiesSavedStatesForPreview
+				onClose={ onClose }
+				renderDialog={ renderDialog }
+			/>
+		);
 	}
 	return (
 		<EntitiesSavedStates close={ onClose } renderDialog={ renderDialog } />

diff --git a/packages/editor/README.md b/packages/editor/README.md
@@ -401,7 +401,7 @@ _Parameters_
 
 -   _props_ `Object`: The component props.
 -   _props.close_ `Function`: The function to close the dialog.
--   _props.renderDialog_ `Function`: The function to render the dialog.
+-   _props.renderDialog_ `boolean`: Whether to render the component with modal dialog behavior.
 
 _Returns_
 

diff --git a/packages/editor/src/components/entities-saved-states/index.js b/packages/editor/src/components/entities-saved-states/index.js
@@ -31,14 +31,11 @@ function identity( values ) {
  *
  * @param {Object}   props              The component props.
  * @param {Function} props.close        The function to close the dialog.
- * @param {Function} props.renderDialog The function to render the dialog.
+ * @param {boolean}  props.renderDialog Whether to render the component with modal dialog behavior.
  *
  * @return {React.ReactNode} The rendered component.
  */
-export default function EntitiesSavedStates( {
-	close,
-	renderDialog = undefined,
-} ) {
+export default function EntitiesSavedStates( { close, renderDialog = false } ) {
 	const isDirtyProps = useIsDirty();
 	return (
 		<EntitiesSavedStatesExtensible
@@ -58,7 +55,7 @@ export default function EntitiesSavedStates( {
  * @param {Function} props.onSave                Function to call when saving entities.
  * @param {boolean}  props.saveEnabled           Flag indicating if save is enabled.
  * @param {string}   props.saveLabel             Label for the save button.
- * @param {Function} props.renderDialog          Function to render a custom dialog.
+ * @param {boolean}  props.renderDialog          Whether to render the component with modal dialog behavior.
  * @param {Array}    props.dirtyEntityRecords    Array of dirty entity records.
  * @param {boolean}  props.isDirty               Flag indicating if there are dirty entities.
  * @param {Function} props.setUnselectedEntities Function to set unselected entities.
@@ -72,7 +69,7 @@ export function EntitiesSavedStatesExtensible( {
 	onSave = identity,
 	saveEnabled: saveEnabledProp = undefined,
 	saveLabel = __( 'Save' ),
-	renderDialog = undefined,
+	renderDialog = false,
 	dirtyEntityRecords,
 	isDirty,
 	setUnselectedEntities,
@@ -120,8 +117,8 @@ export function EntitiesSavedStatesExtensible( {
 
 	return (
 		<div
-			ref={ saveDialogRef }
-			{ ...saveDialogProps }
+			ref={ renderDialog ? saveDialogRef : undefined }
+			{ ...( renderDialog && saveDialogProps ) }
 			className="entities-saved-states__panel"
 			role={ renderDialog ? 'dialog' : undefined }
 			aria-labelledby={ renderDialog ? dialogLabel : undefined }

diff --git a/packages/editor/src/components/post-publish-button/index.js b/packages/editor/src/components/post-publish-button/index.js
@@ -151,6 +151,7 @@ export class PostPublishButton extends Component {
 			isBusy: ! isAutoSaving && isSaving,
 			variant: 'primary',
 			onClick: this.createOnClick( onClickButton ),
+			'aria-haspopup': hasNonPostEntityChanges ? 'dialog' : undefined,
 		};
 
 		const toggleProps = {
@@ -161,6 +162,7 @@ export class PostPublishButton extends Component {
 			variant: 'primary',
 			size: 'compact',
 			onClick: this.createOnClick( onClickToggle ),
+			'aria-haspopup': hasNonPostEntityChanges ? 'dialog' : undefined,
 		};
 		const componentProps = isToggle ? toggleProps : buttonProps;
 		return (

diff --git a/packages/editor/src/components/save-publish-panels/index.js b/packages/editor/src/components/save-publish-panels/index.js
@@ -88,6 +88,7 @@ export default function SavePublishPanels( {
 					variant="secondary"
 					onClick={ openEntitiesSavedStates }
 					aria-expanded={ false }
+					aria-haspopup="dialog"
 					disabled={ ! isDirty }
 					accessibleWhenDisabled
 				>
@@ -102,7 +103,10 @@ export default function SavePublishPanels( {
 	return (
 		<>
 			{ isEntitiesSavedStatesOpen && (
-				<EntitiesSavedStates close={ closeEntitiesSavedStates } />
+				<EntitiesSavedStates
+					close={ closeEntitiesSavedStates }
+					renderDialog
+				/>
 			) }
 			<Slot bubblesVirtually />
 			{ ! isEntitiesSavedStatesOpen && unmountableContent }