MWPW-159299 Add chart role and dynamic aria labels (adobecom#3404)

* MWPW-159299 Add chart role

* Update echarts library and dynamically set aria text

* Update aria settings

Author: Brandon32

libs/blocks/chart/chart.js

@@ -8,7 +8,6 @@ import {
   formatExcelDate,
 } from './utils.js';
 import getTheme from './chartLightTheme.js';
-import { replaceKey } from '../../features/placeholders.js';
 
 export const SMALL = 'small';
 export const MEDIUM = 'medium';
@@ -192,12 +191,13 @@ export const tooltipFormatter = (params, units) => {
   return tooltip;
 };
 
-export const barSeriesOptions = (chartType, hasOverride, firstDataset, colors, size, yUnits) => {
+export const barSeriesOptions = (chartType, hasOverride, dimensions, colors, size, yUnits) => {
   const isLarge = size === LARGE;
   const isBar = chartType === 'bar';
 
-  return firstDataset.map((value, index) => ({
+  return dimensions.map((value, index) => ({
     type: 'bar',
+    name: value,
     label: {
       show: isBar,
       formatter: `{@[${index + 1}]}${yUnits[0]}`,
@@ -220,11 +220,12 @@ export const barSeriesOptions = (chartType, hasOverride, firstDataset, colors, s
   }));
 };
 
-export const lineSeriesOptions = (series, firstDataset, xUnit, yUnits) => {
+export const lineSeriesOptions = (series, dimensions, xUnit, yUnits) => {
   const marks = processMarkData(series, xUnit);
 
-  return firstDataset.map((value, index) => {
+  return dimensions.map((value, index) => {
     let options = {
+      name: value,
       type: 'line',
       symbol: 'none',
       lineStyle: { width: 3 },
@@ -239,9 +240,10 @@ export const lineSeriesOptions = (series, firstDataset, xUnit, yUnits) => {
   });
 };
 
-export const areaSeriesOptions = (firstDataset) => (
-  firstDataset.map(() => ({
+export const areaSeriesOptions = (dimensions) => (
+  dimensions.map((value) => ({
     type: 'line',
+    name: value,
     symbol: 'none',
     areaStyle: { opacity: 1 },
     stack: 'area',
@@ -351,7 +353,7 @@ export const getChartOptions = ({
 }) => {
   const hasOverride = headers ? hasPropertyCI(headers, 'color') : false;
   const source = dataset?.source;
-  const firstDataset = source?.[1]?.slice() || [];
+  const dimensions = source?.[0]?.slice() || [];
   const isBar = chartType === 'bar';
   const isColumn = chartType === 'column';
   const isPie = chartType === 'pie';
@@ -365,7 +367,7 @@ export const getChartOptions = ({
     yUnits = units.length > 1 ? units.slice(1) : [''];
   }
 
-  firstDataset.shift();
+  dimensions.shift();
 
   let bottomGrid = 90;
 
@@ -387,6 +389,21 @@ export const getChartOptions = ({
       inactiveColor: '#6C6C6C',
       type: 'scroll',
     },
+    aria: {
+      enabled: true,
+      label: {
+        general: { withTitle: 'This is a chart' },
+        series: {
+          maxCount: 1,
+          multiple:
+          {
+            prefix: '. It consists of {seriesCount} series count ',
+            withName: `with series ${dimensions.join(', ')}. `,
+          },
+        },
+        data: { separator: { middle: `${yUnits}, `, end: yUnits } },
+      },
+    },
     title: isDonut ? donutTitleOptions(source, series, yUnits[0], size) : {},
     tooltip: {
       show: true,
@@ -431,10 +448,10 @@ export const getChartOptions = ({
     ))(),
     series: (() => {
       if (isBar || isColumn) {
-        return barSeriesOptions(chartType, hasOverride, firstDataset, colors, size, yUnits);
+        return barSeriesOptions(chartType, hasOverride, dimensions, colors, size, yUnits);
       }
-      if (chartType === 'line') return lineSeriesOptions(series, firstDataset, xUnit, yUnits);
-      if (chartType === 'area') return areaSeriesOptions(firstDataset);
+      if (chartType === 'line') return lineSeriesOptions(series, dimensions, xUnit, yUnits);
+      if (chartType === 'area') return areaSeriesOptions(dimensions);
       if (isDonut) return donutSeriesOptions(size);
       if (isPie) return pieSeriesOptions(size);
       return [];
@@ -464,6 +481,7 @@ const initChart = ({
   const chart = window.echarts?.init(chartWrapper, themeName, { renderer: 'svg' });
 
   chartWrapper.tabIndex = 0;
+  chartWrapper.role = 'img';
   chart.setOption(chartOptions);
 
   if (chartType === 'donut') {
@@ -642,6 +660,8 @@ const init = (el) => {
         </svg>`;
 
         chartWrapper.innerHTML = html;
+        chartWrapper.role = 'img';
+        chartWrapper.ariaLabel = `${number} ${data?.subtitle}`;
       })
       // eslint-disable-next-line no-console
       .catch((error) => console.log('Error loading script:', error));
@@ -692,8 +712,6 @@ const init = (el) => {
         observer.observe(el);
       }
 
-      const title = children[0]?.textContent.trim() || children[1]?.textContent.trim();
-      chartWrapper.setAttribute('aria-label', `${await replaceKey(`${chartType}-chart`, config)}: ${title}`);
       /* c8 ignore next 4 */
       window.addEventListener('resize', throttle(
         1000,

libs/deps/echarts.common.min.js

@@ -17,7 +17,8 @@
     "lint:css": "stylelint 'libs/blocks/**/*.css' 'libs/styles/*.css'",
     "build:htm-preact": "microbundle ./build/htm-preact.js -o ./libs/deps/htm-preact.js -f modern --no-sourcemap --target web; mv ./libs/deps/htm-preact.modern.mjs ./libs/deps/htm-preact.js",
     "build:preact-debug": "microbundle ./build/htm-preact-debug.js -o ./libs/deps/htm-preact-debug.js -f modern --no-sourcemap --target web; mv ./libs/deps/htm-preact-debug.modern.mjs ./libs/deps/htm-preact-debug.js",
-    "build:gnav-profile": "microbundle ./libs/blocks/global-navigation/blocks/profile/profile-wrapper.js -o ./build/profile-wrapper-build.js -f umd --external none --no-sourcemap --target web; mv ./build/profile-wrapper-build.umd.js ./build/profile.js"
+    "build:gnav-profile": "microbundle ./libs/blocks/global-navigation/blocks/profile/profile-wrapper.js -o ./build/profile-wrapper-build.js -f umd --external none --no-sourcemap --target web; mv ./build/profile-wrapper-build.umd.js ./build/profile.js",
+    "build:echarts": "cp node_modules/echarts/dist/echarts.common.min.js libs/deps/echarts.common.min.js"
   },
   "repository": {
     "type": "git",
@@ -50,6 +51,7 @@
     "chai": "^5.1.1",
     "chalk": "^4.1.2",
     "commander": "^12.1.0",
+    "echarts": "^5.5.1",
     "eslint": "8.11.0",
     "eslint-config-airbnb-base": "15.0.0",
     "eslint-nibble": "^8.1.0",

package-lock.json

@@ -369,12 +369,14 @@ describe('chart', () => {
     expect(Array.isArray(areaSeriesOptions(firstDataset))).to.be.true;
     const expected = [
       {
+        name: 1,
         areaStyle: { opacity: 1 },
         stack: 'area',
         symbol: 'none',
         type: 'line',
       },
       {
+        name: 2,
         areaStyle: { opacity: 1 },
         stack: 'area',
         symbol: 'none',
@@ -510,6 +512,7 @@ describe('chart', () => {
           fontSize: 14,
         },
         colorBy: 'series',
+        name: 100,
         showBackground: true,
         backgroundStyle: {
           color: '#EA3829',
@@ -532,6 +535,7 @@ describe('chart', () => {
           fontSize: 14,
         },
         colorBy: 'series',
+        name: 156,
         showBackground: true,
         backgroundStyle: {
           color: '#F48411',
@@ -555,6 +559,7 @@ describe('chart', () => {
     const expected = [
       {
         type: 'line',
+        name: 100,
         symbol: 'none',
         lineStyle: { width: 3 },
         yAxisIndex: 0,
@@ -598,12 +603,14 @@ describe('chart', () => {
       },
       {
         type: 'line',
+        name: 156,
         symbol: 'none',
         lineStyle: { width: 3 },
         yAxisIndex: 0,
       },
       {
         type: 'line',
+        name: 160,
         symbol: 'none',
         lineStyle: { width: 3 },
         yAxisIndex: 0,
@@ -704,6 +711,9 @@ describe('chart', () => {
     init(el);
     const svg = await waitForElement('svg');
     expect(svg).to.exist;
+    const chartWrapper = await waitForElement('.chart-wrapper');
+    expect(chartWrapper.getAttribute('role')).to.equal('img');
+    expect(chartWrapper.getAttribute('aria-label')).to.exist;
   });
 
   it('getOversizedNumberSize returns maximum size for 1 character', () => {
@@ -759,5 +769,9 @@ describe('chart', () => {
     init(el);
     const subheading = await waitForElement('.subheading');
     expect(subheading).to.exist;
+    const chartWrapper = await waitForElement('.chart-wrapper');
+    expect(chartWrapper).to.exist;
+    expect(chartWrapper.getAttribute('role')).to.equal('img');
+    expect(chartWrapper.getAttribute('aria-label')).to.contain('This is a chart');
   });
 });