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

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.3",
   "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 '.';
 
@@ -11,10 +17,14 @@ global.ResizeObserver = jest.fn().mockImplementation(() => ({
   disconnect: jest.fn(),
 }));
 
-// Capture MutationObserver callbacks so we can trigger them manually
-let mutationObserverCallback;
+// Capture MutationObserver callbacks so we can trigger them manually.
+// Multiple observers may be created per component; we collect all of them and
+// call each one so that no observer is silently skipped.
+let mutationObserverCallbacks = [];
+const mutationObserverCallback = mutations =>
+  mutationObserverCallbacks.forEach(cb => cb(mutations));
 global.MutationObserver = jest.fn().mockImplementation(callback => {
-  mutationObserverCallback = callback;
+  mutationObserverCallbacks.push(callback);
   return {
     observe: jest.fn(),
     disconnect: jest.fn(),
@@ -597,6 +607,7 @@ describe('CarbonChart', () => {
     let otherButton;
 
     beforeEach(() => {
+      mutationObserverCallbacks = [];
       jest.useFakeTimers();
       jest.spyOn(window, 'requestAnimationFrame').mockImplementation(cb => {
         cb(0);
@@ -895,4 +906,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

@@ -24,11 +24,13 @@ import {
 import styled from '@emotion/styled';
 import { transparentize } from 'polished';
 import {
+  Announce,
   DropdownDivider,
   DropdownMenuItem,
   ThemeInterface,
   ThemeContext,
   useIsInverse,
+  VisuallyHidden,
 } from 'react-magma-dom';
 import {
   FullscreenExitIcon,
@@ -38,6 +40,7 @@ import {
 } from 'react-magma-icons';
 
 import { useCarbonModalFocusManagement } from '../../hooks/useCarbonModalFocusManagement';
+// @ts-ignore
 import './carbon-charts.css';
 import {
   ChartFullscreenButton,
@@ -161,6 +164,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 =>
@@ -1057,7 +1077,9 @@ export const CarbonChart = React.forwardRef<HTMLDivElement, CarbonChartProps>(
 
     const [isTableOpen, setIsTableOpen] = React.useState(false);
     const [isFullscreen, setIsFullscreen] = React.useState(false);
+    const [legendAnnouncement, setLegendAnnouncement] = React.useState('');
     const lastTableTriggerRef = React.useRef<HTMLButtonElement | null>(null);
+    const legendAnnouncedRef = React.useRef(false);
 
     const mergedRef = React.useCallback(
       (node: HTMLDivElement | null) => {
@@ -1134,6 +1156,57 @@ 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) {
+            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,12 +1276,81 @@ 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]);
+
+    React.useEffect(() => {
+      const wrapper = internalRef.current;
+
+      if (!wrapper) return;
+
+      const observer = new MutationObserver(() => {
+        const allItems = wrapper.querySelectorAll<HTMLElement>(
+          '.legend-item:not(.additional)'
+        );
+
+        if (allItems.length <= 1) return;
+
+        const activeLabels: string[] = [];
+
+        allItems.forEach(el => {
+          const checkbox = el.querySelector<HTMLElement>('.checkbox');
+          const label = el.querySelector('p');
+
+          if (checkbox?.getAttribute('aria-checked') === 'true' && label) {
+            activeLabels.push(label.textContent?.trim() || '');
+          }
+        });
+
+        if (activeLabels.length === 1) {
+          if (!legendAnnouncedRef.current) {
+            legendAnnouncedRef.current = true;
+            setLegendAnnouncement(`Only ${activeLabels[0]} is selected`);
+          }
+        } else if (activeLabels.length === allItems.length) {
+          legendAnnouncedRef.current = false;
+          setLegendAnnouncement('All items selected');
+        } else {
+          legendAnnouncedRef.current = false;
+          setLegendAnnouncement('');
+        }
+      });
+
+      observer.observe(wrapper, {
+        subtree: true,
+        attributes: true,
+        attributeFilter: ['aria-checked'],
+      });
+
+      return () => observer.disconnect();
+    }, [type, dataSet]);
+
     const groupsLength = Object.keys(buildColors()).length;
 
     const showTable = chartToolbar?.showAsTable !== false;
 
     return (
       <FullscreenRoot ref={mergedRef} isInverse={isInverse} theme={theme}>
+        <VisuallyHidden>
+          <Announce>{legendAnnouncement}</Announce>
+        </VisuallyHidden>
         <CarbonChartWrapper
           data-testid={testId}
           isInverse={isInverse}

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,