Screen readers: read date instead of data keys in 'time-comparison' bar charts (https://github.com/woocommerce/woocommerce-admin/pull/1586)

* Screen readers: read date instead of data keys in 'time-comparison' bar charts

* Make previous period labels more verbose

* Revert "Make previous period labels more verbose"

This reverts commit 34d13deaa982425ca2cba76dacfd2c89c96f06c0.

* Improve isSameDay check

* Add date to hour tooltip and improve screen reader label

* Add CHANGELOG message

plugins/woocommerce-admin/client/analytics/components/report-chart/index.js

@@ -120,6 +120,7 @@ export class ReportChart extends Component {
 				mode={ mode }
 				path={ path }
 				query={ query }
+				screenReaderFormat={ formats.screenReaderFormat }
 				showHeaderControls={ showHeaderControls }
 				title={ selectedChart.label }
 				tooltipLabelFormat={ formats.tooltipLabelFormat }

plugins/woocommerce-admin/packages/components/CHANGELOG.md

@@ -3,6 +3,7 @@
 - Chart component: remove d3-array dependency.
 - Chart component: fix display when there is no data.
 - Chart component: change chart type query parameter to `chartType`.
+- Chart component: add `screenReaderFormat` prop that will be used to format dates for screen reader labels.
 - Bug fix for `<StockReportTable />` returning N/A instead of zero.
 - Add new component: SearchListControl for displaying and filtering a selectable list of items.
 

plugins/woocommerce-admin/packages/components/src/chart/d3chart/chart.js

@@ -44,9 +44,10 @@ class D3Chart extends Component {
 	}
 
 	getFormatParams() {
-		const { xFormat, x2Format, yFormat } = this.props;
+		const { screenReaderFormat, xFormat, x2Format, yFormat } = this.props;
 
 		return {
+			screenReaderFormat: getFormatter( screenReaderFormat, d3TimeFormat ),
 			xFormat: getFormatter( xFormat, d3TimeFormat ),
 			x2Format: getFormatter( x2Format, d3TimeFormat ),
 			yFormat: getFormatter( yFormat ),
@@ -237,6 +238,10 @@ D3Chart.propTypes = {
 	 * ARIA properties.
 	 */
 	mode: PropTypes.oneOf( [ 'item-comparison', 'time-comparison' ] ),
+	/**
+	 * A datetime formatting string or overriding function to format the screen reader labels.
+	 */
+	screenReaderFormat: PropTypes.oneOfType( [ PropTypes.string, PropTypes.func ] ),
 	/**
 	 * The list of labels for this chart.
 	 */
@@ -291,8 +296,9 @@ D3Chart.defaultProps = {
 		top: 20,
 	},
 	mode: 'time-comparison',
+	screenReaderFormat: '%B %-d, %Y',
 	tooltipPosition: 'over',
-	tooltipLabelFormat: '%B %d, %Y',
+	tooltipLabelFormat: '%B %-d, %Y',
 	tooltipValueFormat: ',',
 	chartType: 'line',
 	width: 600,

plugins/woocommerce-admin/packages/components/src/chart/d3chart/utils/bar-chart.js

@@ -23,7 +23,7 @@ export const drawBars = ( node, data, params, scales, formats, tooltip ) => {
 			'aria-label',
 			d =>
 				params.mode === 'item-comparison'
-					? tooltip.labelFormat( d.date instanceof Date ? d.date : moment( d.date ).toDate() )
+					? formats.screenReaderFormat( d.date instanceof Date ? d.date : moment( d.date ).toDate() )
 					: null
 		);
 
@@ -63,7 +63,15 @@ export const drawBars = ( node, data, params, scales, formats, tooltip ) => {
 		.attr( 'pointer-events', 'none' )
 		.attr( 'tabindex', '0' )
 		.attr( 'aria-label', d => {
-			const label = params.mode === 'time-comparison' && d.label ? d.label : d.key;
+			let label = d.key;
+			if ( params.mode === 'time-comparison' ) {
+				if ( d.label ) {
+					label = d.label;
+				} else {
+					const dayData = data.find( e => e.date === d.date );
+					label = formats.screenReaderFormat( moment( dayData[ d.key ].labelDate ).toDate() );
+				}
+			}
 			return `${ label } ${ tooltip.valueFormat( d.value ) }`;
 		} )
 		.style( 'opacity', d => {

plugins/woocommerce-admin/packages/components/src/chart/d3chart/utils/line-chart.js

@@ -140,7 +140,7 @@ export const drawLines = ( node, data, params, scales, formats, tooltip ) => {
 			.attr( 'aria-label', d => {
 				const label = d.label
 					? d.label
-					: tooltip.labelFormat( d.date instanceof Date ? d.date : moment( d.date ).toDate() );
+					: formats.screenReaderFormat( d.date instanceof Date ? d.date : moment( d.date ).toDate() );
 				return `${ label } ${ tooltip.valueFormat( d.value ) }`;
 			} )
 			.on( 'focus', ( d, i, nodes ) => {

plugins/woocommerce-admin/packages/components/src/chart/index.js

@@ -275,6 +275,7 @@ class Chart extends Component {
 			isViewportLarge,
 			itemsLabel,
 			mode,
+			screenReaderFormat,
 			showHeaderControls,
 			title,
 			tooltipLabelFormat,
@@ -389,6 +390,7 @@ class Chart extends Component {
 									margin={ margin }
 									mode={ mode }
 									orderedKeys={ orderedKeys }
+									screenReaderFormat={ screenReaderFormat }
 									tooltipLabelFormat={ tooltipLabelFormat }
 									tooltipValueFormat={ tooltipValueFormat }
 									tooltipPosition={ isViewportLarge ? 'over' : 'below' }
@@ -475,6 +477,10 @@ Chart.propTypes = {
 	 * depending on the viewport width and the mode.
 	 */
 	legendPosition: PropTypes.oneOf( [ 'bottom', 'side', 'top' ] ),
+	/**
+	 * A datetime formatting string or overriding function to format the screen reader labels.
+	 */
+	screenReaderFormat: PropTypes.oneOfType( [ PropTypes.string, PropTypes.func ] ),
 	/**
 	 * Wether header UI controls must be displayed.
 	 */
@@ -522,8 +528,9 @@ Chart.defaultProps = {
 	interval: 'day',
 	isRequesting: false,
 	mode: 'time-comparison',
+	screenReaderFormat: '%B %-d, %Y',
 	showHeaderControls: true,
-	tooltipLabelFormat: '%B %d, %Y',
+	tooltipLabelFormat: '%B %-d, %Y',
 	tooltipValueFormat: ',',
 	xFormat: '%d',
 	x2Format: '%b %Y',

plugins/woocommerce-admin/packages/date/src/index.js

@@ -102,9 +102,9 @@ export function toMoment( format, str ) {
  * @return {string} - text value for the supplied date range
  */
 export function getRangeLabel( after, before ) {
-	const isSameDay = after.isSame( before, 'day' );
 	const isSameYear = after.year() === before.year();
 	const isSameMonth = isSameYear && after.month() === before.month();
+	const isSameDay = isSameYear && isSameMonth && after.isSame( before, 'day' );
 	const fullDateFormat = __( 'MMM D, YYYY', 'wc-admin' );
 	const monthDayFormat = __( 'MMM D', 'wc-admin' );
 
@@ -445,6 +445,7 @@ export const defaultTableDateFormat = 'm/d/Y';
  * @return {String} Current interval.
  */
 export function getDateFormatsForInterval( interval, ticks = 0 ) {
+	let screenReaderFormat = '%B %-d, %Y';
 	let tooltipLabelFormat = '%B %-d, %Y';
 	let xFormat = '%Y-%m-%d';
 	let x2Format = '%b %Y';
@@ -452,7 +453,8 @@ export function getDateFormatsForInterval( interval, ticks = 0 ) {
 
 	switch ( interval ) {
 		case 'hour':
-			tooltipLabelFormat = '%_I%p';
+			screenReaderFormat = '%_I%p %B %-d, %Y';
+			tooltipLabelFormat = '%_I%p %b %-d, %Y';
 			xFormat = '%_I%p';
 			x2Format = '%b %-d, %Y';
 			tableFormat = 'h A';
@@ -473,21 +475,25 @@ export function getDateFormatsForInterval( interval, ticks = 0 ) {
 				xFormat = '%b';
 				x2Format = '%Y';
 			}
+			screenReaderFormat = __( 'Week of %B %-d, %Y', 'wc-admin' );
 			tooltipLabelFormat = __( 'Week of %B %-d, %Y', 'wc-admin' );
 			break;
 		case 'quarter':
 		case 'month':
+			screenReaderFormat = '%B %Y';
 			tooltipLabelFormat = '%B %Y';
 			xFormat = '%b';
 			x2Format = '%Y';
 			break;
 		case 'year':
+			screenReaderFormat = '%Y';
 			tooltipLabelFormat = '%Y';
 			xFormat = '%Y';
 			break;
 	}
 
 	return {
+		screenReaderFormat,
 		tooltipLabelFormat,
 		xFormat,
 		x2Format,