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.
WordPress · May 15, 2019 · a61a3fb · a61a3fb
1 parent fc76329
commit a61a3fb
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 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
@@ -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
@@ -15,21 +15,20 @@
 		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;
 		}
 	}
 
 	&__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