@react-magma/charts 15.0.0-rc.1 → 15.0.0-rc.2

package/dist/components/ChartTable/chartToolbarI18n.d.ts

@@ -4,6 +4,7 @@ export interface ChartToolbarI18n {
     downloadAsJpg: string;
     downloadAsPng: string;
     exitFullScreen: string;
+    legendInstructions: string;
     makeFullScreen: string;
     moreOptionsAriaLabel: string;
     showAsTableTooltip: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-magma/charts",
-  "version": "15.0.0-rc.1",
+  "version": "15.0.0-rc.2",
   "license": "MIT",
   "repository": {
     "type": "git",

package/src/components/CarbonChart/CarbonChart.test.js

@@ -1,7 +1,13 @@
 import React from 'react';
 
 import { act, render, screen, fireEvent } from '@testing-library/react';
-import { ThemeContext, magma, DropdownMenuItem } from 'react-magma-dom';
+import {
+  ThemeContext,
+  magma,
+  DropdownMenuItem,
+  I18nContext,
+  defaultI18n,
+} from 'react-magma-dom';
 
 import { CarbonChart, CarbonChartType } from '.';
 
@@ -895,4 +901,131 @@ describe('CarbonChart', () => {
       ).toBeInTheDocument();
     });
   });
+
+  describe('Legend accessibility wrap', () => {
+    const testId = 'legend-a11y';
+
+    it('wraps the Carbon legend in a fieldset with a legend caption derived from the chart title', () => {
+      const { getByTestId } = render(
+        <CarbonChart
+          testId={testId}
+          dataSet={dataSet}
+          options={chartOptions}
+          type={CarbonChartType.bar}
+        />
+      );
+      const wrapper = getByTestId(testId);
+
+      const fieldset = wrapper.querySelector('.cds--cc--legend-fieldset');
+      expect(fieldset).not.toBeNull();
+      expect(fieldset.tagName).toBe('FIELDSET');
+      expect(fieldset.querySelector('.cds--cc--legend')).not.toBeNull();
+
+      const caption = fieldset.querySelector('legend');
+      expect(caption).not.toBeNull();
+      expect(caption.textContent).toBe(
+        `${chartOptions.title}. Checking these checkboxes will update the chart.`
+      );
+    });
+
+    it('uses ariaLabel for the legend caption when provided', () => {
+      const ariaLabel = 'Quarterly sales chart';
+      const { getByTestId } = render(
+        <CarbonChart
+          testId={testId}
+          ariaLabel={ariaLabel}
+          dataSet={dataSet}
+          options={chartOptions}
+          type={CarbonChartType.bar}
+        />
+      );
+      const wrapper = getByTestId(testId);
+
+      const caption = wrapper.querySelector(
+        '.cds--cc--legend-fieldset > legend'
+      );
+      expect(caption).not.toBeNull();
+      expect(caption.textContent).toBe(
+        `${ariaLabel}. Checking these checkboxes will update the chart.`
+      );
+    });
+
+    it('does not duplicate the fieldset when the mutation observer fires again with no DOM changes', () => {
+      const { getByTestId } = render(
+        <CarbonChart
+          testId={testId}
+          dataSet={dataSet}
+          options={chartOptions}
+          type={CarbonChartType.bar}
+        />
+      );
+      const wrapper = getByTestId(testId);
+
+      const before = wrapper.querySelectorAll('.cds--cc--legend-fieldset');
+      expect(before).toHaveLength(1);
+
+      act(() => {
+        mutationObserverCallback?.();
+        mutationObserverCallback?.();
+      });
+
+      const after = wrapper.querySelectorAll('.cds--cc--legend-fieldset');
+      expect(after).toHaveLength(1);
+      expect(after[0]).toBe(before[0]);
+    });
+
+    it('replaces Carbon\'s generic "Data groups" aria-label with semantic list roles on the legend and its items', () => {
+      const { getByTestId } = render(
+        <CarbonChart
+          testId={testId}
+          dataSet={dataSet}
+          options={chartOptions}
+          type={CarbonChartType.bar}
+        />
+      );
+      const wrapper = getByTestId(testId);
+
+      const legend = wrapper.querySelector('.cds--cc--legend');
+      expect(legend).not.toBeNull();
+      expect(legend.getAttribute('aria-label')).toBeNull();
+      expect(legend.getAttribute('role')).toBe('list');
+
+      const items = legend.querySelectorAll('.legend-item');
+      expect(items.length).toBeGreaterThan(0);
+      items.forEach(item => {
+        expect(item.getAttribute('role')).toBe('listitem');
+      });
+    });
+
+    it('uses translated legend instructions from I18nContext', () => {
+      const translatedInstructions =
+        'Marquer ces cases mettra à jour le graphique.';
+      const i18nValue = {
+        ...defaultI18n,
+        charts: {
+          ...defaultI18n.charts,
+          toolbar: { legendInstructions: translatedInstructions },
+        },
+      };
+
+      const { getByTestId } = render(
+        <I18nContext.Provider value={i18nValue}>
+          <CarbonChart
+            testId={testId}
+            dataSet={dataSet}
+            options={chartOptions}
+            type={CarbonChartType.bar}
+          />
+        </I18nContext.Provider>
+      );
+      const wrapper = getByTestId(testId);
+
+      const caption = wrapper.querySelector(
+        '.cds--cc--legend-fieldset > legend'
+      );
+      expect(caption.textContent).toBe(
+        `${chartOptions.title}. ${translatedInstructions}`
+      );
+    });
+  });
 });

