Add a label to Count to add context for screen reader users (https://github.com/woocommerce/woocommerce-admin/pull/102)

* 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

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

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;

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',