Switch to a button-click navigation pattern for better keyboard support

woocommerce · Jun 24, 2019 · 2e30298 · 2e30298
1 parent 7437519
commit 2e30298
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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 );