From 08acc3e2f7c2fd1a26e724dcbb694ccd3e0dfb49 Mon Sep 17 00:00:00 2001 From: Chi-Hsuan Huang Date: Tue, 18 Jan 2022 18:10:23 +0800 Subject: [PATCH] Fix incorrect reader text generated for data points on charts table (https://github.com/woocommerce/woocommerce-admin/pull/8181) * Fix incorrect screen reader text generated for data points on charts table * Add changelog --- .../changelogs/fix-6255-screen-reader-text-on-chart-table | 4 ++++ .../woocommerce-admin/packages/components/CHANGELOG.md | 1 + .../components/src/chart/d3chart/utils/line-chart.js | 8 ++++++-- 3 files changed, 11 insertions(+), 2 deletions(-) create mode 100644 plugins/woocommerce-admin/changelogs/fix-6255-screen-reader-text-on-chart-table diff --git a/plugins/woocommerce-admin/changelogs/fix-6255-screen-reader-text-on-chart-table b/plugins/woocommerce-admin/changelogs/fix-6255-screen-reader-text-on-chart-table new file mode 100644 index 00000000000..73d5180e884 --- /dev/null +++ b/plugins/woocommerce-admin/changelogs/fix-6255-screen-reader-text-on-chart-table @@ -0,0 +1,4 @@ +Significance: patch +Type: Fix + +Fix incorrect screen reader text generated for data points on charts table. #8181 diff --git a/plugins/woocommerce-admin/packages/components/CHANGELOG.md b/plugins/woocommerce-admin/packages/components/CHANGELOG.md index 65542b56f6d..0ac2992c566 100644 --- a/plugins/woocommerce-admin/packages/components/CHANGELOG.md +++ b/plugins/woocommerce-admin/packages/components/CHANGELOG.md @@ -6,6 +6,7 @@ - Fix misaligned "Rows per page" dropdown. #8113 - Add `labelPositionToLeft` prop to the `OrderStatus` component. #8121 - Remove dev dependency `@woocommerce/wc-admin-settings`. #8057 +- Fix incorrect screen reader text generated for data points on charts table. #8181 # 8.1.1 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 4fe7d6e456d..1576a7727d0 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 @@ -93,7 +93,10 @@ export const getLineData = ( data, orderedKeys ) => visible: row.visible, label: row.label, values: data.map( ( d ) => ( { + // To have the same X-axis scale, we use the same dates for all lines. date: d.date, + // To have actual date for the screenReader, we need to use label date. + labelDate: d[ row.key ].labelDate, focus: row.focus, value: get( d, [ row.key, 'value' ], 0 ), visible: row.visible, @@ -144,7 +147,6 @@ export const drawLines = ( node, data, params, scales, formats, tooltip ) => { .attr( 'd', ( d ) => line( d.values ) ); const minDataPointSpacing = 36; - // eslint-disable-next-line no-unused-expressions width / params.uniqueDates.length > minDataPointSpacing && series @@ -173,7 +175,9 @@ export const drawLines = ( node, data, params, scales, formats, tooltip ) => { .attr( 'role', 'graphics-symbol' ) .attr( 'aria-label', ( d ) => { const label = formats.screenReaderFormat( - d.date instanceof Date ? d.date : moment( d.date ).toDate() + d.labelDate instanceof Date + ? d.labelDate + : moment( d.labelDate ).toDate() ); return `${ label } ${ tooltip.valueFormat( d.value ) }`; } )