From 8e11cdb0961d23f333bcd340078b4a9702ca4ece Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Mon, 3 Sep 2018 16:14:39 +0100
Subject: [PATCH] Add aria labels for shortcuts in keyboard shortcut help modal

---
 .../components/keyboard-shortcut-help-modal/config.js    | 9 ++++++++-
 .../components/keyboard-shortcut-help-modal/index.js     | 4 ++--
 .../test/__snapshots__/index.js.snap                     | 5 +++++
 packages/keycodes/src/index.js                           | 1 -
 4 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/edit-post/components/keyboard-shortcut-help-modal/config.js b/edit-post/components/keyboard-shortcut-help-modal/config.js
index f77f229c1798f3..ddaebe1d38d0ad 100644
--- 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
index 295d3e9ba5fdcc..cd9715f3123bf9 100644
--- 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
index c1ccc4ca67a059..417a6cc315daa1 100644
--- 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
index 6baf49d9f8b00a..b9479cb7ff6781 100644
--- 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 ]