From 2e3029874403bce7b23a576784f79e537df1bf68 Mon Sep 17 00:00:00 2001
From: Kelly Dwan <ryelle@users.noreply.github.com>
Date: Mon, 24 Jun 2019 12:50:47 -0400
Subject: [PATCH] Switch to a button-click navigation pattern for better
 keyboard support

---
 assets/js/blocks/product-categories/block.js  | 31 +++++++++++++++----
 assets/js/blocks/product-categories/index.js  |  1 +
 .../js/blocks/product-categories/style.scss   | 11 +++++++
 assets/php/class-wgpb-block-library.php       |  2 +-
 4 files changed, 38 insertions(+), 7 deletions(-)
 create mode 100644 assets/js/blocks/product-categories/style.scss

diff --git a/assets/js/blocks/product-categories/block.js b/assets/js/blocks/product-categories/block.js
index dbb1c057d93..73d27c92139 100644
--- a/assets/js/blocks/product-categories/block.js
+++ b/assets/js/blocks/product-categories/block.js
@@ -2,7 +2,9 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Component, Fragment } from '@wordpress/element';
+import classnames from 'classnames';
+import { Component, createRef, Fragment } from '@wordpress/element';
+import { IconButton } from '@wordpress/components';
 import { repeat } from 'lodash';
 import PropTypes from 'prop-types';
 import { withInstanceId } from '@wordpress/compose';
@@ -27,14 +29,18 @@ function getCategories( { hasEmpty, isHierarchical } ) {
 class ProductCategoriesBlock extends Component {
 	constructor() {
 		super( ...arguments );
+		this.select = createRef();
 		this.onNavigate = this.onNavigate.bind( this );
 		this.renderList = this.renderList.bind( this );
 		this.renderOptions = this.renderOptions.bind( this );
 	}
 
-	onNavigate( event ) {
+	onNavigate() {
 		const { isPreview = false } = this.props;
-		const url = event.target.value;
+		const url = this.select.current.value;
+		if ( 'false' === url ) {
+			return;
+		}
 		const home = wc_product_block_data.homeUrl;
 
 		if ( ! isPreview && 0 === url.indexOf( home ) ) {
@@ -80,19 +86,32 @@ class ProductCategoriesBlock extends Component {
 		const { attributes, instanceId } = this.props;
 		const { isDropdown } = attributes;
 		const categories = getCategories( attributes );
+		const classes = classnames( {
+			'wc-block-product-categories': true,
+			'is-dropdown': isDropdown,
+			'is-list': ! isDropdown,
+		} );
 
 		const selectId = `prod-categories-${ instanceId }`;
 
 		return (
-			<div className="wc-block-product-categories">
+			<div className={ classes }>
 				{ isDropdown ? (
 					<Fragment>
-						<label htmlFor={ selectId }>
+						<label className="screen-reader-text" htmlFor={ selectId }>
 							{ __( 'Select a category', 'woo-gutenberg-products-block' ) }
 						</label>
-						<select id={ selectId } onChange={ this.onNavigate }>
+						<select id={ selectId } ref={ this.select }>
+							<option value="false">
+								{ __( 'Select a category', 'woo-gutenberg-products-block' ) }
+							</option>
 							{ this.renderOptions( categories ) }
 						</select>
+						<IconButton
+							icon="arrow-right-alt2"
+							label={ __( 'Go to category', 'woo-gutenberg-products-block' ) }
+							onClick={ this.onNavigate }
+						/>
 					</Fragment>
 				) : (
 					this.renderList( categories )
diff --git a/assets/js/blocks/product-categories/index.js b/assets/js/blocks/product-categories/index.js
index 83b4b392d24..8375cb87cab 100644
--- a/assets/js/blocks/product-categories/index.js
+++ b/assets/js/blocks/product-categories/index.js
@@ -8,6 +8,7 @@ import { registerBlockType } from '@wordpress/blocks';
  * Internal dependencies
  */
 import './editor.scss';
+import './style.scss';
 import edit from './edit.js';
 import { IconFolder } from '../../components/icons';
 
diff --git a/assets/js/blocks/product-categories/style.scss b/assets/js/blocks/product-categories/style.scss
new file mode 100644
index 00000000000..1ceb684cd5c
--- /dev/null
+++ b/assets/js/blocks/product-categories/style.scss
@@ -0,0 +1,11 @@
+.wc-block-product-categories {
+	margin-bottom: 1em;
+
+	&.is-dropdown {
+		display: flex;
+	}
+
+	select {
+		margin-right: 0.5em;
+	}
+}
diff --git a/assets/php/class-wgpb-block-library.php b/assets/php/class-wgpb-block-library.php
index 3302f9c79d9..a3ffba019d3 100644
--- a/assets/php/class-wgpb-block-library.php
+++ b/assets/php/class-wgpb-block-library.php
@@ -119,7 +119,7 @@ protected static function register_style( $handle, $src, $deps = array(), $media
 	 */
 	public static function register_assets() {
 		self::register_style( 'wc-block-editor', plugins_url( 'build/editor.css', WGPB_PLUGIN_FILE ), array( 'wp-edit-blocks' ) );
-		self::register_style( 'wc-block-style', plugins_url( 'build/style.css', WGPB_PLUGIN_FILE ), array() );
+		self::register_style( 'wc-block-style', plugins_url( 'build/style.css', WGPB_PLUGIN_FILE ), array( 'wp-components' ) );
 
 		// Shared libraries and components across all blocks.
 		self::register_script( 'wc-blocks', plugins_url( 'build/blocks.js', WGPB_PLUGIN_FILE ), array(), false );