From 55fe83c70b615c4bcfb7c797d67ba25ed2493d9c Mon Sep 17 00:00:00 2001
From: Joshua T Flowers <joshuatf@gmail.com>
Date: Tue, 27 Aug 2019 11:24:03 +0800
Subject: [PATCH] Improve Autocomplete accessibility
 (https://github.com/woocommerce/woocommerce-admin/pull/2840)

---
 .../packages/components/src/autocomplete/index.js          | 2 +-
 .../packages/components/src/autocomplete/list.js           | 4 ++--
 .../packages/components/src/autocomplete/style.scss        | 7 ++++++-
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/plugins/woocommerce-admin/packages/components/src/autocomplete/index.js b/plugins/woocommerce-admin/packages/components/src/autocomplete/index.js
index 9906997c040..3f4e1bbf1cf 100644
--- a/plugins/woocommerce-admin/packages/components/src/autocomplete/index.js
+++ b/plugins/woocommerce-admin/packages/components/src/autocomplete/index.js
@@ -123,7 +123,7 @@ export class Autocomplete extends Component {
 		const filtered = [];
 
 		// Create a regular expression to filter the options.
-		const expression = getSearchExpression( escapeRegExp( query.trim() ) );
+		const expression = getSearchExpression( escapeRegExp( query ? query.trim() : '' ) );
 		const search = expression ? new RegExp( expression, 'i' ) : /^$/;
 
 		for ( let i = 0; i < options.length; i++ ) {
diff --git a/plugins/woocommerce-admin/packages/components/src/autocomplete/list.js b/plugins/woocommerce-admin/packages/components/src/autocomplete/list.js
index 69458bf5efc..e045e58f1e7 100644
--- a/plugins/woocommerce-admin/packages/components/src/autocomplete/list.js
+++ b/plugins/woocommerce-admin/packages/components/src/autocomplete/list.js
@@ -6,7 +6,7 @@ import { Button } from '@wordpress/components';
 import classnames from 'classnames';
 import { Component, createRef } from '@wordpress/element';
 import { isEqual } from 'lodash';
-import { ENTER, ESCAPE, UP, DOWN, LEFT, TAB, RIGHT } from '@wordpress/keycodes';
+import { ENTER, ESCAPE, UP, DOWN, LEFT, RIGHT } from '@wordpress/keycodes';
 import PropTypes from 'prop-types';
 
 /**
@@ -82,7 +82,6 @@ class List extends Component {
 				event.stopPropagation();
 				break;
 
-			case TAB:
 			case DOWN:
 				nextSelectedIndex = null !== selectedIndex
 					? ( selectedIndex + 1 ) % filteredOptions.length
@@ -153,6 +152,7 @@ class List extends Component {
 								'is-selected': index === selectedIndex,
 							} ) }
 							onClick={ () => this.select( option ) }
+							tabIndex="-1"
 						>
 							{ option.label }
 						</Button>
diff --git a/plugins/woocommerce-admin/packages/components/src/autocomplete/style.scss b/plugins/woocommerce-admin/packages/components/src/autocomplete/style.scss
index 6eed491e1bb..b42fa55fc5e 100644
--- a/plugins/woocommerce-admin/packages/components/src/autocomplete/style.scss
+++ b/plugins/woocommerce-admin/packages/components/src/autocomplete/style.scss
@@ -55,6 +55,11 @@
 			width: 24px;
 		}
 
+		&.is-active {
+			box-shadow: 0 0 0 1px $new-muriel-primary-500;
+			border-color: $new-muriel-primary-500;
+		}
+
 		&.with-value .components-base-control__label,
 		&.is-active .components-base-control__label,
 		&.has-tags .components-base-control__label {
@@ -96,7 +101,7 @@
 		position: absolute;
 		left: 0;
 		right: 0;
-		top: 56px;
+		top: 57px;
 		z-index: 10;
 		overflow: scroll;
 		max-height: 350px;