From 22308dc1bdfbf811c51f6b793988cc7c9f833b08 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Thu, 31 May 2018 15:07:25 +0200
Subject: [PATCH 1/2] Remove ARIA roles and arrows navigation.

---
 editor/components/inserter/item-list.js | 55 +------------------------
 1 file changed, 2 insertions(+), 53 deletions(-)

diff --git a/editor/components/inserter/item-list.js b/editor/components/inserter/item-list.js
index c3ce06f8a0f65..b833d37ac428e 100644
--- a/editor/components/inserter/item-list.js
+++ b/editor/components/inserter/item-list.js
@@ -1,14 +1,12 @@
 /**
  * External dependencies
  */
-import { isEqual } from 'lodash';
 import classnames from 'classnames';
 
 /**
  * WordPress dependencies
  */
 import { Component } from '@wordpress/element';
-import { NavigableMenu } from '@wordpress/components';
 import { getBlockMenuDefaultClassName } from '@wordpress/blocks';
 
 /**
@@ -16,63 +14,15 @@ import { getBlockMenuDefaultClassName } from '@wordpress/blocks';
  */
 import BlockIcon from '../block-icon';
 
-function deriveActiveItems( items ) {
-	return items.filter( ( item ) => ! item.isDisabled );
-}
-
 class ItemList extends Component {
-	constructor() {
-		super( ...arguments );
-		this.onNavigate = this.onNavigate.bind( this );
-		this.activeItems = deriveActiveItems( this.props.items );
-		this.state = {
-			current: this.activeItems.length > 0 ? this.activeItems[ 0 ] : null,
-		};
-	}
-
-	componentDidUpdate( prevProps ) {
-		if ( ! isEqual( this.props.items, prevProps.items ) ) {
-			this.activeItems = deriveActiveItems( this.props.items );
-
-			// Try and preserve any still valid selected state.
-			const currentIsStillActive = this.state.current && this.activeItems.some( ( item ) =>
-				item.id === this.state.current.id
-			);
-
-			if ( ! currentIsStillActive ) {
-				this.setState( {
-					current: this.activeItems.length > 0 ? this.activeItems[ 0 ] : null,
-				} );
-			}
-		}
-	}
-
-	onNavigate( index ) {
-		const { activeItems } = this;
-		const dest = activeItems[ index ];
-		if ( dest ) {
-			this.setState( {
-				current: dest,
-			} );
-		}
-	}
-
 	render() {
 		const { items, onSelect, onHover } = this.props;
-		const { current } = this.state;
 
 		return (
-			<NavigableMenu
-				className="editor-inserter__item-list"
-				orientation="both"
-				cycle={ false }
-				onNavigate={ this.onNavigate }
-			>
+			<div className="editor-inserter__item-list">
 				{ items.map( ( item ) => {
-					const isCurrent = current && current.id === item.id;
 					return (
 						<button
-							role="menuitem"
 							key={ item.id }
 							className={
 								classnames(
@@ -84,7 +34,6 @@ class ItemList extends Component {
 								)
 							}
 							onClick={ () => onSelect( item ) }
-							tabIndex={ isCurrent || item.isDisabled ? null : '-1' }
 							disabled={ item.isDisabled }
 							onMouseEnter={ () => onHover( item ) }
 							onMouseLeave={ () => onHover( null ) }
@@ -103,7 +52,7 @@ class ItemList extends Component {
 						</button>
 					);
 				} ) }
-			</NavigableMenu>
+			</div>
 		);
 	}
 }

From ad79082f3eb6573423e54daa20590793f0fac83c Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Thu, 31 May 2018 16:17:47 +0200
Subject: [PATCH 2/2] Use a list for the block types list.

---
 editor/components/inserter/item-list.js | 65 ++++++++++++++-----------
 editor/components/inserter/style.scss   |  8 ++-
 2 files changed, 43 insertions(+), 30 deletions(-)

diff --git a/editor/components/inserter/item-list.js b/editor/components/inserter/item-list.js
index b833d37ac428e..3dcf4ea8bb3a0 100644
--- a/editor/components/inserter/item-list.js
+++ b/editor/components/inserter/item-list.js
@@ -19,40 +19,47 @@ class ItemList extends Component {
 		const { items, onSelect, onHover } = this.props;
 
 		return (
-			<div className="editor-inserter__item-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 role="list" className="editor-inserter__list">
 				{ items.map( ( item ) => {
 					return (
-						<button
-							key={ item.id }
-							className={
-								classnames(
-									'editor-inserter__item',
-									getBlockMenuDefaultClassName( item.id ),
-									{
-										'editor-inserter__item-has-children': item.hasChildBlocks,
-									}
-								)
-							}
-							onClick={ () => onSelect( item ) }
-							disabled={ item.isDisabled }
-							onMouseEnter={ () => onHover( item ) }
-							onMouseLeave={ () => onHover( null ) }
-							onFocus={ () => onHover( item ) }
-							onBlur={ () => onHover( null ) }
-							aria-label={ item.title } // Fix for IE11 and JAWS 2018.
-						>
-							<span className="editor-inserter__item-icon">
-								<BlockIcon icon={ item.icon } />
-								{ item.hasChildBlocks && <span className="editor-inserter__item-icon-stack" /> }
-							</span>
+						<li className="editor-inserter__list-item" key={ item.id }>
+							<button
+								className={
+									classnames(
+										'editor-inserter__item',
+										getBlockMenuDefaultClassName( item.id ),
+										{
+											'editor-inserter__item-has-children': item.hasChildBlocks,
+										}
+									)
+								}
+								onClick={ () => onSelect( item ) }
+								disabled={ item.isDisabled }
+								onMouseEnter={ () => onHover( item ) }
+								onMouseLeave={ () => onHover( null ) }
+								onFocus={ () => onHover( item ) }
+								onBlur={ () => onHover( null ) }
+								aria-label={ item.title } // Fix for IE11 and JAWS 2018.
+							>
+								<span className="editor-inserter__item-icon">
+									<BlockIcon icon={ item.icon } />
+									{ item.hasChildBlocks && <span className="editor-inserter__item-icon-stack" /> }
+								</span>
 
-							<span className="editor-inserter__item-title">
-								{ item.title }
-							</span>
-						</button>
+								<span className="editor-inserter__item-title">
+									{ item.title }
+								</span>
+							</button>
+						</li>
 					);
 				} ) }
-			</div>
+			</ul>
+			/* eslint-enable jsx-a11y/no-redundant-roles */
 		);
 	}
 }
diff --git a/editor/components/inserter/style.scss b/editor/components/inserter/style.scss
index d9f604c2a3e57..bf097e2c71bfe 100644
--- a/editor/components/inserter/style.scss
+++ b/editor/components/inserter/style.scss
@@ -93,8 +93,14 @@ $block-inserter-search-height: 38px;
 	}
 }
 
-.editor-inserter__item-list {
+.editor-inserter__list {
+	list-style: none;
 	margin: 0 -8px;
+	padding: 0;
+}
+
+.editor-inserter__list-item {
+	display: inline;
 }
 
 .editor-inserter__item {