@react-magma/charts 14.0.0-next.2 → 14.0.0-next.4

package/src/components/CarbonChart/CarbonChart.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable complexity */
 import * as React from 'react';
 
 import {
@@ -23,9 +24,33 @@ import {
 } from '@carbon/charts-react';
 import styled from '@emotion/styled';
 import { transparentize } from 'polished';
-import { ThemeInterface, ThemeContext, useIsInverse } from 'react-magma-dom';
+import {
+  Announce,
+  DropdownDivider,
+  DropdownMenuItem,
+  ThemeInterface,
+  ThemeContext,
+  useIsInverse,
+  VisuallyHidden,
+} from 'react-magma-dom';
+import {
+  FullscreenExitIcon,
+  FullscreenIcon,
+  MoreVertIcon,
+  TableIcon,
+} from 'react-magma-icons';
 
+import { useCarbonModalFocusManagement } from '../../hooks/useCarbonModalFocusManagement';
+// @ts-ignore
 import './carbon-charts.css';
+import {
+  ChartFullscreenButton,
+  ChartMoreOptionsButton,
+  ChartTableButton,
+  ChartTableModal,
+} from '../ChartTable';
+import type { ChartDataTableColumn } from '../ChartTable';
+import { useChartToolbarI18n } from '../ChartTable/chartToolbarI18n';
 
 export enum CarbonChartType {
   area = 'area',
@@ -48,6 +73,46 @@ export enum CarbonChartType {
   combo = 'combo',
 }
 
+export interface ChartToolbarConfig {
+  /**
+   * When true, renders a "Show as table" button that opens a Magma Modal
+   * with the chart data in an accessible table.
+   * @default true
+   */
+  showAsTable?: boolean;
+  /**
+   * When true, renders a fullscreen toggle button.
+   * @default true
+   */
+  fullscreen?: boolean;
+  /**
+   * Additional menu items rendered inside a "More options" dropdown,
+   * below the built-in "Download as CSV", "Download as PNG", and "Download as JPG" items.
+   * Pass DropdownMenuItem elements.
+   */
+  moreOptions?: React.ReactNode;
+  /**
+   * Custom column definitions for the table modal.
+   * If omitted, columns are auto-derived from the dataset object keys.
+   */
+  tableColumns?: ChartDataTableColumn[];
+  /**
+   * First line of the modal heading.
+   * @default "Tabular representation"
+   */
+  tableHeaderLabel?: string;
+  /**
+   * Heading level for the modal header.
+   * @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>;
   isInverse?: boolean;
@@ -68,13 +133,72 @@ export interface CarbonChartProps extends React.HTMLAttributes<HTMLDivElement> {
    * Text for the aria-label attribute for main SVG container, if provided
    */
   ariaLabel?: string;
+  /**
+   * When provided, renders an accessible Magma toolbar above the chart with
+   * "Show as table", fullscreen, and "More options" buttons. Carbon's built-in
+   * toolbar is automatically disabled.
+   */
+  chartToolbar?: ChartToolbarConfig;
 }
 
+const ChartContentWrapper = styled.div`
+  height: 100%;
+  position: relative;
+`;
+
+const FullscreenRoot = styled.div<{
+  isInverse?: boolean;
+  theme: ThemeInterface;
+}>`
+  height: 100%;
+  width: 100%;
+
+  &:fullscreen,
+  &:-webkit-full-screen {
+    background: ${props =>
+      props.isInverse
+        ? props.theme.colors.primary700
+        : props.theme.colors.neutral100};
+    .cds--chart-holder {
+      height: 100vh !important;
+    }
+  }
+`;
+
 const CarbonChartWrapper = styled.div<{
   isInverse?: boolean;
   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 =>
+      props.isInverse
+        ? props.theme.colors.primary700
+        : props.theme.colors.neutral100};
+
+    .cds--chart-holder {
+      height: 100vh !important;
+    }
+  }
+
   .cds--data-table thead tr th {
     background: ${props =>
       props.isInverse ? props.theme.colors.primary700 : ''} !important;
@@ -130,9 +254,9 @@ const CarbonChartWrapper = styled.div<{
     }
   }
 
-  p,
-  div,
-  text,
+  .chart-holder p,
+  .chart-holder div,
+  .chart-holder text,
   .cds--cc--axes g.axis .axis-title,
   .cds--cc--title p.title,
   .cds--cc--axes g.axis g.tick text {
@@ -391,6 +515,9 @@ const CarbonChartWrapper = styled.div<{
             : props.theme.colors.focus} !important;
       outline-offset: 0;
     }
+    circle.dot:focus {
+      outline: none !important;
+    }
     .cds--overflow-menu-options__btn:focus,
     .cds--overflow-menu:focus,
     .cds--overflow-menu__trigger:focus,
@@ -487,10 +614,25 @@ const CarbonChartWrapper = styled.div<{
     }
   }
 
