@react-magma/charts 13.1.1-next.0 → 13.2.0-next.0

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/dist/components/CarbonChart/CarbonChartBar.stories.d.ts

@@ -2,7 +2,9 @@ import { CarbonChartProps, CarbonChartType } from '.';
 declare const _default: import("@storybook/csf").ComponentAnnotations<import("@storybook/react/types-6-0").ReactFramework, import("@storybook/react/types-6-0").Args>;
 export default _default;
 export declare const VerticalSimpleBarDiscrete: {
-    render: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;
+    render: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps & {
+        titleLevel?: 2 | 1 | 3 | 4 | 5 | 6 | undefined;
+    }>;
     args: {
         isInverse: boolean;
         type: CarbonChartType;
@@ -30,7 +32,9 @@ export declare const VerticalSimpleBarDiscrete: {
     };
 };
 export declare const VerticalSimpleBarTimeSeries: {
-    render: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;
+    render: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps & {
+        titleLevel?: 2 | 1 | 3 | 4 | 5 | 6 | undefined;
+    }>;
     args: {
         isInverse: boolean;
         type: CarbonChartType;
@@ -55,7 +59,9 @@ export declare const VerticalSimpleBarTimeSeries: {
     };
 };
 export declare const VerticalSimpleBarTimeSeriesDenseDataTurkish: {
-    render: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;
+    render: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps & {
+        titleLevel?: 2 | 1 | 3 | 4 | 5 | 6 | undefined;
+    }>;
     args: {
         isInverse: boolean;
         type: CarbonChartType;
@@ -86,7 +92,9 @@ export declare const VerticalSimpleBarTimeSeriesDenseDataTurkish: {
     };
 };
 export declare const VerticalSimpleBarEmptyState: {
-    render: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;
+    render: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps & {
+        titleLevel?: 2 | 1 | 3 | 4 | 5 | 6 | undefined;
+    }>;
     args: {
         isInverse: boolean;
         type: CarbonChartType;
@@ -104,7 +112,9 @@ export declare const VerticalSimpleBarEmptyState: {
     };
 };
 export declare const VerticalSimpleBarSkeleton: {
-    render: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;
+    render: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps & {
+        titleLevel?: 2 | 1 | 3 | 4 | 5 | 6 | undefined;
+    }>;
     args: {
         isInverse: boolean;
         type: CarbonChartType;
@@ -125,7 +135,9 @@ export declare const VerticalSimpleBarSkeleton: {
     };
 };
 export declare const HorizontalSimpleBarTimeSeries: {
-    render: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;
+    render: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps & {
+        titleLevel?: 2 | 1 | 3 | 4 | 5 | 6 | undefined;
+    }>;
     args: {
         isInverse: boolean;
         type: CarbonChartType;
@@ -150,7 +162,9 @@ export declare const HorizontalSimpleBarTimeSeries: {
     };
 };
 export declare const HorizontalSimpleBarDiscrete: {
-    render: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;
+    render: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps & {
+        titleLevel?: 2 | 1 | 3 | 4 | 5 | 6 | undefined;
+    }>;
     args: {
         isInverse: boolean;
         type: CarbonChartType;
@@ -174,7 +188,9 @@ export declare const HorizontalSimpleBarDiscrete: {
     };
 };
 export declare const HorizontalSimpleBarSkeleton: {
-    render: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;
+    render: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps & {
+        titleLevel?: 2 | 1 | 3 | 4 | 5 | 6 | undefined;
+    }>;
     args: {
         isInverse: boolean;
         type: CarbonChartType;
@@ -195,7 +211,9 @@ export declare const HorizontalSimpleBarSkeleton: {
     };
 };
 export declare const HorizontalSimpleBarEmptyState: {
-    render: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;
+    render: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps & {
+        titleLevel?: 2 | 1 | 3 | 4 | 5 | 6 | undefined;
+    }>;
     args: {
         isInverse: boolean;
         type: CarbonChartType;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-magma/charts",
-  "version": "13.1.1-next.0",
+  "version": "13.2.0-next.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -47,7 +47,7 @@
     "identity-obj-proxy": "^3.0.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-magma-dom": "^4.13.1-next.0",
+    "react-magma-dom": "^4.14.0",
     "react-magma-icons": "^3.2.5",
     "rollup": "^4.52.4",
     "rollup-plugin-postcss": "^4.0.2"
@@ -57,7 +57,7 @@
     "@emotion/styled": "^11.13.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-magma-dom": "^4.13.1-next.0",
+    "react-magma-dom": "^4.14.0",
     "react-magma-icons": "^3.2.5"
   },
   "engines": {

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

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import { act, render, screen, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { ThemeContext, magma, DropdownMenuItem } from 'react-magma-dom';
 
 import { CarbonChart, CarbonChartType } from '.';
@@ -588,6 +589,32 @@ describe('CarbonChart', () => {
         }
       );
     });
+
+    it('should move focus back after closing the More options dropdown and chart toolbar', () => {
+      const testId = 'modal-footer-border-test';
+      const { getByTestId, getByText } = render(
+        <ThemeContext.Provider value={magma}>
+          <CarbonChart
+            testId={testId}
+            dataSet={dataSet}
+            options={chartOptions}
+            type={CarbonChartType.bar}
+            isInverse={false}
+            chartToolbar={{}}
+          />
+        </ThemeContext.Provider>
+      );
+
+      const moreOptionsButton = getByTestId('chart-more-options-button');
+      userEvent.click(moreOptionsButton);
+
+      expect(getByText('Download as CSV')).toBeVisible();
+      expect(getByText('Download as PNG')).toBeVisible();
+      expect(getByText('Download as JPG')).toBeVisible();
+
+      userEvent.keyboard('{esc}');
+      expect(moreOptionsButton).toHaveFocus();
+    });
   });
 
   describe('Modal Focus Management', () => {
@@ -842,6 +869,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} />);
 
@@ -895,4 +943,141 @@ describe('CarbonChart', () => {
       ).toBeInTheDocument();
     });
   });
+
+  describe('dot keyboard accessibility', () => {
+    let rafCallbacks;
+
+    beforeEach(() => {
+      rafCallbacks = [];
+      jest.spyOn(window, 'requestAnimationFrame').mockImplementation(cb => {
+        rafCallbacks.push(cb);
+        return rafCallbacks.length - 1;
+      });
+    });
+
+    afterEach(() => {
+      window.requestAnimationFrame.mockRestore();
+      rafCallbacks = [];
+    });
+
+    function renderChart() {
+      const { getByTestId } = render(
+        <CarbonChart
+          testId="dot-tab-test"
+          dataSet={dataSet}
+          options={chartOptions}
+          type={CarbonChartType.scatter}
+        />
+      );
+      return getByTestId('dot-tab-test');
+    }
+
+    function addDot(wrapper) {
+      const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+      const dot = document.createElementNS(
+        'http://www.w3.org/2000/svg',
+        'circle'
+      );
+      dot.classList.add('dot');
+      svg.appendChild(dot);
+      wrapper.appendChild(svg);
+      return dot;
+    }
+
+    describe('tabbing', () => {
+      it('should stamp tabindex="0" on circle.dot elements so they are reachable by Tab', () => {
+        const wrapper = renderChart();
+        const dot = addDot(wrapper);
+
+        // The last captured RAF is the dots-stamping callback (no ariaLabel provided)
+        act(() => rafCallbacks[rafCallbacks.length - 1](0));
+
+        expect(dot).toHaveAttribute('tabindex', '0');
+      });
+
+      it('should not overwrite an existing tabindex on circle.dot', () => {
+        const wrapper = renderChart();
+        const dot = addDot(wrapper);
+        dot.setAttribute('tabindex', '-1');
+
+        act(() => rafCallbacks[rafCallbacks.length - 1](0));
+
+        expect(dot).toHaveAttribute('tabindex', '-1');
+      });
+    });
+
+    describe('focus on dot content', () => {
+      it('should set opacity to 1 when a dot receives focus', () => {
+        const wrapper = renderChart();
+        const dot = addDot(wrapper);
+
+        fireEvent.focusIn(dot);
+
+        expect(dot.style.opacity).toBe('1');
+      });
+
+      it('should dispatch mouseover on dot focusin to reveal tooltip data', () => {
+        const wrapper = renderChart();
+        const dot = addDot(wrapper);
+
+        const mouseoverSpy = jest.fn();
+        dot.addEventListener('mouseover', mouseoverSpy);
+
+        fireEvent.focusIn(dot);
+
+        expect(mouseoverSpy).toHaveBeenCalledTimes(1);
+      });
+
+      it('should dispatch mousemove on dot focusin', () => {
+        const wrapper = renderChart();
+        const dot = addDot(wrapper);
+
+        const mousemoveSpy = jest.fn();
+        dot.addEventListener('mousemove', mousemoveSpy);
+
+        fireEvent.focusIn(dot);
+
+        expect(mousemoveSpy).toHaveBeenCalledTimes(1);
+      });
+
+      it('should not change opacity for non-dot circle elements on focusin', () => {
+        const wrapper = renderChart();
+        const nonDot = document.createElementNS(
+          'http://www.w3.org/2000/svg',
+          'circle'
+        );
+        wrapper.appendChild(nonDot);
+
+        fireEvent.focusIn(nonDot);
+
+        expect(nonDot.style.opacity).toBe('');
+      });
+    });
+
+    describe('data visibility', () => {
+      it('should reset dot opacity when dot loses focus', () => {
+        const wrapper = renderChart();
+        const dot = addDot(wrapper);
+
+        fireEvent.focusIn(dot);
+        expect(dot.style.opacity).toBe('1');
+
+        fireEvent.focusOut(dot);
+        expect(dot.style.opacity).toBe('');
+      });
+
+      it('should dispatch mouseout on dot focusout to hide tooltip', () => {
+        const wrapper = renderChart();
+        const dot = addDot(wrapper);
+
+        const mouseoutSpy = jest.fn();
+        dot.addEventListener('mouseout', mouseoutSpy);
+
+        fireEvent.focusIn(dot);
+        fireEvent.focusOut(dot);
+
+        expect(mouseoutSpy).toHaveBeenCalledTimes(1);
+      });
+    });
+  });
 });