Restore Button in post save button

WordPress · Dec 19, 2023 · 9964405 · 9964405
1 parent 4663906
commit 9964405
Showing 1 changed file with 30 additions and 46 deletions.
diff --git a/packages/editor/src/components/post-saved-state/index.js b/packages/editor/src/components/post-saved-state/index.js
@@ -129,54 +129,38 @@ export default function PostSavedState( {
 		text = shortLabel;
 	}
 
-	const buttonAccessibleLabel = text || label;
-
-	/**
-	 * The tooltip needs to be enabled only if the button is not disabled. When
-	 * relying on the internal Button tooltip functionality, this causes the
-	 * resulting `button` element to be always removed and re-added to the DOM,
-	 * causing focus loss. An alternative approach to circumvent the issue
-	 * is not to use the `label` and `shortcut` props on `Button` (which would
-	 * trigger the tooltip), and instead manually wrap the `Button` in a separate
-	 * `Tooltip` component.
-	 */
-	const tooltipProps = isDisabled
-		? undefined
-		: {
-				text: buttonAccessibleLabel,
-				shortcut: displayShortcut.primary( 's' ),
-		  };
-
 	// Use common Button instance for all saved states so that focus is not
 	// lost.
 	return (
-		<Tooltip { ...tooltipProps }>
-			<Button
-				className={
-					isSaveable || isSaving
-						? classnames( {
-								'editor-post-save-draft': ! isSavedState,
-								'editor-post-saved-state': isSavedState,
-								'is-saving': isSaving,
-								'is-autosaving': isAutosaving,
-								'is-saved': isSaved,
-								[ getAnimateClassName( {
-									type: 'loading',
-								} ) ]: isSaving,
-						  } )
-						: undefined
-				}
-				onClick={ isDisabled ? undefined : () => savePost() }
-				variant="tertiary"
-				size="compact"
-				icon={ isLargeViewport ? undefined : cloudUpload }
-				// Make sure the aria-label has always a value, as the default `text` is undefined on small screens.
-				aria-label={ buttonAccessibleLabel }
-				aria-disabled={ isDisabled }
-			>
-				{ isSavedState && <Icon icon={ isSaved ? check : cloud } /> }
-				{ text }
-			</Button>
-		</Tooltip>
+		<Button
+			className={
+				isSaveable || isSaving
+					? classnames( {
+							'editor-post-save-draft': ! isSavedState,
+							'editor-post-saved-state': isSavedState,
+							'is-saving': isSaving,
+							'is-autosaving': isAutosaving,
+							'is-saved': isSaved,
+							[ getAnimateClassName( {
+								type: 'loading',
+							} ) ]: isSaving,
+					  } )
+					: undefined
+			}
+			onClick={ isDisabled ? undefined : () => savePost() }
+			/*
+			 * We want the tooltip to show the keyboard shortcut only when the
+			 * button does something, i.e. when it's not disabled.
+			 */
+			shortcut={ isDisabled ? undefined : displayShortcut.primary( 's' ) }
+			variant="tertiary"
+			size="compact"
+			icon={ isLargeViewport ? undefined : cloudUpload }
+			label={ text || label }
+			aria-disabled={ isDisabled }
+		>
+			{ isSavedState && <Icon icon={ isSaved ? check : cloud } /> }
+			{ text }
+		</Button>
 	);
 }