Improve Reviews by Product accessibility (#861)

* Improve Reviews by Product accessibility * Make 'onClick' prop not required in <LoadMoreButton> * Wrap Reviews by Product editor block with <Disabled>
woocommerce · Aug 15, 2019 · cdb9d26 · cdb9d26
1 parent e8fef34
commit cdb9d26
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 13 deletions.
diff --git a/assets/js/base/components/load-more-button/index.js b/assets/js/base/components/load-more-button/index.js
@@ -2,24 +2,44 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { Fragment } from 'react';
 import PropTypes from 'prop-types';
 
 /**
  * Internal dependencies
  */
 import './style.scss';
 
-export const LoadMoreButton = ( { onClick } ) => (
-	<button
-		className="wc-block-load-more"
-		onClick={ onClick }
-	>
-		{ __( 'Load more', 'woo-gutenberg-products-block' ) }
-	</button>
-);
+export const LoadMoreButton = ( { onClick, label, screenReaderLabel } ) => {
+	const labelNode = ( screenReaderLabel && label !== screenReaderLabel ) ? (
+		<Fragment>
+			<span aria-hidden>
+				{ label }
+			</span>
+			<span className="screen-reader-text">
+				{ screenReaderLabel }
+			</span>
+		</Fragment>
+	) : label;
+
+	return (
+		<button
+			className="wc-block-load-more"
+			onClick={ onClick }
+		>
+			{ labelNode }
+		</button>
+	);
+};
 
 LoadMoreButton.propTypes = {
+	label: PropTypes.string,
 	onClick: PropTypes.func,
+	screenReaderLabel: PropTypes.string,
+};
+
+LoadMoreButton.defaultProps = {
+	label: __( 'Load more', 'woo-gutenberg-products-block' ),
 };
 
 export default LoadMoreButton;
diff --git a/assets/js/base/components/review-order-select/index.js b/assets/js/base/components/review-order-select/index.js
@@ -15,7 +15,12 @@ const ReviewOrderSelect = ( { componentId, onChange, readOnly, value } ) => {
 	return (
 		<p className="wc-block-review-order-select">
 			<label className="wc-block-review-order-select__label" htmlFor={ selectId }>
-				{ __( 'Order by', 'woo-gutenberg-products-block' ) }
+				<span aria-hidden>
+					{ __( 'Order by', 'woo-gutenberg-products-block' ) }
+				</span>
+				<span className="screen-reader-text">
+					{ __( 'Order reviews by', 'woo-gutenberg-products-block' ) }
+				</span>
 			</label>
 			<select // eslint-disable-line jsx-a11y/no-onchange
 				id={ selectId }

diff --git a/assets/js/blocks/reviews-by-product/edit.js b/assets/js/blocks/reviews-by-product/edit.js
@@ -8,6 +8,7 @@ import {
 } from '@wordpress/editor';
 import {
 	Button,
+	Disabled,
 	Notice,
 	PanelBody,
 	Placeholder,
@@ -292,9 +293,11 @@ const ReviewsByProductEditor = ( { attributes, debouncedSpeak, error, getProduct
 						} } />
 					</Placeholder>
 				) : (
-					<div className={ classes }>
-						<EditorBlock attributes={ attributes } />
-					</div>
+					<Disabled>
+						<div className={ classes }>
+							<EditorBlock attributes={ attributes } />
+						</div>
+					</Disabled>
 				) }
 			</Fragment>
 		);

diff --git a/assets/js/blocks/reviews-by-product/editor-block.js b/assets/js/blocks/reviews-by-product/editor-block.js
@@ -1,6 +1,7 @@
 /**
  * External dependencies
  */
+import { __ } from '@wordpress/i18n';
 import { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { debounce } from 'lodash';
@@ -85,7 +86,9 @@ class EditorBlock extends Component {
 					reviews={ reviews }
 				/>
 				{ ( attributes.showLoadMore && totalReviews > reviews.length ) && (
-					<LoadMoreButton />
+					<LoadMoreButton
+						screenReaderLabel={ __( 'Load more reviews', 'woo-gutenberg-products-block' ) }
+					/>
 				) }
 			</Fragment>
 		);

diff --git a/assets/js/blocks/reviews-by-product/frontend-block.js b/assets/js/blocks/reviews-by-product/frontend-block.js
@@ -1,8 +1,10 @@
 /**
  * External dependencies
  */
+import { __, _n, sprintf } from '@wordpress/i18n';
 import { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
+import { speak } from '@wordpress/a11y';
 
 /**
  * Internal dependencies
@@ -55,6 +57,9 @@ class FrontendBlock extends Component {
 			this.setState( { reviews, totalReviews } );
 		} ).catch( () => {
 			this.setState( { reviews: [] } );
+			speak(
+				__( 'There was an error loading the reviews.', 'woo-gutenberg-products-block' )
+			);
 		} );
 	}
 
@@ -76,8 +81,21 @@ class FrontendBlock extends Component {
 				reviews: reviews.filter( ( review ) => Object.keys( review ).length ).concat( newReviews ),
 				totalReviews: newTotalReviews,
 			} );
+			speak(
+				sprintf(
+					_n(
+						'%d review loaded.',
+						'%d reviews loaded.',
+						'woo-gutenberg-products-block'
+					),
+					newReviews.length
+				)
+			);
 		} ).catch( () => {
 			this.setState( { reviews: [] } );
+			speak(
+				__( 'There was an error loading the reviews.', 'woo-gutenberg-products-block' )
+			);
 		} );
 	}
 
@@ -101,8 +119,12 @@ class FrontendBlock extends Component {
 		};
 		getReviews( args ).then( ( { reviews, totalReviews: newTotalReviews } ) => {
 			this.setState( { reviews, totalReviews: newTotalReviews } );
+			speak( __( 'Reviews order updated.', 'woo-gutenberg-products-block' ) );
 		} ).catch( () => {
 			this.setState( { reviews: [] } );
+			speak(
+				__( 'There was an error loading the reviews.', 'woo-gutenberg-products-block' )
+			);
 		} );
 	}
 
@@ -127,6 +149,7 @@ class FrontendBlock extends Component {
 				{ ( attributes.showLoadMore && totalReviews > reviews.length ) && (
 					<LoadMoreButton
 						onClick={ this.appendReviews }
+						screenReaderLabel={ __( 'Load more reviews', 'woo-gutenberg-products-block' ) }
 					/>
 				) }
 			</Fragment>