Make the Settings panel toggle button show its keyboard shortcut in i…

…ts tooltip (#65322)

* Make the Settings panel toggle button show its keyboard shortcut in its tooltip.

* Do not pass shortcut prop to PluginSidebar and simplify.

Co-authored-by: afercia <afercia@git.wordpress.org>
Co-authored-by: youknowriad <youknowriad@git.wordpress.org>

packages/editor/src/components/plugin-sidebar/index.js

@@ -3,7 +3,6 @@
  */
 import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
-import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 import { ComplementaryArea } from '@wordpress/interface';
 
 /**
@@ -77,12 +76,9 @@ import { store as editorStore } from '../../store';
  * ```
  */
 export default function PluginSidebar( { className, ...props } ) {
-	const { postTitle, shortcut } = useSelect( ( select ) => {
+	const { postTitle } = useSelect( ( select ) => {
 		return {
 			postTitle: select( editorStore ).getEditedPostAttribute( 'title' ),
-			shortcut: select(
-				keyboardShortcutsStore
-			).getShortcutRepresentation( 'core/editor/toggle-sidebar' ),
 		};
 	}, [] );
 	return (
@@ -91,7 +87,6 @@ export default function PluginSidebar( { className, ...props } ) {
 			className="editor-sidebar"
 			smallScreenTitle={ postTitle || __( '(no title)' ) }
 			scope="core"
-			toggleShortcut={ shortcut }
 			{ ...props }
 		/>
 	);

packages/interface/src/components/complementary-area-toggle/index.js

@@ -17,6 +17,7 @@ function ComplementaryAreaToggle( {
 	icon,
 	selectedIcon,
 	name,
+	shortcut,
 	...props
 } ) {
 	const ComponentToUse = as;
@@ -26,8 +27,10 @@ function ComplementaryAreaToggle( {
 			identifier,
 		[ identifier, scope ]
 	);
+
 	const { enableComplementaryArea, disableComplementaryArea } =
 		useDispatch( interfaceStore );
+
 	return (
 		<ComponentToUse
 			icon={ selectedIcon && isSelected ? selectedIcon : icon }
@@ -39,6 +42,7 @@ function ComplementaryAreaToggle( {
 					enableComplementaryArea( scope, identifier );
 				}
 			} }
+			shortcut={ shortcut }
 			{ ...props }
 		/>
 	);

packages/interface/src/components/complementary-area/index.js

@@ -275,6 +275,7 @@ function ComplementaryArea( {
 							showTooltip={ ! showIconLabels }
 							variant={ showIconLabels ? 'tertiary' : undefined }
 							size="compact"
+							shortcut={ toggleShortcut }
 						/>
 					) }
 				</PinnedItems>