+  &.has-magma-toolbar .cds--cc--title p.title {
+    visibility: hidden;
+  }
+
   svg:not(:root) {
     overflow: visible;
   }
 
+  circle.dot:focus {
+    outline: none;
+    stroke: ${props =>
+      props.isInverse
+        ? props.theme.colors.focusInverse
+        : props.theme.colors.focus} !important;
+    stroke-width: 6px !important;
+    stroke-opacity: 1 !important;
+    paint-order: stroke fill;
+  }
+
   .cds--cc--chart-wrapper text {
     font-size: ${props => props.theme.typeScale.size02.fontSize};
   }
@@ -534,6 +676,436 @@ interface ColorsObject {
   [key: string]: string;
 }
 
+interface ExtendedChartOptions extends ChartOptions {
+  title?: string;
+  colors?: string[];
+}
+
+const ToolbarWrapper = styled.div<{
+  isFullscreen?: boolean;
+  isInverse?: boolean;
+  theme: ThemeInterface;
+}>`
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  left: ${props => (props.isFullscreen ? '2em' : '0')};
+  position: absolute;
+  right: ${props => (props.isFullscreen ? '2em' : '0')};
+  top: ${props => (props.isFullscreen ? '2em' : '0')};
+  z-index: 2;
+
+  button {
+    color: ${props =>
+      props.isInverse
+        ? props.theme.colors.neutral100
+        : props.theme.colors.primary500};
+
+    &:focus {
+      outline: 2px solid
+        ${props =>
+          props.isInverse
+            ? props.theme.colors.focusInverse
+            : props.theme.colors.focus};
+      outline-offset: 0;
+    }
+  }
+`;
+
+const ChartTitle = styled.h2<{
+  isInverse?: boolean;
+  theme: ThemeInterface;
+}>`
+  font-family: ${props => props.theme.bodyFont} !important;
+  font-size: 16px !important;
+  font-weight: 700 !important;
+  letter-spacing: normal !important;
+  line-height: 1.25 !important;
+  margin: 0 !important;
+  color: ${props =>
+    props.isInverse
+      ? props.theme.colors.neutral100
+      : props.theme.colors.neutral700} !important;
+`;
+
+const ToolbarActions = styled.div<{ theme: ThemeInterface }>`
+  align-items: center;
+  display: flex;
+  gap: ${props => props.theme.spaceScale.spacing02};
+
+  > * button,
+  > button {
+    height: 2rem;
+    min-height: 2rem;
+    min-width: 2rem;
+    padding: 4px;
+    width: 2rem;
+  }
+
+  [role='tooltip'] {
+    padding: ${props => props.theme.spaceScale.spacing03}
+      ${props => props.theme.spaceScale.spacing04};
+    text-align: center;
+    white-space: nowrap;
+  }
+
+  [data-testid='dropdownContent'] {
+    padding: ${props => props.theme.spaceScale.spacing03} 0;
+  }
+
+  [role='menuitem'],
+  [data-testid='dropdownMenuItem'] {
+    padding: ${props => props.theme.spaceScale.spacing03}
+      ${props => props.theme.spaceScale.spacing05};
+  }
+`;
+
+function sanitizeCsvValue(value: string): string {
+  const trimmed = value.trimStart();
+  if (/^[=+\-@\t\r]/.test(trimmed)) {
+    return `'${value}`;
+  }
+  return value;
+}
+
+function downloadCsv(dataSet: Array<Record<string, unknown>>, title: string) {
+  if (!dataSet.length) return;
+  const keys = Object.keys(dataSet[0]);
+  const header = keys.map(k => sanitizeCsvValue(k)).join(',');
+  const rows = dataSet.map(row =>
+    keys
+      .map(k => {
+        const v = row[k];
+        const s = sanitizeCsvValue(String(v ?? ''));
+        return s.includes(',') || s.includes('"') || s.includes('\n')
+          ? `"${s.replace(/"/g, '""')}"`
+          : s;
+      })
+      .join(',')
+  );
+  const csv = [header, ...rows].join('\n');
+  const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = `${title || 'chart-data'}.csv`;
+  a.click();
+  URL.revokeObjectURL(url);
+}
+
+function inlineStyles(source: Element, target: Element) {
+  const computed = window.getComputedStyle(source);
+  if (target instanceof HTMLElement || target instanceof SVGElement) {
+    target.setAttribute(
+      'style',
+      Array.from(computed)
+        .map(prop => `${prop}:${computed.getPropertyValue(prop)}`)
+        .join(';')
+    );
+  }
+  for (let i = 0; i < source.children.length; i++) {
+    if (target.children[i]) {
+      inlineStyles(source.children[i], target.children[i]);
+    }
+  }
+}
+
+interface LegendItem {
+  label: string;
+  color: string;
+}
+
+function readLegendItems(wrapper: HTMLElement): LegendItem[] {
+  const items: LegendItem[] = [];
+  wrapper.querySelectorAll('.legend-item').forEach(item => {
+    const checkbox = item.querySelector<HTMLElement>('.checkbox');
+    const label = item.querySelector('p');
+    if (checkbox && label) {
+      items.push({
+        color: checkbox.style.background || checkbox.style.backgroundColor,
+        label: label.textContent || '',
+      });
+    }
+  });
+  return items;
+}
+
+function drawLegend(
+  ctx: CanvasRenderingContext2D,
+  items: LegendItem[],
+  startY: number,
+  canvasWidth: number,
+  scale: number
+) {
+  const fontSize = 13 * scale;
+  const swatchSize = 12 * scale;
+  const gap = 8 * scale;
+  const itemGap = 16 * scale;
+  const paddingX = 16 * scale;
+
+  ctx.font = `${fontSize}px sans-serif`;
+  ctx.textBaseline = 'middle';
+
+  let x = paddingX;
+  let y = startY;
+
+  for (const item of items) {
+    const textWidth = ctx.measureText(item.label).width;
+    const itemWidth = swatchSize + gap + textWidth + itemGap;
+
+    if (x + itemWidth > canvasWidth - paddingX && x > paddingX) {
+      x = paddingX;
+      y += fontSize + gap;
+    }
+
+    ctx.fillStyle = item.color;
+    ctx.fillRect(x, y - swatchSize / 2, swatchSize, swatchSize);
+
+    ctx.fillStyle = '#161616';
+    ctx.fillText(item.label, x + swatchSize + gap, y);
+
+    x += itemWidth;
+  }
+
+  return y + fontSize + gap;
+}
+
+function downloadImage(
+  wrapperRef: React.RefObject<HTMLDivElement | null>,
+  title: string,
+  format: 'png' | 'jpg'
+) {
+  const wrapper = wrapperRef.current;
+  if (!wrapper) return;
+  const svg = wrapper.querySelector('svg.layout-svg-wrapper');
+  if (!svg) return;
+
+  const svgRect = svg.getBoundingClientRect();
+  const legendItems = readLegendItems(wrapper);
+
+  const doWork = () => {
+    const scale = 2;
+
+    // Measure legend height
+    const tempCanvas = document.createElement('canvas');
+    const tempCtx = tempCanvas.getContext('2d');
+    const fontSize = 13 * scale;
+    const swatchSize = 12 * scale;
+    const gap = 8 * scale;
+    const itemGap = 16 * scale;
+    const paddingX = 16 * scale;
+    const canvasWidth = svgRect.width * scale;
+
+    let legendHeight = 0;
+    if (legendItems.length > 0 && tempCtx) {
+      tempCtx.font = `${fontSize}px sans-serif`;
+      let x = paddingX;
+      let rows = 1;
+      for (const item of legendItems) {
+        const textWidth = tempCtx.measureText(item.label).width;
+        const itemWidth = swatchSize + gap + textWidth + itemGap;
+        if (x + itemWidth > canvasWidth - paddingX && x > paddingX) {
+          x = paddingX;
+          rows++;
+        }
+        x += itemWidth;
+      }
+      legendHeight = rows * (fontSize + gap) + gap * 2;
+    }
+
+    const width = svgRect.width * scale;
+    const height = svgRect.height * scale + legendHeight;
+
+    const clone = svg.cloneNode(true) as SVGSVGElement;
+    clone.setAttribute('width', String(svgRect.width));
+    clone.setAttribute('height', String(svgRect.height));
+    clone.setAttribute('viewBox', `0 0 ${svgRect.width} ${svgRect.height}`);
+    clone.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+
+    inlineStyles(svg, clone);
+
+    const serializer = new XMLSerializer();
+    const svgString = serializer.serializeToString(clone);
+    const svgBlob = new Blob([svgString], {
+      type: 'image/svg+xml;charset=utf-8',
+    });
+    const url = URL.createObjectURL(svgBlob);
+
+    const mimeType = format === 'jpg' ? 'image/jpeg' : 'image/png';
+    const ext = format === 'jpg' ? 'jpg' : 'png';
+
+    const img = new Image();
+    img.onload = () => {
+      const canvas = document.createElement('canvas');
+      canvas.width = width;
+      canvas.height = height;
+      const ctx = canvas.getContext('2d');
+      if (!ctx) return;
+
+      ctx.fillStyle = '#ffffff';
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+      ctx.drawImage(img, 0, 0, svgRect.width * scale, svgRect.height * scale);
+      URL.revokeObjectURL(url);
+
+      if (legendItems.length > 0) {
+        drawLegend(
+          ctx,
+          legendItems,
+          svgRect.height * scale + gap,
+          width,
+          scale
+        );
+      }
+
+      canvas.toBlob(blob => {
+        if (!blob) return;
+        const imgUrl = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = imgUrl;
+        a.download = `${title || 'chart'}.${ext}`;
+        a.click();
+        URL.revokeObjectURL(imgUrl);
+      }, mimeType);
+    };
+    img.onerror = () => URL.revokeObjectURL(url);
+    img.src = url;
+  };
+
+  // Defer to idle time with a 2-second deadline so it always runs.
+  if (typeof requestIdleCallback === 'function') {
+    requestIdleCallback(doWork, { timeout: 2000 });
+  } else {
+    setTimeout(doWork, 0);
+  }
+}
+
+const ALL_CHARTS: Record<CarbonChartType, React.ComponentType<any>> = {
+  area: AreaChart,
+  areaStacked: StackedAreaChart,
+  bar: SimpleBarChart,
+  barGrouped: GroupedBarChart,
+  barStacked: StackedBarChart,
+  donut: DonutChart,
+  line: LineChart,
+  lollipop: LollipopChart,
+  pie: PieChart,
+  radar: RadarChart,
+  boxplot: BoxplotChart,
+  bubble: BubbleChart,
+  bullet: BulletChart,
+  gauge: GaugeChart,
+  histogram: HistogramChart,
+  meter: MeterChart,
+  scatter: ScatterChart,
+  combo: ComboChart,
+};
+
+interface InternalToolbarProps {
+  config: ChartToolbarConfig;
+  dataSet: Array<Record<string, unknown>>;
+  isInverse: boolean;
+  isTableOpen: boolean;
+  isFullscreen: boolean;
+  onOpenTable: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  onToggleFullscreen: () => void;
+  theme: ThemeInterface;
+  title: string;
+  wrapperRef: React.RefObject<HTMLDivElement | null>;
+}
+
+function CarbonChartToolbar({
+  config,
+  dataSet,
+  isInverse,
+  isTableOpen,
+  isFullscreen,
+  onOpenTable,
+  onToggleFullscreen,
+  theme,
+  title,
+  wrapperRef,
+}: InternalToolbarProps) {
+  const t = useChartToolbarI18n();
+  const showTable = config.showAsTable !== false;
+  const showFullscreen = config.fullscreen !== false;
+  const resolvedTitle = title || t.defaultTitle;
+
+  const handleDownloadCsv = React.useCallback(() => {
+    downloadCsv(dataSet, title);
+  }, [dataSet, title]);
+
+  const handleDownloadPng = React.useCallback(() => {
+    downloadImage(wrapperRef, title, 'png');
+  }, [wrapperRef, title]);
+
+  const handleDownloadJpg = React.useCallback(() => {
+    downloadImage(wrapperRef, title, 'jpg');
+  }, [wrapperRef, title]);
+
+  const moreOptionsContent = (
+    <>
+      <DropdownMenuItem onClick={handleDownloadCsv}>
+        {t.downloadAsCsv}
+      </DropdownMenuItem>
+      <DropdownMenuItem onClick={handleDownloadPng}>
+        {t.downloadAsPng}
+      </DropdownMenuItem>
+      <DropdownMenuItem onClick={handleDownloadJpg}>
+        {t.downloadAsJpg}
+      </DropdownMenuItem>
+      {config.moreOptions && (
+        <>
+          <DropdownDivider />
+          {config.moreOptions}
+        </>
+      )}
+    </>
+  );
+
+  return (
+    <ToolbarWrapper
+      isFullscreen={isFullscreen}
+      isInverse={isInverse}
+      theme={theme}
+    >
+      <ChartTitle
+        as={`h${config.titleLevel ?? 2}` as keyof JSX.IntrinsicElements}
+        isInverse={isInverse}
+        theme={theme}
+      >
+        {resolvedTitle}
+      </ChartTitle>
+      <ToolbarActions theme={theme}>
+        {showTable && (
+          <ChartTableButton
+            ariaLabel={resolvedTitle}
+            icon={<TableIcon size={20} />}
+            isInverse={isInverse}
+            isTableOpen={isTableOpen}
+            onClick={onOpenTable}
+          />
+        )}
+        {showFullscreen && (
+          <ChartFullscreenButton
+            ariaLabel={`${isFullscreen ? 'Exit' : 'View'} ${resolvedTitle} full screen`}
+            icon={<FullscreenIcon size={20} />}
+            exitIcon={<FullscreenExitIcon size={20} />}
+            isInverse={isInverse}
+            isFullscreen={isFullscreen}
+            onClick={onToggleFullscreen}
+          />
+        )}
+        <ChartMoreOptionsButton
+          icon={<MoreVertIcon size={20} />}
+          isInverse={isInverse}
+        >
+          {moreOptionsContent}
+        </ChartMoreOptionsButton>
+      </ToolbarActions>
+    </ToolbarWrapper>
+  );
+}
+
 export const CarbonChart = React.forwardRef<HTMLDivElement, CarbonChartProps>(
   (props, ref) => {
     const {
@@ -543,61 +1115,188 @@ export const CarbonChart = React.forwardRef<HTMLDivElement, CarbonChartProps>(
       dataSet,
       options,
       ariaLabel,
+      chartToolbar,
       ...rest
     } = props;
     const theme = React.useContext(ThemeContext);
     const isInverse = useIsInverse(isInverseProp);
-    const allCharts = {
-      area: AreaChart,
-      areaStacked: StackedAreaChart,
-      bar: SimpleBarChart,
-      barGrouped: GroupedBarChart,
-      barStacked: StackedBarChart,
-      donut: DonutChart,
-      line: LineChart,
-      lollipop: LollipopChart,
-      pie: PieChart,
-      radar: RadarChart,
-      boxplot: BoxplotChart,
-      bubble: BubbleChart,
-      bullet: BulletChart,
-      gauge: GaugeChart,
-      histogram: HistogramChart,
-      meter: MeterChart,
-      scatter: ScatterChart,
-      combo: ComboChart,
-    };
+    const toolbarI18n = useChartToolbarI18n();
+    const internalRef = React.useRef<HTMLDivElement | null>(null);
 
-    function buildColors() {
-      const scaleColorsObj: ColorsObject = {};
+    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 allGroups = dataSet.map(item => {
-        return 'group' in item ? item['group'] : 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]
+    );
+
+    const fullscreenEnabled = chartToolbar
+      ? chartToolbar.fullscreen !== false
+      : false;
+
+    const savedHeightRef = React.useRef<string>('');
+
+    React.useEffect(() => {
+      if (!fullscreenEnabled) return;
+
+      const onFullscreenChange = () => {
+        const isFs = !!document.fullscreenElement;
+        setIsFullscreen(isFs);
+
+        const chartHolder =
+          internalRef.current?.querySelector<HTMLElement>('.cds--chart-holder');
+        if (chartHolder) {
+          if (isFs) {
+            savedHeightRef.current = chartHolder.style.height;
+            chartHolder.style.height = '100vh';
+          } else {
+            chartHolder.style.height = savedHeightRef.current;
+          }
+        }
+      };
+      document.addEventListener('fullscreenchange', onFullscreenChange);
+      return () => {
+        document.removeEventListener('fullscreenchange', onFullscreenChange);
+        // Restore height if the component unmounts while in fullscreen.
+        const chartHolder =
+          internalRef.current?.querySelector<HTMLElement>('.cds--chart-holder');
+        if (chartHolder && document.fullscreenElement) {
+          chartHolder.style.height = savedHeightRef.current;
+        }
+      };
+    }, [fullscreenEnabled]);
+
+    const openTableModal = React.useCallback(
+      (event: React.MouseEvent<HTMLButtonElement>) => {
+        lastTableTriggerRef.current = event.currentTarget;
+        setIsTableOpen(true);
+      },
+      []
+    );
+
+    const closeTableModal = React.useCallback(() => {
+      setIsTableOpen(false);
+      requestAnimationFrame(() => {
+        lastTableTriggerRef.current?.focus();
       });
-      const uniqueGroups = allGroups.filter(
-        (g, index) => allGroups.indexOf(g) === index
-      );
-      const customColors = ((options as any).colors as string[]) || [];
+    }, []);
+
+    const toggleFullscreen = React.useCallback(() => {
+      if (!document.fullscreenElement && internalRef.current) {
+        internalRef.current.requestFullscreen().catch(() => {
+          // Fullscreen request may be denied by the browser or user agent
+        });
+      } else if (document.fullscreenElement) {
+        document.exitFullscreen().catch(() => {
+          // Exit fullscreen may fail if already exited
+        });
+      }
+    }, []);
+
+    const chartTitle: string =
+      (options as ExtendedChartOptions).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]);
+
+    useCarbonModalFocusManagement(internalRef);
+
+    const colorScale = React.useMemo(() => {
+      const scaleColorsObj: ColorsObject = {};
+      const customColors = (options as ExtendedChartOptions).colors || [];
       const allColors = [...customColors, ...theme.chartColors];
       const allInverseColors = [...customColors, ...theme.chartColorsInverse];
+      const allGroups = dataSet.map(item =>
+        'group' in item ? (item as Record<string, unknown>)['group'] : null
+      );
+      const uniqueGroups = Array.from(new Set(allGroups));
 
-      uniqueGroups.forEach((group, i) => {
-        if (uniqueGroups.length <= allColors.length) {
-          return (scaleColorsObj[group || ('null' as any)] = isInverse
+      if (uniqueGroups.length <= allColors.length) {
+        for (let i = 0; i < uniqueGroups.length; i++) {
+          const group = uniqueGroups[i];
+          scaleColorsObj[String(group ?? 'null')] = isInverse
             ? allInverseColors[i]
-            : allColors[i]);
+            : allColors[i];
         }
-        return {};
-      });
+      }
 
       return scaleColorsObj;
-    }
+    }, [
+      dataSet,
+      options,
+      theme.chartColors,
+      theme.chartColorsInverse,
+      isInverse,
+    ]);
 
     const newOptions = {
       ...options,
       theme: isInverse ? ChartTheme.G100 : ChartTheme.WHITE,
       color: {
-        scale: buildColors(),
+        scale: colorScale,
       },
       tooltip: {
         ...(options?.tooltip || {}),
@@ -605,33 +1304,225 @@ export const CarbonChart = React.forwardRef<HTMLDivElement, CarbonChartProps>(
           type: 'none',
         },
       },
+      ...(chartToolbar ? { toolbar: { enabled: false } } : {}),
     };
 
-    const ChartType = allCharts[type] as any;
+    const ChartType = ALL_CHARTS[type];
+
+    React.useEffect(() => {
+      if (!ariaLabel) return;
+      const rafId = requestAnimationFrame(() => {
+        const svgEl = internalRef.current?.querySelector('.graph-frame');
+        if (!svgEl) return;
+        svgEl.setAttribute('aria-label', ariaLabel);
+      });
+      return () => cancelAnimationFrame(rafId);
+    }, [ariaLabel]);
+
+    // Make Carbon Charts data points keyboard-focusable.
+    React.useEffect(() => {
+      const wrapper = internalRef.current;
+      if (!wrapper) return;
+
+      const isDot = (el: EventTarget | null): el is SVGCircleElement =>
+        el instanceof Element &&
+        el.nodeName.toLowerCase() === 'circle' &&
+        el.classList.contains('dot');
+
+      const onFocusIn = (e: FocusEvent) => {
+        if (!isDot(e.target)) return;
+        const dot = e.target as SVGCircleElement;
+        dot.style.opacity = '1';
+        const { left, top, width, height } = dot.getBoundingClientRect();
+        const cx = left + width / 2;
+        const cy = top + height / 2;
+        dot.dispatchEvent(
+          new MouseEvent('mouseover', {
+            bubbles: true,
+            clientX: cx,
+            clientY: cy,
+            screenX: cx,
+            screenY: cy,
+          })
+        );
+        dot.dispatchEvent(
+          new MouseEvent('mousemove', {
+            bubbles: true,
+            clientX: cx,
+            clientY: cy,
+            screenX: cx,
+            screenY: cy,
+          })
+        );
+      };
+
+      const onFocusOut = (e: FocusEvent) => {
+        if (!isDot(e.target)) return;
+        const dot = e.target;
+        dot.style.opacity = '';
+        dot.dispatchEvent(new MouseEvent('mouseout', { bubbles: true }));
+      };
+
+      const onKeyDown = (e: KeyboardEvent) => {
+        if (!isDot(e.target)) return;
+        if (e.key !== 'Enter' && e.key !== ' ') return;
+        e.preventDefault();
+        const dot = e.target;
+        const { left, top, width, height } = dot.getBoundingClientRect();
+        const cx = left + width / 2;
+        const cy = top + height / 2;
+        dot.dispatchEvent(
+          new MouseEvent('click', {
+            bubbles: true,
+            clientX: cx,
+            clientY: cy,
+          })
+        );
+      };
+
+      const rafId = requestAnimationFrame(() => {
+        wrapper
+          .querySelectorAll<SVGCircleElement>('circle.dot')
+          .forEach(dot => {
+            if (!dot.hasAttribute('tabindex')) {
+              dot.setAttribute('tabindex', '0');
+            }
+          });
+      });
+
+      wrapper.addEventListener('focusin', onFocusIn);
+      wrapper.addEventListener('focusout', onFocusOut);
+      wrapper.addEventListener('keydown', onKeyDown);
+
+      return () => {
+        cancelAnimationFrame(rafId);
+        wrapper.removeEventListener('focusin', onFocusIn);
+        wrapper.removeEventListener('focusout', onFocusOut);
+        wrapper.removeEventListener('keydown', onKeyDown);
+      };
+    }, [type]);
 
-    // Adding aria-label to main SVG container
     React.useEffect(() => {
-      if (ariaLabel) {
-        document.querySelectorAll('.graph-frame ').forEach(div => {
-          div.setAttribute('aria-label', ariaLabel);
+      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() || '');
+          }
         });
-      }
-    });
 
