From 77e32a92aab5b9c004bcbc5df15c6a86c61abbfc Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Thu, 2 Jul 2020 13:04:38 +0100
Subject: [PATCH] Address a11y feedback

---
 .../block-editor/src/components/block-types-list/index.js   | 4 +++-
 .../block-editor/src/components/inserter-list-item/index.js | 2 +-
 .../block-editor/src/components/inserter/block-types-tab.js | 6 ++++++
 .../block-editor/src/components/inserter/quick-inserter.js  | 1 +
 4 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/block-editor/src/components/block-types-list/index.js b/packages/block-editor/src/components/block-types-list/index.js
index bab2808f4d3c85..a7b4eac69f29cf 100644
--- a/packages/block-editor/src/components/block-types-list/index.js
+++ b/packages/block-editor/src/components/block-types-list/index.js
@@ -19,6 +19,7 @@ function BlockTypesList( {
 	onSelect,
 	onHover = () => {},
 	children,
+	label,
 } ) {
 	const composite = useCompositeState();
 	const normalizedItems = includeVariationsInInserterItems( items );
@@ -31,9 +32,10 @@ function BlockTypesList( {
 		/* eslint-disable jsx-a11y/no-redundant-roles */
 		<Composite
 			as="ul"
-			role="list"
+			role="listbox"
 			{ ...composite }
 			className="block-editor-block-types-list"
+			aria-label={ label }
 		>
 			{ normalizedItems.map( ( item ) => {
 				return (
diff --git a/packages/block-editor/src/components/inserter-list-item/index.js b/packages/block-editor/src/components/inserter-list-item/index.js
index 45f7026aedc5dc..0482455eab9aba 100644
--- a/packages/block-editor/src/components/inserter-list-item/index.js
+++ b/packages/block-editor/src/components/inserter-list-item/index.js
@@ -31,7 +31,7 @@ function InserterListItem( {
 		: {};
 
 	return (
-		<li className="block-editor-block-types-list__list-item">
+		<li className="block-editor-block-types-list__list-item" role="option">
 			<CompositeItem
 				as={ Button }
 				{ ...composite }
diff --git a/packages/block-editor/src/components/inserter/block-types-tab.js b/packages/block-editor/src/components/inserter/block-types-tab.js
index 0e0d4bc7091bf9..83467688dab0c3 100644
--- a/packages/block-editor/src/components/inserter/block-types-tab.js
+++ b/packages/block-editor/src/components/inserter/block-types-tab.js
@@ -126,6 +126,7 @@ export function BlockTypesTab( {
 						items={ filteredItems }
 						onSelect={ onSelectItem }
 						onHover={ onHover }
+						label={ __( 'Child Blocks' ) }
 					/>
 				</ChildBlocks>
 			) }
@@ -139,6 +140,7 @@ export function BlockTypesTab( {
 							items={ suggestedItems }
 							onSelect={ onSelectItem }
 							onHover={ onHover }
+							label={ _x( 'Most used', 'blocks' ) }
 						/>
 					</InserterPanel>
 				) }
@@ -159,6 +161,7 @@ export function BlockTypesTab( {
 								items={ categoryItems }
 								onSelect={ onSelectItem }
 								onHover={ onHover }
+								label={ category.title }
 							/>
 						</InserterPanel>
 					);
@@ -173,6 +176,7 @@ export function BlockTypesTab( {
 						items={ uncategorizedItems }
 						onSelect={ onSelectItem }
 						onHover={ onHover }
+						label={ __( 'Uncategorized' ) }
 					/>
 				</InserterPanel>
 			) }
@@ -194,6 +198,7 @@ export function BlockTypesTab( {
 								items={ collectionItems }
 								onSelect={ onSelectItem }
 								onHover={ onHover }
+								label={ collection.title }
 							/>
 						</InserterPanel>
 					);
@@ -209,6 +214,7 @@ export function BlockTypesTab( {
 						items={ reusableItems }
 						onSelect={ onSelectItem }
 						onHover={ onHover }
+						label={ __( 'Reusable' ) }
 					/>
 					<a
 						className="block-editor-inserter__manage-reusable-blocks"
diff --git a/packages/block-editor/src/components/inserter/quick-inserter.js b/packages/block-editor/src/components/inserter/quick-inserter.js
index bd0489e1812b29..f926d1bcb8df82 100644
--- a/packages/block-editor/src/components/inserter/quick-inserter.js
+++ b/packages/block-editor/src/components/inserter/quick-inserter.js
@@ -69,6 +69,7 @@ function QuickInserterList( {
 						items={ shownBlockTypes }
 						onSelect={ onSelectBlockType }
 						onHover={ onHover }
+						label={ __( 'Blocks' ) }
 					/>
 				</InserterPanel>
 			) }