@react-magma/charts 14.0.0-rc.3 → 14.0.0-rc.4

package/dist/hooks/useCarbonModalFocusManagement.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare function useCarbonModalFocusManagement(wrapperRef: React.RefObject<HTMLDivElement>): void;

package/package.json

@@ -1,7 +1,12 @@
 {
   "name": "@react-magma/charts",
-  "version": "14.0.0-rc.3",
+  "version": "14.0.0-rc.4",
   "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/cengage/react-magma.git",
+    "directory": "packages/charts"
+  },
   "exports": {
     ".": {
       "import": "./dist/charts.modern.module.js",
@@ -45,7 +50,7 @@
     "identity-obj-proxy": "3.0.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "react-magma-dom": "^5.1.0-rc.47",
+    "react-magma-dom": "^5.1.0-rc.70",
     "react-magma-icons": "^3.2.4",
     "rollup": "^4.52.4",
     "rollup-plugin-postcss": "^4.0.2"
@@ -59,8 +64,8 @@
     "react-magma-icons": "^3.2.4"
   },
   "engines": {
-    "node": ">=14.15.0",
-    "npm": ">=7.3.0"
+    "node": ">=22.14.0",
+    "npm": ">=11.11.0"
   },
   "publishConfig": {
     "access": "public"

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

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { render } from '@testing-library/react';
+import { act, render } from '@testing-library/react';
 import { ThemeContext, magma } from 'react-magma-dom';
 
 import { CarbonChart, CarbonChartType } from '.';
@@ -11,6 +11,16 @@ global.ResizeObserver = jest.fn().mockImplementation(() => ({
   disconnect: jest.fn(),
 }));
 
+// Capture MutationObserver callbacks so we can trigger them manually
+let mutationObserverCallback;
+global.MutationObserver = jest.fn().mockImplementation(callback => {
+  mutationObserverCallback = callback;
+  return {
+    observe: jest.fn(),
+    disconnect: jest.fn(),
+  };
+});
+
 const dataSet = [
   {
     group: 'Qty',
@@ -579,4 +589,169 @@ describe('CarbonChart', () => {
       );
     });
   });
+
+  describe('Modal Focus Management', () => {
+    let wrapper;
+    let modal;
+    let closeButton;
+    let otherButton;
+
+    beforeEach(() => {
+      jest.useFakeTimers();
+      jest.spyOn(window, 'requestAnimationFrame').mockImplementation(cb => {
+        cb(0);
+        return 0;
+      });
+      const testId = 'focus-mgmt-test';
+      const { getByTestId } = render(
+        <CarbonChart
+          testId={testId}
+          dataSet={dataSet}
+          options={chartOptions}
+          type={CarbonChartType.bar}
+        />
+      );
+
+      wrapper = getByTestId(testId);
+
+      // Manually create Carbon modal DOM inside the wrapper
+      modal = document.createElement('div');
+      modal.className = 'cds--modal';
+
+      closeButton = document.createElement('button');
+      closeButton.className = 'cds--modal-close';
+      closeButton.textContent = 'Close';
+
+      otherButton = document.createElement('button');
+      otherButton.textContent = 'Copy';
+
+      modal.appendChild(closeButton);
+      modal.appendChild(otherButton);
+      wrapper.appendChild(modal);
+    });
+
+    afterEach(() => {
+      window.requestAnimationFrame.mockRestore();
+      jest.useRealTimers();
+    });
+
+    // Simulate Carbon's handleShowModal: sets aria-modal, role, style
+    function simulateModalOpen() {
+      modal.setAttribute('aria-modal', 'true');
+      modal.setAttribute('role', 'dialog');
+      modal.style.visibility = 'visible';
+      modal.style.opacity = '1';
+      act(() => {
+        mutationObserverCallback([
+          { type: 'attributes', attributeName: 'aria-modal', target: modal },
+          { type: 'attributes', attributeName: 'style', target: modal },
+        ]);
+      });
+      jest.runAllTimers();
+      act(() => {
+        jest.advanceTimersByTime(0);
+      });
+    }
+
+    // Simulate Carbon's handleHideModal: removes aria-modal, role, sets hidden
+    function simulateModalClose() {
+      modal.removeAttribute('aria-modal');
+      modal.removeAttribute('role');
+      modal.style.visibility = 'hidden';
+      modal.style.opacity = '0';
+      act(() => {
+        mutationObserverCallback([
+          { type: 'attributes', attributeName: 'aria-modal', target: modal },
+          { type: 'attributes', attributeName: 'style', target: modal },
+        ]);
+      });
+    }
+
+    it('should move focus to the close button when modal opens', () => {
+      const triggerButton = document.createElement('button');
+      triggerButton.textContent = 'Show as table';
+      wrapper.appendChild(triggerButton);
+      triggerButton.focus();
+
+      simulateModalOpen();
+
+      expect(document.activeElement).toBe(closeButton);
+    });
+
+    it('should restore focus to the previously focused element when modal closes', () => {
+      const triggerButton = document.createElement('button');
+      triggerButton.textContent = 'Show as table';
+      wrapper.appendChild(triggerButton);
+      triggerButton.focus();
+
+      simulateModalOpen();
+      simulateModalClose();
+
+      expect(document.activeElement).toBe(triggerButton);
+    });
+
+    it('should move focus into modal on second open after close', () => {
+      const triggerButton = document.createElement('button');
+      triggerButton.textContent = 'Show as table';
+      wrapper.appendChild(triggerButton);
+      triggerButton.focus();
+
+      // First open/close cycle
+      simulateModalOpen();
+      simulateModalClose();
+      expect(document.activeElement).toBe(triggerButton);
+
+      // Second open - focus should move into modal again
+      simulateModalOpen();
+      expect(document.activeElement).toBe(closeButton);
+    });
+
+    it('should trap focus with Tab wrapping from last to first element', () => {
+      simulateModalOpen();
+
+      otherButton.focus();
+      expect(document.activeElement).toBe(otherButton);
+
+      const tabEvent = new KeyboardEvent('keydown', {
+        key: 'Tab',
+        bubbles: true,
+      });
+      Object.defineProperty(tabEvent, 'shiftKey', { value: false });
+      document.dispatchEvent(tabEvent);
+
+      expect(document.activeElement).toBe(closeButton);
+    });
+
+    it('should trap focus with Shift+Tab wrapping from first to last element', () => {
+      simulateModalOpen();
+
+      closeButton.focus();
+      expect(document.activeElement).toBe(closeButton);
+
+      const shiftTabEvent = new KeyboardEvent('keydown', {
+        key: 'Tab',
+        shiftKey: true,
+        bubbles: true,
+      });
+      document.dispatchEvent(shiftTabEvent);
+
+      expect(document.activeElement).toBe(otherButton);
+    });
+
+    it('should redirect focus back to modal when focus escapes to an outside element', () => {
+      simulateModalOpen();
+      expect(document.activeElement).toBe(closeButton);
+
+      // Simulate overflow menu stealing focus (what Carbon does on second open)
+      const outsideButton = document.createElement('button');
+      outsideButton.className = 'cds--overflow-menu__trigger';
+      wrapper.appendChild(outsideButton);
+      outsideButton.focus();
+
+      // The redirect is deferred via setTimeout(0) to avoid re-entrancy issues
+      jest.runAllTimers();
+
+      expect(document.activeElement).toBe(closeButton);
+    });
+  });
 });

