diff --git a/plugins/woocommerce-admin/client/analytics/components/report-chart/index.js b/plugins/woocommerce-admin/client/analytics/components/report-chart/index.js index b73ee63e21a..207c33cd1f2 100644 --- a/plugins/woocommerce-admin/client/analytics/components/report-chart/index.js +++ b/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 } diff --git a/plugins/woocommerce-admin/packages/components/CHANGELOG.md b/plugins/woocommerce-admin/packages/components/CHANGELOG.md index 56676509c61..478a3ce29fb 100644 --- a/plugins/woocommerce-admin/packages/components/CHANGELOG.md +++ b/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 `` returning N/A instead of zero. - Add new component: SearchListControl for displaying and filtering a selectable list of items. diff --git a/plugins/woocommerce-admin/packages/components/src/chart/d3chart/chart.js b/plugins/woocommerce-admin/packages/components/src/chart/d3chart/chart.js index cae6038923e..7c0da213dba 100644 --- a/plugins/woocommerce-admin/packages/components/src/chart/d3chart/chart.js +++ b/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, diff --git a/plugins/woocommerce-admin/packages/components/src/chart/d3chart/utils/bar-chart.js b/plugins/woocommerce-admin/packages/components/src/chart/d3chart/utils/bar-chart.js index be52ecbce38..47b78f692ef 100644 --- a/plugins/woocommerce-admin/packages/components/src/chart/d3chart/utils/bar-chart.js +++ b/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 => { diff --git a/plugins/woocommerce-admin/packages/components/src/chart/d3chart/utils/line-chart.js b/plugins/woocommerce-admin/packages/components/src/chart/d3chart/utils/line-chart.js index ecc0a803af2..6a1518461cc 100644 --- a/plugins/woocommerce-admin/packages/components/src/chart/d3chart/utils/line-chart.js +++ b/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 ) => { diff --git a/plugins/woocommerce-admin/packages/components/src/chart/index.js b/plugins/woocommerce-admin/packages/components/src/chart/index.js index d95a902214f..4886037aae3 100644 --- a/plugins/woocommerce-admin/packages/components/src/chart/index.js +++ b/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', diff --git a/plugins/woocommerce-admin/packages/date/src/index.js b/plugins/woocommerce-admin/packages/date/src/index.js index 3f739b4601f..e80a8308caf 100644 --- a/plugins/woocommerce-admin/packages/date/src/index.js +++ b/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,