From e0d05ecfa0a9a43d643589749911e78831c4f42a Mon Sep 17 00:00:00 2001
From: Kelly Dwan <ryelle@users.noreply.github.com>
Date: Fri, 1 Jun 2018 10:39:48 -0400
Subject: [PATCH] Add a label to Count to add context for screen reader users
 (https://github.com/woocommerce/woocommerce-admin/pull/102)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Add a label “Total” to the count balloon

* Update README

* Switch to an aria-label, so that we can set a fully translatable string

* Update README to make label default clear
---
 .../client/components/count/README.md          |  2 +-
 .../client/components/count/index.js           | 18 ++++++++++++++++--
 .../client/layout/sidebar/index.js             |  5 +++--
 3 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/plugins/woocommerce-admin/client/components/count/README.md b/plugins/woocommerce-admin/client/components/count/README.md
index 75519d2198d..1a9175a896b 100644
--- a/plugins/woocommerce-admin/client/components/count/README.md
+++ b/plugins/woocommerce-admin/client/components/count/README.md
@@ -22,4 +22,4 @@ export default function myCount() {
 Name | Type | Default | Description
 --- | --- | --- | ---
 `count`* | `number` | none | Value of the number to be displayed
-
+`label` | `string` | "Total {props.count}" | A translated label with the number in context, used for screen readers
diff --git a/plugins/woocommerce-admin/client/components/count/index.js b/plugins/woocommerce-admin/client/components/count/index.js
index da473356b05..8c49c534645 100644
--- a/plugins/woocommerce-admin/client/components/count/index.js
+++ b/plugins/woocommerce-admin/client/components/count/index.js
@@ -2,18 +2,32 @@
 /**
  * External dependencies
  */
+import { __, sprintf } from '@wordpress/i18n';
 import PropTypes from 'prop-types';
 /**
  * Internal dependencies
  */
 import './style.scss';
 
-const Count = ( { count } ) => {
-	return <span className="woocommerce-count">{ count }</span>;
+const Count = ( { count, label } ) => {
+	if ( ! label ) {
+		label = sprintf( __( 'Total %d', 'woo-dash' ), count );
+	}
+
+	return (
+		<span className="woocommerce-count" aria-label={ label }>
+			{ count }
+		</span>
+	);
 };
 
 Count.propTypes = {
 	count: PropTypes.number.isRequired,
+	label: PropTypes.string,
+};
+
+Count.defaultProps = {
+	label: '',
 };
 
 export default Count;
diff --git a/plugins/woocommerce-admin/client/layout/sidebar/index.js b/plugins/woocommerce-admin/client/layout/sidebar/index.js
index aae51deeaf2..2d241e21574 100644
--- a/plugins/woocommerce-admin/client/layout/sidebar/index.js
+++ b/plugins/woocommerce-admin/client/layout/sidebar/index.js
@@ -2,7 +2,7 @@
 /**
  * External dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import classnames from 'classnames';
 import { Component, Fragment } from '@wordpress/element';
 import { IconButton, TabPanel } from '@wordpress/components';
@@ -32,7 +32,8 @@ class Sidebar extends Component {
 				name: 'orders',
 				title: (
 					<span>
-						{ __( 'Orders', 'woo-dash' ) } <Count count={ 1 } />
+						{ __( 'Orders', 'woo-dash' ) }{' '}
+						<Count count={ 1 } label={ sprintf( __( '%d Unfulfilled', 'woo-dash' ), 3 ) } />
 					</span>
 				),
 				className: 'woocommerce-layout__sidebar-tab',