Add aria labels for shortcuts in keyboard shortcut help modal

WordPress · Sep 3, 2018 · 8e11cdb · 8e11cdb
1 parent 14344f7
commit 8e11cdb
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 4 deletions.
diff --git a/edit-post/components/keyboard-shortcut-help-modal/config.js b/edit-post/components/keyboard-shortcut-help-modal/config.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { displayShortcutList } from '@wordpress/keycodes';
+import { displayShortcutList, shortcutAriaLabel } from '@wordpress/keycodes';
 import { __ } from '@wordpress/i18n';
 
 const {
@@ -42,14 +42,17 @@ const globalShortcuts = {
 		{
 			keyCombination: primaryShift( ',' ),
 			description: __( 'Show or hide the settings sidebar.' ),
+			ariaLabel: shortcutAriaLabel.primaryShift( ',' ),
 		},
 		{
 			keyCombination: ctrl( '`' ),
 			description: __( 'Navigate to a the next part of the editor.' ),
+			ariaLabel: shortcutAriaLabel.ctrl( '`' ),
 		},
 		{
 			keyCombination: ctrlShift( '`' ),
 			description: __( 'Navigate to the previous part of the editor.' ),
+			ariaLabel: shortcutAriaLabel.ctrlShift( '`' ),
 		},
 		{
 			keyCombination: shiftAlt( 'n' ),
@@ -76,6 +79,8 @@ const selectionShortcuts = {
 		{
 			keyCombination: 'Esc',
 			description: __( 'Clear selection.' ),
+			/* translators: The 'escape' key on a keyboard. */
+			ariaLabel: __( 'Escape' ),
 		},
 	],
 };
@@ -102,6 +107,8 @@ const blockShortcuts = {
 		{
 			keyCombination: '/',
 			description: __( 'Change the block type after adding a new paragraph.' ),
+			/* translators: The forward-slash character. e.g. '/'. */
+			ariaLabel: __( 'Forward-slash' ),
 		},
 	],
 };

diff --git a/edit-post/components/keyboard-shortcut-help-modal/index.js b/edit-post/components/keyboard-shortcut-help-modal/index.js
@@ -42,13 +42,13 @@ const mapKeyCombination = ( keyCombination ) => keyCombination.map( ( character,
 
 const ShortcutList = ( { shortcuts } ) => (
 	<dl className="edit-post-keyboard-shortcut-help__shortcut-list">
-		{ shortcuts.map( ( { keyCombination, description }, index ) => (
+		{ shortcuts.map( ( { keyCombination, description, ariaLabel }, index ) => (
 			<div
 				className="edit-post-keyboard-shortcut-help__shortcut"
 				key={ index }
 			>
 				<dt className="edit-post-keyboard-shortcut-help__shortcut-term">
-					<kbd className="edit-post-keyboard-shortcut-help__shortcut-key-combination">
+					<kbd className="edit-post-keyboard-shortcut-help__shortcut-key-combination" aria-label={ ariaLabel }>
 						{ mapKeyCombination( castArray( keyCombination ) ) }
 					</kbd>
 				</dt>

diff --git a/edit-post/components/keyboard-shortcut-help-modal/test/__snapshots__/index.js.snap b/edit-post/components/keyboard-shortcut-help-modal/test/__snapshots__/index.js.snap
@@ -63,6 +63,7 @@ exports[`KeyboardShortcutHelpModal should match snapshot when the modal is activ
             ],
           },
           Object {
+            "ariaLabel": "Control + Shift + Comma",
             "description": "Show or hide the settings sidebar.",
             "keyCombination": Array [
               "Ctrl",
@@ -73,6 +74,7 @@ exports[`KeyboardShortcutHelpModal should match snapshot when the modal is activ
             ],
           },
           Object {
+            "ariaLabel": "Control + Backtick",
             "description": "Navigate to a the next part of the editor.",
             "keyCombination": Array [
               "Ctrl",
@@ -81,6 +83,7 @@ exports[`KeyboardShortcutHelpModal should match snapshot when the modal is activ
             ],
           },
           Object {
+            "ariaLabel": "Control + Shift + Backtick",
             "description": "Navigate to the previous part of the editor.",
             "keyCombination": Array [
               "Ctrl",
@@ -139,6 +142,7 @@ exports[`KeyboardShortcutHelpModal should match snapshot when the modal is activ
             ],
           },
           Object {
+            "ariaLabel": "Escape",
             "description": "Clear selection.",
             "keyCombination": "Esc",
           },
@@ -191,6 +195,7 @@ exports[`KeyboardShortcutHelpModal should match snapshot when the modal is activ
             ],
           },
           Object {
+            "ariaLabel": "Forward-slash",
             "description": "Change the block type after adding a new paragraph.",
             "keyCombination": "/",
           },

diff --git a/packages/keycodes/src/index.js b/packages/keycodes/src/index.js
@@ -127,7 +127,6 @@ export const shortcutAriaLabel = mapValues( modifiers, ( modifier ) => {
 			'.': __( 'Period' ),
 			/* translators: backtick as in the character '`' */
 			'`': __( 'Backtick' ),
-			esc: 'Escape',
 		};
 
 		return [ ...modifier( _isApple ), character ]