Change shortcut text for redo tooltip on Windows (#42830)

* A11y: add Ctrl+Y text for redo tooltip on Windows * Change shortcut text for redo tooltip on Windows
WordPress · Aug 2, 2022 · 22ba73a · 22ba73a
1 parent 9171278
commit 22ba73a
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 10 deletions.
diff --git a/packages/customize-widgets/src/components/header/index.js b/packages/customize-widgets/src/components/header/index.js
@@ -10,7 +10,7 @@ import { createPortal, useState, useEffect } from '@wordpress/element';
 import { __, _x, isRTL } from '@wordpress/i18n';
 import { ToolbarButton } from '@wordpress/components';
 import { NavigableToolbar } from '@wordpress/block-editor';
-import { displayShortcut } from '@wordpress/keycodes';
+import { displayShortcut, isAppleOS } from '@wordpress/keycodes';
 import { plus, undo as undoIcon, redo as redoIcon } from '@wordpress/icons';
 
 /**
@@ -31,6 +31,10 @@ function Header( {
 		sidebar.hasRedo(),
 	] );
 
+	const shortcut = isAppleOS()
+		? displayShortcut.primaryShift( 'z' )
+		: displayShortcut.primary( 'y' );
+
 	useEffect( () => {
 		return sidebar.subscribeHistory( () => {
 			setUndoRedo( [ sidebar.hasUndo(), sidebar.hasRedo() ] );
@@ -64,7 +68,7 @@ function Header( {
 						icon={ ! isRTL() ? redoIcon : undoIcon }
 						/* translators: button label text should, if possible, be under 16 characters. */
 						label={ __( 'Redo' ) }
-						shortcut={ displayShortcut.primaryShift( 'z' ) }
+						shortcut={ shortcut }
 						// If there are no undo levels we don't want to actually disable this
 						// button, because it will remove focus for keyboard users.
 						// See: https://github.com/WordPress/gutenberg/issues/3486

diff --git a/packages/edit-navigation/src/components/header/redo-button.js b/packages/edit-navigation/src/components/header/redo-button.js
@@ -5,10 +5,14 @@ import { __, isRTL } from '@wordpress/i18n';
 import { ToolbarButton } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { redo as redoIcon, undo as undoIcon } from '@wordpress/icons';
-import { displayShortcut } from '@wordpress/keycodes';
+import { displayShortcut, isAppleOS } from '@wordpress/keycodes';
 import { store as coreStore } from '@wordpress/core-data';
 
 export default function RedoButton() {
+	const shortcut = isAppleOS()
+		? displayShortcut.primaryShift( 'z' )
+		: displayShortcut.primary( 'y' );
+
 	const hasRedo = useSelect(
 		( select ) => select( coreStore ).hasRedo(),
 		[]
@@ -18,7 +22,7 @@ export default function RedoButton() {
 		<ToolbarButton
 			icon={ ! isRTL() ? redoIcon : undoIcon }
 			label={ __( 'Redo' ) }
-			shortcut={ displayShortcut.primaryShift( 'z' ) }
+			shortcut={ shortcut }
 			// If there are no undo levels we don't want to actually disable this
 			// button, because it will remove focus for keyboard users.
 			// See: https://github.com/WordPress/gutenberg/issues/3486

diff --git a/packages/edit-site/src/components/header/undo-redo/redo.js b/packages/edit-site/src/components/header/undo-redo/redo.js
@@ -5,11 +5,15 @@ import { __, isRTL } from '@wordpress/i18n';
 import { Button } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { redo as redoIcon, undo as undoIcon } from '@wordpress/icons';
-import { displayShortcut } from '@wordpress/keycodes';
+import { displayShortcut, isAppleOS } from '@wordpress/keycodes';
 import { store as coreStore } from '@wordpress/core-data';
 import { forwardRef } from '@wordpress/element';
 
 function RedoButton( props, ref ) {
+	const shortcut = isAppleOS()
+		? displayShortcut.primaryShift( 'z' )
+		: displayShortcut.primary( 'y' );
+
 	const hasRedo = useSelect(
 		( select ) => select( coreStore ).hasRedo(),
 		[]
@@ -21,7 +25,7 @@ function RedoButton( props, ref ) {
 			ref={ ref }
 			icon={ ! isRTL() ? redoIcon : undoIcon }
 			label={ __( 'Redo' ) }
-			shortcut={ displayShortcut.primaryShift( 'z' ) }
+			shortcut={ shortcut }
 			// If there are no undo levels we don't want to actually disable this
 			// button, because it will remove focus for keyboard users.
 			// See: https://github.com/WordPress/gutenberg/issues/3486

diff --git a/packages/edit-widgets/src/components/header/undo-redo/redo.js b/packages/edit-widgets/src/components/header/undo-redo/redo.js
@@ -5,10 +5,14 @@ import { __, isRTL } from '@wordpress/i18n';
 import { ToolbarButton } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { redo as redoIcon, undo as undoIcon } from '@wordpress/icons';
-import { displayShortcut } from '@wordpress/keycodes';
+import { displayShortcut, isAppleOS } from '@wordpress/keycodes';
 import { store as coreStore } from '@wordpress/core-data';
 
 export default function RedoButton() {
+	const shortcut = isAppleOS()
+		? displayShortcut.primaryShift( 'z' )
+		: displayShortcut.primary( 'y' );
+
 	const hasRedo = useSelect(
 		( select ) => select( coreStore ).hasRedo(),
 		[]
@@ -18,7 +22,7 @@ export default function RedoButton() {
 		<ToolbarButton
 			icon={ ! isRTL() ? redoIcon : undoIcon }
 			label={ __( 'Redo' ) }
-			shortcut={ displayShortcut.primaryShift( 'z' ) }
+			shortcut={ shortcut }
 			// If there are no undo levels we don't want to actually disable this
 			// button, because it will remove focus for keyboard users.
 			// See: https://github.com/WordPress/gutenberg/issues/3486

diff --git a/packages/editor/src/components/editor-history/redo.js b/packages/editor/src/components/editor-history/redo.js
@@ -4,7 +4,7 @@
 import { __, isRTL } from '@wordpress/i18n';
 import { Button } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { displayShortcut } from '@wordpress/keycodes';
+import { displayShortcut, isAppleOS } from '@wordpress/keycodes';
 import { redo as redoIcon, undo as undoIcon } from '@wordpress/icons';
 import { forwardRef } from '@wordpress/element';
 
@@ -14,6 +14,10 @@ import { forwardRef } from '@wordpress/element';
 import { store as editorStore } from '../../store';
 
 function EditorHistoryRedo( props, ref ) {
+	const shortcut = isAppleOS()
+		? displayShortcut.primaryShift( 'z' )
+		: displayShortcut.primary( 'y' );
+
 	const hasRedo = useSelect(
 		( select ) => select( editorStore ).hasEditorRedo(),
 		[]
@@ -26,7 +30,7 @@ function EditorHistoryRedo( props, ref ) {
 			icon={ ! isRTL() ? redoIcon : undoIcon }
 			/* translators: button label text should, if possible, be under 16 characters. */
 			label={ __( 'Redo' ) }
-			shortcut={ displayShortcut.primaryShift( 'z' ) }
+			shortcut={ shortcut }
 			// If there are no redo levels we don't want to actually disable this
 			// button, because it will remove focus for keyboard users.
 			// See: https://github.com/WordPress/gutenberg/issues/3486