Fix the Save buttons labelling and tooltip (#43952)

* Fix PostSavedState button labelling and tooltip.

* Use isDisabled instead of isSavedState.

* Show tooltip and shortcut for the Site editor Save button.

* Update snapshot.

* Fix aria-label and update snapshot.

* Make the tooltip always show.

* Apply show tooltip fix to the Site editor Save button.

packages/edit-post/src/components/header/style.scss

@@ -146,16 +146,11 @@
 		}
 	}
 
-	// The post saved state button has a custom label only on small breakpoint
-	.editor-post-save-draft.editor-post-save-draft {
+	.editor-post-save-draft.editor-post-save-draft,
+	.editor-post-saved-state.editor-post-saved-state {
 		&::after {
 			content: none;
 		}
-		@include break-small {
-			&::after {
-				content: attr(aria-label);
-			}
-		}
 	}
 }
 

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

@@ -5,6 +5,7 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { store as coreStore } from '@wordpress/core-data';
+import { displayShortcut } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
@@ -29,6 +30,8 @@ export default function SaveButton() {
 
 	const disabled = ! isDirty || isSaving;
 
+	const label = __( 'Save' );
+
 	return (
 		<Button
 			variant="primary"
@@ -37,8 +40,21 @@ export default function SaveButton() {
 			aria-expanded={ isSaveViewOpen }
 			isBusy={ isSaving }
 			onClick={ disabled ? undefined : () => setIsSaveViewOpened( true ) }
+			label={ label }
+			/*
+			 * We want the tooltip to show the keyboard shortcut only when the
+			 * button does something, i.e. when it's not disabled.
+			 */
+			shortcut={ disabled ? undefined : displayShortcut.primary( 's' ) }
+			/*
+			 * Displaying the keyboard shortcut conditionally makes the tooltip
+			 * itself show conditionally. This would trigger a full-rerendering
+			 * of the button that we want to avoid. By setting `showTooltip`,
+			 & the tooltip is always rendered even when there's no keyboard shortcut.
+			 */
+			showTooltip
 		>
-			{ __( 'Save' ) }
+			{ label }
 		</Button>
 	);
 }

packages/editor/src/components/post-saved-state/index.js

@@ -151,10 +151,22 @@ export default function PostSavedState( {
 					: undefined
 			}
 			onClick={ isDisabled ? undefined : () => savePost() }
-			shortcut={ displayShortcut.primary( 's' ) }
-			variant={ isLargeViewport ? 'tertiary' : undefined }
+			/*
+			 * 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' ) }
+			/*
+			 * Displaying the keyboard shortcut conditionally makes the tooltip
+			 * itself show conditionally. This would trigger a full-rerendering
+			 * of the button that we want to avoid. By setting `showTooltip`,
+			 & the tooltip is always rendered even when there's no keyboard shortcut.
+			 */
+			showTooltip
+			variant="tertiary"
 			icon={ isLargeViewport ? undefined : cloudUpload }
-			label={ showIconLabels ? undefined : label }
+			// Make sure the aria-label has always a value, as the default `text` is undefined on small screens.
+			label={ text || label }
 			aria-disabled={ isDisabled }
 		>
 			{ isSavedState && <Icon icon={ isSaved ? check : cloud } /> }

packages/editor/src/components/post-saved-state/test/__snapshots__/index.js.snap

@@ -4,7 +4,7 @@ exports[`PostSavedState returns a disabled button if the post is not saveable 1`
 <button
   aria-disabled="true"
   aria-label="Save draft"
-  class="components-button has-icon"
+  class="components-button is-tertiary has-icon"
   type="button"
 >
   <svg