-    const groupsLength = Object.keys(buildColors()).length;
+        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(colorScale).length;
+
+    const showTable = chartToolbar?.showAsTable !== false;
+
+    if (!ChartType) return null;
 
     return (
-      <CarbonChartWrapper
-        data-testid={testId}
-        ref={ref}
-        isInverse={isInverse}
-        theme={theme}
-        className="carbon-chart-wrapper"
-        groupsLength={groupsLength < 6 ? groupsLength : 14}
-        {...rest}
-      >
-        <ChartType data={dataSet} options={newOptions} />
-      </CarbonChartWrapper>
+      <FullscreenRoot ref={mergedRef} isInverse={isInverse} theme={theme}>
+        <VisuallyHidden>
+          <Announce>{legendAnnouncement}</Announce>
+        </VisuallyHidden>
+        <CarbonChartWrapper
+          data-testid={testId}
+          isInverse={isInverse}
+          theme={theme}
+          className={`carbon-chart-wrapper${chartToolbar ? ' has-magma-toolbar' : ''}`}
+          groupsLength={groupsLength < 6 ? groupsLength : 14}
+          role="region"
+          aria-label={ariaLabel || chartTitle}
+          aria-roledescription="chart"
+          {...rest}
+        >
+          <ChartContentWrapper>
+            {chartToolbar && (
+              <CarbonChartToolbar
+                config={chartToolbar}
+                dataSet={dataSet as Array<Record<string, unknown>>}
+                isInverse={isInverse}
+                isTableOpen={isTableOpen}
+                isFullscreen={isFullscreen}
+                onOpenTable={openTableModal}
+                onToggleFullscreen={toggleFullscreen}
+                theme={theme}
+                title={chartTitle}
+                wrapperRef={internalRef}
+              />
+            )}
+            <ChartType data={dataSet} options={newOptions} />
+          </ChartContentWrapper>
+        </CarbonChartWrapper>
+        {chartToolbar && showTable && (
+          <ChartTableModal
+            columns={chartToolbar.tableColumns}
+            portalContainer={isFullscreen ? internalRef.current : undefined}
+            dataSet={dataSet as Array<Record<string, React.ReactNode>>}
+            headerLabel={chartToolbar.tableHeaderLabel}
+            headerLevel={chartToolbar.tableHeaderLevel}
+            isInverse={isInverse}
+            isOpen={isTableOpen}
+            onClose={closeTableModal}
+            onDownloadCsv={handleModalDownloadCsv}
+            title={chartTitle}
+          />
+        )}
+      </FullscreenRoot>
     );
   }
 );