Keycodes: Add a shared keyboard shortcut representation helper

docs/reference-guides/data/data-core-keyboard-shortcuts.md

@@ -153,6 +153,47 @@ _Returns_
 
 -   `string[]`: Shortcut names.
 
+### getKeyboardShortcut
+
+Returns the three values used to display and describe the main key combination of a registered shortcut: its display string, its `aria-keyshortcuts` value and its plain-text label. Returns `null` when no shortcut is registered under the name.
+
+The raw representation and aliases are not included; use `getShortcutRepresentation` and `getShortcutAliases` for those.
+
+The returned object can be passed to the `shortcut` prop of the `@wordpress/ui` components.
+
+_Usage_
+
+```js
+import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
+import { useSelect } from '@wordpress/data';
+import { Menu } from '@wordpress/ui';
+
+const ExampleComponent = () => {
+	const shortcut = useSelect(
+		( select ) =>
+			select( keyboardShortcutsStore ).getKeyboardShortcut(
+				'core/editor/next-region'
+			),
+		[]
+	);
+
+	return (
+		<Menu.Item shortcut={ shortcut ?? undefined }>
+			<Menu.ItemLabel>Next region</Menu.ItemLabel>
+		</Menu.Item>
+	);
+};
+```
+
+_Parameters_
+
+-   _state_ `Object`: Global state.
+-   _name_ `string`: Shortcut name.
+
+_Returns_
+
+-   `WPKeyboardShortcut?`: Shortcut display values.
+
 ### getShortcutAliases
 
 Returns the aliases for a given shortcut name.

packages/edit-post/src/components/more-menu/index.jsx

@@ -1,11 +1,7 @@
 import { __ } from '@wordpress/i18n';
 import { useViewportMatch } from '@wordpress/compose';
 import { privateApis as editorPrivateApis } from '@wordpress/editor';
-import {
-	ariaKeyShortcut,
-	displayShortcut,
-	shortcutAriaLabel,
-} from '@wordpress/keycodes';
+import { keyboardShortcut } from '@wordpress/keycodes';
 import { unlock } from '../../lock-unlock';
 import ManagePatternsMenuItem from './manage-patterns-menu-item';
 import WelcomeGuideMenuItem from './welcome-guide-menu-item';
@@ -14,12 +10,6 @@ import EditPostPreferencesModal from '../preferences-modal';
 const { MoreMenuPreferenceItem, ToolsMoreMenuGroup, ViewMoreMenuGroup } =
 	unlock( editorPrivateApis );
 
-const FULLSCREEN_SHORTCUT = {
-	ariaKeyShortcut: ariaKeyShortcut.secondary( 'f' ),
-	displayShortcut: displayShortcut.secondary( 'f' ),
-	label: shortcutAriaLabel.secondary( 'f' ),
-};
-
 const MoreMenu = () => {
 	const isLargeViewport = useViewportMatch( 'large' );
 
@@ -36,7 +26,7 @@ const MoreMenu = () => {
 						messageDeactivated={ __(
 							'Fullscreen mode deactivated.'
 						) }
-						shortcut={ FULLSCREEN_SHORTCUT }
+						shortcut={ keyboardShortcut.secondary( 'f' ) }
 					/>
 				</ViewMoreMenuGroup>
 			) }

packages/editor/src/components/mode-switcher/index.jsx

@@ -4,7 +4,6 @@ import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 // eslint-disable-next-line @wordpress/use-recommended-components
 import { Menu } from '@wordpress/ui';
 import { store as editorStore } from '../../store';
