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

package/dist/components/CarbonChart/CarbonChart.d.ts

@@ -56,6 +56,11 @@ export interface ChartToolbarConfig {
      * @default 2
      */
     tableHeaderLevel?: 1 | 2 | 3 | 4 | 5 | 6;
+    /**
+     * Heading level for the chart title.
+     * @default 2
+     */
+    titleLevel?: 1 | 2 | 3 | 4 | 5 | 6;
 }
 export interface CarbonChartProps extends React.HTMLAttributes<HTMLDivElement> {
     dataSet: Array<object>;

package/package.json

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

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

@@ -17,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(),
@@ -603,6 +607,7 @@ describe('CarbonChart', () => {
     let otherButton;
 
     beforeEach(() => {
+      mutationObserverCallbacks = [];
       jest.useFakeTimers();
       jest.spyOn(window, 'requestAnimationFrame').mockImplementation(cb => {
         cb(0);
@@ -848,6 +853,27 @@ describe('CarbonChart', () => {
       ).not.toBeInTheDocument();
     });
 
+    it('should render the chart title as h2 by default', () => {
+      render(<CarbonChart {...toolbarProps} />);
+
+      expect(
+        screen.getByRole('heading', { level: 2, name: chartOptions.title })
+      ).toBeInTheDocument();
+    });
+
+    it('should render the chart title at the level set by titleLevel', () => {
+      render(
+        <CarbonChart {...toolbarProps} chartToolbar={{ titleLevel: 3 }} />
+      );
+
+      expect(
+        screen.getByRole('heading', { level: 3, name: chartOptions.title })
+      ).toBeInTheDocument();
+      expect(
+        screen.queryByRole('heading', { level: 2, name: chartOptions.title })
+      ).not.toBeInTheDocument();
+    });
+
     it('should always render the more options dropdown with built-in download items', () => {
       render(<CarbonChart {...toolbarProps} />);
 

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,
@@ -103,6 +105,11 @@ export interface ChartToolbarConfig {
    * @default 2
    */
   tableHeaderLevel?: 1 | 2 | 3 | 4 | 5 | 6;
+  /**
+   * Heading level for the chart title.
+   * @default 2
+   */
+  titleLevel?: 1 | 2 | 3 | 4 | 5 | 6;
 }
 
 export interface CarbonChartProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -1022,7 +1029,11 @@ function CarbonChartToolbar({
       isInverse={isInverse}
       theme={theme}
     >
-      <ChartTitle isInverse={isInverse} theme={theme}>
+      <ChartTitle
+        as={`h${config.titleLevel ?? 2}` as keyof JSX.IntrinsicElements}
+        isInverse={isInverse}
+        theme={theme}
+      >
         {resolvedTitle}
       </ChartTitle>
       <ToolbarActions theme={theme}>
@@ -1075,7 +1086,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) => {
@@ -1179,7 +1192,9 @@ export const CarbonChart = React.forwardRef<HTMLDivElement, CarbonChartProps>(
         if (parent?.tagName === 'FIELDSET') {
           const existingCaption = parent.querySelector('legend');
 
-          if (existingCaption) existingCaption.textContent = legendLabel;
+          if (existingCaption && existingCaption.textContent !== legendLabel) {
+            existingCaption.textContent = legendLabel;
+          }
 
           return;
         }
@@ -1290,12 +1305,61 @@ export const CarbonChart = React.forwardRef<HTMLDivElement, CarbonChartProps>(
       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/CarbonChart/CarbonChartBar.stories.tsx

@@ -18,12 +18,19 @@ export default {
       control: { type: 'select' },
       options: Object.values(CarbonChartType),
     },
+    titleLevel: {
+      control: { type: 'select' },
+      options: [1, 2, 3, 4, 5, 6],
+      description: 'Heading level for the chart title (h1–h6).',
+    },
   },
 } as Meta;
 
-const Template: StoryFn<CarbonChartProps> = args => (
+const Template: StoryFn<
+  CarbonChartProps & { titleLevel?: 1 | 2 | 3 | 4 | 5 | 6 }
+> = ({ titleLevel, ...args }) => (
   <Card isInverse={args.isInverse} style={{ padding: '12px' }}>
-    <CarbonChart {...args} />
+    <CarbonChart {...args} chartToolbar={{ titleLevel }} />
   </Card>
 );