package/src/components/CarbonChart/CarbonChart.tsx

@@ -38,6 +38,7 @@ import {
 } from 'react-magma-icons';
 
 import { useCarbonModalFocusManagement } from '../../hooks/useCarbonModalFocusManagement';
+// @ts-ignore
 import './carbon-charts.css';
 import {
   ChartFullscreenButton,
@@ -161,6 +162,23 @@ const CarbonChartWrapper = styled.div<{
   groupsLength: number;
   theme: ThemeInterface;
 }>`
+  .cds--cc--legend-fieldset {
+    border: 0;
+    margin: 0;
+    min-inline-size: 0;
+    padding: 0;
+  }
+
+  .cds--cc--legend-fieldset > legend {
+    clip: rect(1px, 1px, 1px, 1px);
+    height: 1px;
+    overflow: hidden;
+    position: absolute;
+    top: auto;
+    white-space: nowrap;
+    width: 1px;
+  }
+
   &:fullscreen,
   &:-webkit-full-screen {
     background: ${props =>
@@ -1134,6 +1152,55 @@ export const CarbonChart = React.forwardRef<HTMLDivElement, CarbonChartProps>(
     const chartTitle: string =
       (options as any).title || toolbarI18n.defaultTitle;
 
+    const legendLabel = `${ariaLabel || chartTitle}. ${toolbarI18n.legendInstructions}`;
+
+    React.useEffect(() => {
+      const container = internalRef.current;
+
+      if (!container) return;
+
+      const applyListSemantics = (legend: Element) => {
+        legend.removeAttribute('aria-label');
+        legend.setAttribute('role', 'list');
+        legend
+          .querySelectorAll('.legend-item')
+          .forEach(item => item.setAttribute('role', 'listitem'));
+      };
+
+      const wrapLegend = () => {
+        const legend = container.querySelector('.cds--cc--legend');
+
+        if (!legend) return;
+
+        applyListSemantics(legend);
+
+        const parent = legend.parentElement;
+
+        if (parent?.tagName === 'FIELDSET') {
+          const existingCaption = parent.querySelector('legend');
+
+          if (existingCaption) existingCaption.textContent = legendLabel;
+
+          return;
+        }
+
+        const fieldset = document.createElement('fieldset');
+        const caption = document.createElement('legend');
+
+        fieldset.className = 'cds--cc--legend-fieldset';
+        caption.textContent = legendLabel;
+        legend.before(fieldset);
+        fieldset.append(caption, legend);
+      };
+
+      wrapLegend();
+      const observer = new MutationObserver(wrapLegend);
+
+      observer.observe(container, { childList: true, subtree: true });
+
+      return () => observer.disconnect();
+    }, [legendLabel]);
+
     const handleModalDownloadCsv = React.useCallback(() => {
       downloadCsv(dataSet as Array<Record<string, unknown>>, chartTitle);
     }, [dataSet, chartTitle]);
@@ -1203,6 +1270,26 @@ export const CarbonChart = React.forwardRef<HTMLDivElement, CarbonChartProps>(
 
     const ChartType = allCharts[type] as any;
 
+    React.useEffect(() => {
+      const timer = setTimeout(() => {
+        if (internalRef.current) {
+          internalRef.current
+            .querySelectorAll<SVGGElement>('g[aria-label]')
+            .forEach(g => {
+              const role = g.getAttribute('role');
+
+              if (!role) {
+                g.setAttribute('role', 'img');
+              } else if (role === 'graphics-object group') {
+                g.setAttribute('role', 'graphics-object');
+              }
+            });
+        }
+      }, 0);
+
+      return () => clearTimeout(timer);
+    }, [type, dataSet]);
+
     const groupsLength = Object.keys(buildColors()).length;
 
     const showTable = chartToolbar?.showAsTable !== false;

package/src/components/ChartTable/chartToolbarI18n.ts

@@ -8,6 +8,7 @@ export interface ChartToolbarI18n {
   downloadAsJpg: string;
   downloadAsPng: string;
   exitFullScreen: string;
+  legendInstructions: string;
   makeFullScreen: string;
   moreOptionsAriaLabel: string;
   showAsTableTooltip: string;
@@ -20,6 +21,7 @@ const defaults: ChartToolbarI18n = {
   downloadAsJpg: 'Download as JPG',
   downloadAsPng: 'Download as PNG',
   exitFullScreen: 'Exit full screen',
+  legendInstructions: 'Checking these checkboxes will update the chart.',
   makeFullScreen: 'Make full screen',
   moreOptionsAriaLabel: 'More options',
   showAsTableTooltip: 'Show as table',
@@ -44,6 +46,8 @@ export function useChartToolbarI18n(): ChartToolbarI18n {
     downloadAsJpg: toolbar.downloadAsJpg ?? defaults.downloadAsJpg,
     downloadAsPng: toolbar.downloadAsPng ?? defaults.downloadAsPng,
     exitFullScreen: toolbar.exitFullScreen ?? defaults.exitFullScreen,
+    legendInstructions:
+      toolbar.legendInstructions ?? defaults.legendInstructions,
     makeFullScreen: toolbar.makeFullScreen ?? defaults.makeFullScreen,
     moreOptionsAriaLabel:
       toolbar.moreOptionsAriaLabel ?? defaults.moreOptionsAriaLabel,