-import { getKeyboardShortcut } from '../../utils/keyboard-shortcut';
 
 /**
  * Set of available mode options.
@@ -23,12 +22,12 @@ const MODES = [
 ];
 
 function ModeSwitcher() {
-	const { keyCombination, isRichEditingEnabled, isCodeEditingEnabled, mode } =
+	const { shortcut, isRichEditingEnabled, isCodeEditingEnabled, mode } =
 		useSelect(
 			( select ) => ( {
-				keyCombination: select(
-					keyboardShortcutsStore
-				).getShortcutKeyCombination( 'core/editor/toggle-mode' ),
+				shortcut: select( keyboardShortcutsStore ).getKeyboardShortcut(
+					'core/editor/toggle-mode'
+				),
 				isRichEditingEnabled:
 					select( editorStore ).getEditorSettings()
 						.richEditingEnabled,
@@ -49,7 +48,6 @@ function ModeSwitcher() {
 		selectedMode = 'visual';
 	}
 
-	const shortcut = getKeyboardShortcut( keyCombination );
 	const choices = MODES.map( ( choice ) => {
 		if ( ! isCodeEditingEnabled && choice.value === 'text' ) {
 			choice = {

packages/editor/src/components/more-menu/index.jsx

@@ -4,6 +4,7 @@ import { Button } from '@wordpress/components';
 import { moreVertical } from '@wordpress/icons';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { store as interfaceStore, ActionItem } from '@wordpress/interface';
+import { keyboardShortcut } from '@wordpress/keycodes';
 // eslint-disable-next-line @wordpress/use-recommended-components
 import { Menu } from '@wordpress/ui';
 import CopyContentMenuItem from './copy-content-menu-item';
@@ -14,16 +15,6 @@ import MoreMenuPreferenceItem from './more-menu-preference-item';
 import ToolsMoreMenuGroup from './tools-more-menu-group';
 import ViewMoreMenuGroup from './view-more-menu-group';
 import { store as editorStore } from '../../store';
-import { getKeyboardShortcut } from '../../utils/keyboard-shortcut';
-
-const DISTRACTION_FREE_SHORTCUT = getKeyboardShortcut( {
-	character: '\\',
-	modifier: 'primaryShift',
-} );
-const KEYBOARD_SHORTCUTS_SHORTCUT = getKeyboardShortcut( {
-	character: 'h',
-	modifier: 'access',
-} );
 
 export default function MoreMenu( { isRevisionMode = false } ) {
 	const { openModal } = useDispatch( interfaceStore );
@@ -104,7 +95,7 @@ export default function MoreMenu( { isRevisionMode = false } ) {
 						messageDeactivated={ __(
 							'Distraction free mode deactivated.'
 						) }
-						shortcut={ DISTRACTION_FREE_SHORTCUT }
+						shortcut={ keyboardShortcut.primaryShift( '\\' ) }
 					/>
 					<MoreMenuPreferenceItem
 						scope="core"
@@ -137,7 +128,7 @@ export default function MoreMenu( { isRevisionMode = false } ) {
 						onClick={ () =>
 							openModal( 'editor/keyboard-shortcut-help' )
 						}
-						shortcut={ KEYBOARD_SHORTCUTS_SHORTCUT }
+						shortcut={ keyboardShortcut.access( 'h' ) }
 					>
 						<Menu.ItemLabel>
 							{ __( 'Keyboard shortcuts' ) }

packages/keyboard-shortcuts/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### New Features
+
+-   Add the `getKeyboardShortcut` selector, returning the values used to display and describe a registered shortcut (`displayShortcut`, `ariaKeyShortcut` and `label`) ([#82632](https://github.com/WordPress/gutenberg/pull/82632)).
+
 ## 5.55.0 (2026-09-10)
 
 ## 5.54.0 (2026-08-26)

packages/keyboard-shortcuts/src/store/selectors.ts

@@ -1,9 +1,11 @@
 import { createSelector } from '@wordpress/data';
 import {
 	displayShortcut,
+	keyboardShortcut,
 	shortcutAriaLabel,
 	rawShortcut,
 } from '@wordpress/keycodes';
+import type { WPKeyboardShortcut } from '@wordpress/keycodes';
 import type { ShortcutKeyCombination } from './actions';
 
 interface ShortcutState {
@@ -158,6 +160,62 @@ export function getShortcutRepresentation(
 	return getKeyCombinationRepresentation( shortcut, representation );
 }
 
+/**
+ * Returns the three values used to display and describe the main key
+ * combination of a registered shortcut: its display string, its
+ * `aria-keyshortcuts` value and its plain-text label. Returns `null` when no
+ * shortcut is registered under the name.
+ *
+ * The raw representation and aliases are not included; use
+ * `getShortcutRepresentation` and `getShortcutAliases` for those.
+ *
+ * The returned object can be passed to the `shortcut` prop of the
+ * `@wordpress/ui` components.
+ *
+ * @param {Object} state Global state.
+ * @param {string} name  Shortcut name.
+ *
+ * @example
+ *
+ *```js
+ * import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
+ * import { useSelect } from '@wordpress/data';
+ * import { Menu } from '@wordpress/ui';
+ *
+ * const ExampleComponent = () => {
+ *     const shortcut = useSelect(
+ *         ( select ) =>
+ *             select( keyboardShortcutsStore ).getKeyboardShortcut(
+ *                 'core/editor/next-region'
+ *             ),
+ *         []
+ *     );
+ *
+ *     return (
+ *         <Menu.Item shortcut={ shortcut ?? undefined }>
+ *             <Menu.ItemLabel>Next region</Menu.ItemLabel>
+ *         </Menu.Item>
+ *     );
+ * };
+ *```
+ *
+ * @return {WPKeyboardShortcut?} Shortcut display values.
+ */
+export const getKeyboardShortcut = createSelector(
+	( state: ShortcutsState, name: string ): WPKeyboardShortcut | null => {
+		const combination = getShortcutKeyCombination( state, name );
+
+		if ( ! combination ) {
+			return null;
+		}
+
+		return keyboardShortcut[ combination.modifier ?? 'undefined' ](
+			combination.character
+		);
+	},
+	( state: ShortcutsState, name: string ) => [ state[ name ] ]
+);
+
 /**
  * Returns the shortcut description given its name.
  *

packages/keycodes/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### New Features
+
+-   Add `keyboardShortcut`, a helper returning the values used to display and describe a keyboard shortcut (`displayShortcut`, `ariaKeyShortcut` and `label`) ([#82632](https://github.com/WordPress/gutenberg/pull/82632)).
+
 ## 4.55.0 (2026-09-10)
 
 ## 4.54.0 (2026-08-26)

packages/keycodes/README.md

@@ -169,6 +169,28 @@ isKeyboardEvent.primary( event, 'm' );
 
 Keyed map of functions to match events.
 
+### keyboardShortcut
+
+An object that contains functions returning the three values used to display and describe a keyboard shortcut: its display string, its `aria-keyshortcuts` value and its plain-text label.
+
+The raw representation is not included; use `rawShortcut` for that.
+
+Use it in place of calling `displayShortcut`, `ariaKeyShortcut` and `shortcutAriaLabel` separately, for example to build the `shortcut` prop of the `@wordpress/ui` components.
+
+_Usage_
+
+```js
+// Assuming macOS:
+keyboardShortcut.primaryShift( 'm' );
+// {
+//   displayShortcut: "⇧⌘M",
+//   ariaKeyShortcut: "Shift+Meta+M",
+//   label: "Shift Command M",
+// }
+```
+
+Keyed map of functions to shortcut display values.
+
 ### LEFT
 
 Keycode for LEFT key.