Make the inserter results panel focusable and improve accessibility. (#…

…7663)
WordPress · Jul 2, 2018 · b4435de · b4435de
1 parent 354756a
commit b4435de
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/editor/components/inserter/menu.js b/editor/components/inserter/menu.js
@@ -207,7 +207,13 @@ export class InserterMenu extends Component {
 					onChange={ this.onChangeSearchInput }
 				/>
 
-				<div className="editor-inserter__results" ref={ this.inserterResults }>
+				<div
+					className="editor-inserter__results"
+					ref={ this.inserterResults }
+					tabIndex="0"
+					role="region"
+					aria-label={ __( 'Available block types' ) }
+				>
 					<InserterResultsPortal.Slot fillProps={ { filterValue } } />
 
 					<ChildBlocks

diff --git a/editor/components/inserter/style.scss b/editor/components/inserter/style.scss
@@ -82,6 +82,10 @@ $block-inserter-search-height: 38px;
 	position: relative;
 	z-index: 1; // Necessary for the stacked card below parent blocks to show up.
 
+	&:focus {
+		outline: 1px dotted $dark-gray-500;
+	}
+
 	@include break-medium {
 		height: $block-inserter-content-height + $block-inserter-tabs-height;
 	}