From a61a3fb812af283968a34359eb758bb113434908 Mon Sep 17 00:00:00 2001
From: Vadim Nicolai <nicolai.vadim@gmail.com>
Date: Wed, 15 May 2019 16:01:19 +0300
Subject: [PATCH] Accessibility: Fixed reading order of keyboard shortcuts.
 (#15631)

* Accessibility: Fixed reading order of keyboard shortcuts.

* Accessibility: added role list to unordered list and reset li bottom margin.
---
 .../keyboard-shortcut-help-modal/index.js     | 23 +++++++++++--------
 .../keyboard-shortcut-help-modal/style.scss   |  3 +--
 2 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/packages/edit-post/src/components/keyboard-shortcut-help-modal/index.js b/packages/edit-post/src/components/keyboard-shortcut-help-modal/index.js
index 810519ccd3a49..a077cc6fe6fe9 100644
--- a/packages/edit-post/src/components/keyboard-shortcut-help-modal/index.js
+++ b/packages/edit-post/src/components/keyboard-shortcut-help-modal/index.js
@@ -40,23 +40,28 @@ const mapKeyCombination = ( keyCombination ) => keyCombination.map( ( character,
 } );
 
 const ShortcutList = ( { shortcuts } ) => (
-	<dl className="edit-post-keyboard-shortcut-help__shortcut-list">
+	/*
+	 * Disable reason: The `list` ARIA role is redundant but
+	 * Safari+VoiceOver won't announce the list otherwise.
+	 */
+	/* eslint-disable jsx-a11y/no-redundant-roles */
+	<ul className="edit-post-keyboard-shortcut-help__shortcut-list" role="list">
 		{ shortcuts.map( ( { keyCombination, description, ariaLabel }, index ) => (
-			<div
+			<li
 				className="edit-post-keyboard-shortcut-help__shortcut"
 				key={ index }
 			>
-				<dt className="edit-post-keyboard-shortcut-help__shortcut-term">
+				<div className="edit-post-keyboard-shortcut-help__shortcut-description">
+					{ description }
+				</div>
+				<div className="edit-post-keyboard-shortcut-help__shortcut-term">
 					<kbd className="edit-post-keyboard-shortcut-help__shortcut-key-combination" aria-label={ ariaLabel }>
 						{ mapKeyCombination( castArray( keyCombination ) ) }
 					</kbd>
-				</dt>
-				<dd className="edit-post-keyboard-shortcut-help__shortcut-description">
-					{ description }
-				</dd>
-			</div>
+				</div>
+			</li>
 		) ) }
-	</dl>
+	</ul>
 );
 
 const ShortcutSection = ( { title, shortcuts } ) => (
diff --git a/packages/edit-post/src/components/keyboard-shortcut-help-modal/style.scss b/packages/edit-post/src/components/keyboard-shortcut-help-modal/style.scss
index da56dc8704582..e6bcc5f43137e 100644
--- a/packages/edit-post/src/components/keyboard-shortcut-help-modal/style.scss
+++ b/packages/edit-post/src/components/keyboard-shortcut-help-modal/style.scss
@@ -15,6 +15,7 @@
 		align-items: center;
 		padding: 0.6rem 0;
 		border-top: 1px solid $light-gray-500;
+		margin-bottom: 0;
 
 		&:last-child {
 			border-bottom: 1px solid $light-gray-500;
@@ -22,14 +23,12 @@
 	}
 
 	&__shortcut-term {
-		order: 1;
 		font-weight: 600;
 		margin: 0 0 0 1rem;
 	}
 
 	&__shortcut-description {
 		flex: 1;
-		order: 0;
 		margin: 0;
 
 		// IE 11 flex item fix - ensure the item does not collapse