package/src/components/CarbonChart/CarbonChart.tsx

@@ -25,6 +25,7 @@ import styled from '@emotion/styled';
 import { transparentize } from 'polished';
 import { ThemeInterface, ThemeContext, useIsInverse } from 'react-magma-dom';
 
+import { useCarbonModalFocusManagement } from '../../hooks/useCarbonModalFocusManagement';
 import './carbon-charts.css';
 
 export enum CarbonChartType {
@@ -548,6 +549,21 @@ export const CarbonChart = React.forwardRef<HTMLDivElement, CarbonChartProps>(
     } = props;
     const theme = React.useContext(ThemeContext) as ThemeInterface;
     const isInverse = useIsInverse(isInverseProp);
+    const internalRef = React.useRef<HTMLDivElement | null>(null);
+
+    const mergedRef = React.useCallback(
+      (node: HTMLDivElement | null) => {
+        internalRef.current = node;
+        if (typeof ref === 'function') {
+          ref(node);
+        } else if (ref) {
+          (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;
+        }
+      },
+      [ref]
+    );
+
+    useCarbonModalFocusManagement(internalRef);
     const allCharts = {
       area: AreaChart,
       areaStacked: StackedAreaChart,
@@ -625,7 +641,7 @@ export const CarbonChart = React.forwardRef<HTMLDivElement, CarbonChartProps>(
     return (
       <CarbonChartWrapper
         data-testid={testId}
-        ref={ref}
+        ref={mergedRef}
         isInverse={isInverse}
         theme={theme}
         className="carbon-chart-wrapper"

package/src/hooks/useCarbonModalFocusManagement.ts

@@ -0,0 +1,173 @@
+import * as React from 'react';
+
+const FOCUSABLE_SELECTOR =
+  'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+
+function getFocusableElements(container: HTMLElement): HTMLElement[] {
+  return Array.from(container.querySelectorAll(FOCUSABLE_SELECTOR)).filter(
+    (el): el is HTMLElement => {
+      const style = window.getComputedStyle(el);
+      return (
+        style.display !== 'none' &&
+        style.visibility !== 'hidden' &&
+        !el.hasAttribute('disabled')
+      );
+    }
+  );
+}
+
+function findVisibleModal(wrapper: HTMLElement): HTMLElement | null {
+  const modal = wrapper.querySelector<HTMLElement>('.cds--modal');
+  if (!modal) return null;
+
+  const isVisible =
+    modal.getAttribute('aria-modal') === 'true' ||
+    modal.style.visibility === 'visible' ||
+    modal.classList.contains('is-visible');
+
+  return isVisible ? modal : null;
+}
+
+export function useCarbonModalFocusManagement(
+  wrapperRef: React.RefObject<HTMLDivElement>
+): void {
+  const previouslyFocusedElement = React.useRef<Element | null>(null);
+  const keydownHandler = React.useRef<((e: KeyboardEvent) => void) | null>(
+    null
+  );
+  const focusinHandler = React.useRef<((e: FocusEvent) => void) | null>(null);
+  const currentModal = React.useRef<HTMLElement | null>(null);
+
+  React.useEffect(() => {
+    const wrapper = wrapperRef.current;
+    if (!wrapper) return;
+
+    function focusModalCloseButton(modal: HTMLElement) {
+      const closeButton = modal.querySelector<HTMLElement>('.cds--modal-close');
+      if (closeButton) {
+        closeButton.focus();
+      } else {
+        const focusable = getFocusableElements(modal);
+        if (focusable.length > 0) {
+          focusable[0].focus();
+        }
+      }
+    }
+
+    function handleModalOpen(modal: HTMLElement) {
+      currentModal.current = modal;
+      previouslyFocusedElement.current = document.activeElement;
+
+      // Permanent guard: redirect focus back into modal whenever it escapes
+      // (e.g. Carbon's overflow menu returning focus to its trigger).
+      focusinHandler.current = (event: FocusEvent) => {
+        const target = event.target as HTMLElement;
+        if (!modal.contains(target)) {
+          setTimeout(() => {
+            if (currentModal.current === modal) {
+              focusModalCloseButton(modal);
+            }
+          }, 0);
+        }
+      };
+      document.addEventListener('focusin', focusinHandler.current);
+
+      let pollAttempts = 0;
+      const pollAndFocus = () => {
+        if (currentModal.current !== modal) return;
+        if (modal.contains(document.activeElement)) return;
+
+        const closeBtn = modal.querySelector<HTMLElement>('.cds--modal-close');
+        if (
+          closeBtn &&
+          window.getComputedStyle(closeBtn).visibility !== 'hidden'
+        ) {
+          closeBtn.focus();
+          return;
+        }
+
+        if (++pollAttempts < 30) {
+          requestAnimationFrame(pollAndFocus);
+        }
+      };
+      requestAnimationFrame(pollAndFocus);
+
+      keydownHandler.current = (event: KeyboardEvent) => {
+        if (event.key !== 'Tab') return;
+
+        const focusable = getFocusableElements(modal);
+        if (focusable.length === 0) {
+          event.preventDefault();
+          return;
+        }
+
+        if (focusable.length === 1) {
+          event.preventDefault();
+          if (focusable[0] !== document.activeElement) {
+            focusable[0].focus();
+          }
+          return;
+        }
+
+        const firstItem = focusable[0];
+        const lastItem = focusable[focusable.length - 1];
+
+        if (!event.shiftKey && document.activeElement === lastItem) {
+          event.preventDefault();
+          firstItem.focus();
+        } else if (event.shiftKey && document.activeElement === firstItem) {
+          event.preventDefault();
+          lastItem.focus();
+        }
+      };
+
+      document.addEventListener('keydown', keydownHandler.current);
+    }
+
+    function handleModalClose() {
+      // Null out currentModal first so any pending setTimeout redirects
+      // (scheduled by the focusin guard) see a closed modal and bail out.
+      currentModal.current = null;
+
+      if (focusinHandler.current) {
+        document.removeEventListener('focusin', focusinHandler.current);
+        focusinHandler.current = null;
+      }
+
+      if (keydownHandler.current) {
+        document.removeEventListener('keydown', keydownHandler.current);
+        keydownHandler.current = null;
+      }
+
+      if (previouslyFocusedElement.current instanceof HTMLElement) {
+        previouslyFocusedElement.current.focus();
+      }
+    }
+
+    const observer = new MutationObserver(() => {
+      const visibleModal = findVisibleModal(wrapper);
+
+      if (visibleModal && !currentModal.current) {
+        handleModalOpen(visibleModal);
+      } else if (!visibleModal && currentModal.current) {
+        handleModalClose();
+      }
+    });
+
+    observer.observe(wrapper, {
+      attributes: true,
+      attributeFilter: ['class', 'style', 'aria-modal'],
+      subtree: true,
+    });
+
+    return () => {
+      observer.disconnect();
+      if (keydownHandler.current) {
+        document.removeEventListener('keydown', keydownHandler.current);
+      }
+      if (focusinHandler.current) {
+        document.removeEventListener('focusin', focusinHandler.current);
+      }
+    };
+  }, [wrapperRef]);
+}