@vanduo-oss/vd3-cbun 1.3.2 → 1.4.1

package/dist/charts/index.js

@@ -444,6 +444,74 @@ function makeInteractive(mark, hasClick, hasTooltip) {
     mark.setAttribute("focusable", "true");
   }
 }
+function setupKeyboardNavigation(svg, markGroup) {
+  svg.addEventListener("keydown", (event) => {
+    const active = document.activeElement;
+    if (!active || !markGroup.contains(active)) return;
+    const marks = Array.from(markGroup.querySelectorAll('[tabindex="0"]'));
+    if (!marks.length) return;
+    const currentIndex = marks.indexOf(active);
+    if (currentIndex === -1) return;
+    let targetIndex = -1;
+    if (event.key === "ArrowRight" || event.key === "ArrowDown") {
+      event.preventDefault();
+      targetIndex = (currentIndex + 1) % marks.length;
+    } else if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
+      event.preventDefault();
+      targetIndex = (currentIndex - 1 + marks.length) % marks.length;
+    } else if (event.key === "Home") {
+      event.preventDefault();
+      targetIndex = 0;
+    } else if (event.key === "End") {
+      event.preventDefault();
+      targetIndex = marks.length - 1;
+    } else if (event.key === "Escape") {
+      event.preventDefault();
+      active.blur();
+    }
+    if (targetIndex !== -1 && marks[targetIndex]) {
+      marks[targetIndex].focus();
+    }
+  });
+}
+function renderDataTable(instance, tableData) {
+  const { target, options } = instance;
+  if (options.dataTable === false) return;
+  if (!tableData || !tableData.rows || !tableData.rows.length) return;
+  const table = document.createElement("table");
+  table.className = "vd-chart-data-table";
+  if (options.dataTable !== "visible") {
+    table.classList.add("vd-chart-sr-only");
+  }
+  const caption = document.createElement("caption");
+  caption.textContent = tableData.caption || options.title || options.ariaLabel || `${instance.kind} chart data`;
+  table.appendChild(caption);
+  if (tableData.headers && tableData.headers.length) {
+    const thead = document.createElement("thead");
+    const headerRow = document.createElement("tr");
+    tableData.headers.forEach((h2) => {
+      const th = document.createElement("th");
+      th.setAttribute("scope", "col");
+      th.textContent = String(h2);
+      headerRow.appendChild(th);
+    });
+    thead.appendChild(headerRow);
+    table.appendChild(thead);
+  }
+  const tbody = document.createElement("tbody");
+  tableData.rows.forEach((row) => {
+    const tr = document.createElement("tr");
+    row.forEach((cell, idx) => {
+      const el = idx === 0 ? document.createElement("th") : document.createElement("td");
+      if (idx === 0) el.setAttribute("scope", "row");
+      el.textContent = cell == null ? "" : String(cell);
+      tr.appendChild(el);
+    });
+    tbody.appendChild(tr);
+  });
+  table.appendChild(tbody);
+  target.appendChild(table);
+}
 function createSvgShell(instance) {
   const { target, options } = instance;
   const size = measureTarget(target, options);
@@ -460,7 +528,8 @@ function createSvgShell(instance) {
     width: size.width,
     height: size.height,
     viewBox: `0 0 ${size.width} ${size.height}`,
-    role: "img"
+    role: options.role || "graphics-document document",
+    "aria-roledescription": options.ariaRoleDescription || `${instance.kind} chart`
   });
   const titleId = nextId("vd-chart-title");
   const descId = nextId("vd-chart-desc");
@@ -531,7 +600,7 @@ function drawAxisLine(svg, x1, y1, x2, y2, theme) {
 }
 function drawCartesianAxes(svg, config) {
   const { plot, xScale, yScale, xTicks, yTicks, theme, options, categoricalX } = config;
-  const axisGroup = append(svg, svgEl("g", { class: "vd-chart-axes" }));
+  const axisGroup = append(svg, svgEl("g", { class: "vd-chart-axes", "aria-hidden": "true" }));
   yTicks.forEach((tick) => {
     const y = yScale(tick);
     if (!isFiniteNumber(y)) return;
@@ -774,7 +843,14 @@ function drawDataLabel(svg, x, y, value, cfg, theme, anchor = "middle") {
 function drawAnnotations(svg, options, plot, xScale, yScale, theme) {
   const annotations = toArray(options.annotations);
   if (!annotations.length) return;
-  const group = append(svg, svgEl("g", { class: "vd-chart-annotations" }));
+  const group = append(
+    svg,
+    svgEl("g", {
+      class: "vd-chart-annotations",
+      role: "graphics-object",
+      "aria-roledescription": "annotations"
+    })
+  );
   annotations.forEach((ann) => {
     const color = ann.color || theme.mutedTextColor;
     const dash = ann.dash === false ? null : "4 3";
@@ -894,7 +970,14 @@ function renderBarChart(instance) {
   });
   drawAnnotations(svg, options, plot, xScale, yScale, theme);
   const labels = dataLabelConfig(options);
-  const markGroup = append(svg, svgEl("g", { class: "vd-chart-marks vd-chart-bars" }));
+  const markGroup = append(
+    svg,
+    svgEl("g", {
+      class: "vd-chart-marks vd-chart-bars",
+      role: "graphics-object",
+      "aria-roledescription": "data points"
+    })
+  );
   const baseline = yScale(Math.min(Math.max(0, yDomain[0]), yDomain[1]));
   rows.forEach((row) => {
     const x = xScale(row.x);
@@ -912,6 +995,7 @@ function renderBarChart(instance) {
       rx: 3,
       fill,
       role: "graphics-symbol",
+      "aria-roledescription": "bar",
       "aria-label": `${formatCategory(row.x)}: ${formatNumber(row.y)}`
     });
     makeInteractive(rect, typeof options.onBarClick === "function", options.tooltip !== false);
@@ -933,6 +1017,12 @@ function renderBarChart(instance) {
     if (labels) drawDataLabel(svg, x + xScale.bandwidth() / 2, rectY - 4, row.y, labels, theme);
     append(markGroup, rect);
   });
+  setupKeyboardNavigation(svg, markGroup);
+  renderDataTable(instance, {
+    caption: options.title || options.ariaLabel || `${instance.kind} chart data`,
+    headers: [options.xAxis?.label || "Category", options.yAxis?.label || "Value"],
+    rows: rows.map((r) => [formatCategory(r.x), formatNumber(r.y)])
+  });
   if (options.legend && color && color.scale) {
     renderTopLegend(
       svg,
@@ -986,7 +1076,14 @@ function renderMultiBarChart(instance) {
   });
   drawAnnotations(svg, options, plot, xScale, yScale, theme);
   const labels = dataLabelConfig(options);
-  const markGroup = append(svg, svgEl("g", { class: "vd-chart-marks vd-chart-bars" }));
+  const markGroup = append(
+    svg,
+    svgEl("g", {
+      class: "vd-chart-marks vd-chart-bars",
+      role: "graphics-object",
+      "aria-roledescription": "grouped bars"
+    })
+  );
   const baseline = yScale(Math.min(Math.max(0, yDomain[0]), yDomain[1]));
   seriesList.forEach((series) => {
     const fill = seriesColor(series, theme);
@@ -1006,6 +1103,7 @@ function renderMultiBarChart(instance) {
         rx: 3,
         fill,
         role: "graphics-symbol",
+        "aria-roledescription": "bar",
         "aria-label": `${series.name} \u2014 ${formatCategory(row.x)}: ${formatNumber(row.y)}`
       });
       makeInteractive(rect, typeof options.onBarClick === "function", options.tooltip !== false);
@@ -1038,6 +1136,20 @@ function renderMultiBarChart(instance) {
       append(markGroup, rect);
     });
   });
+  setupKeyboardNavigation(svg, markGroup);
+  const tableRows = categories.map((cat) => {
+    const rowCells = [cat];
+    seriesList.forEach((s) => {
+      const match = s.rows.find((r) => String(r.x) === cat);
+      rowCells.push(match && isFiniteNumber(match.y) ? formatNumber(match.y) : "");
+    });
+    return rowCells;
+  });
+  renderDataTable(instance, {
+    caption: options.title || options.ariaLabel || `${instance.kind} chart data`,
+    headers: [options.xAxis?.label || "Category", ...seriesList.map((s) => s.name)],
+    rows: tableRows
+  });
   if (options.legend !== false) {
     renderTopLegend(
       svg,
@@ -1098,7 +1210,14 @@ function renderLineLikeChart(instance, mode) {
   });
   drawAnnotations(svg, options, plot, xInfo.scale, yScale, theme);
   const labels = dataLabelConfig(options);
-  const markGroup = append(svg, svgEl("g", { class: `vd-chart-marks vd-chart-${mode}` }));
+  const markGroup = append(
+    svg,
+    svgEl("g", {
+      class: `vd-chart-marks vd-chart-${mode}`,
+      role: "graphics-object",
+      "aria-roledescription": `${mode} series`
+    })
+  );
   if (mode === "area") {
     const baseline = yScale(Math.max(0, yDomain[0]));
     append(
@@ -1135,6 +1254,7 @@ function renderLineLikeChart(instance, mode) {
         stroke: color,
         "stroke-width": 2,
         role: "graphics-symbol",
+        "aria-roledescription": "data point",
         "aria-label": `${formatCategory(point.xValue)}: ${formatNumber(point.yValue)}`
       });
       makeInteractive(
@@ -1164,6 +1284,12 @@ function renderLineLikeChart(instance, mode) {
       (point) => drawDataLabel(svg, point.x, point.y - 8, point.yValue, labels, theme)
     );
   }
+  setupKeyboardNavigation(svg, markGroup);
+  renderDataTable(instance, {
+    caption: options.title || options.ariaLabel || `${instance.kind} chart data`,
+    headers: [options.xAxis?.label || "X", options.yAxis?.label || "Y"],
+    rows: points.map((p) => [formatCategory(p.xValue), formatNumber(p.yValue)])
+  });
 }
 function renderMultiLineChart(instance, mode) {
   const shell = createSvgShell(instance);
@@ -1199,7 +1325,14 @@ function renderMultiLineChart(instance, mode) {
   });
   drawAnnotations(svg, options, plot, xInfo.scale, yScale, theme);
   const labels = dataLabelConfig(options);
-  const markGroup = append(svg, svgEl("g", { class: `vd-chart-marks vd-chart-${mode}` }));
+  const markGroup = append(
+    svg,
+    svgEl("g", {
+      class: `vd-chart-marks vd-chart-${mode}`,
+      role: "graphics-object",
+      "aria-roledescription": `multi-series ${mode}`
+    })
+  );
   const baseline = yScale(Math.max(0, yDomain[0]));
   seriesList.forEach((series) => {
     const stroke = seriesColor(series, theme);
@@ -1246,6 +1379,7 @@ function renderMultiLineChart(instance, mode) {
           stroke,
           "stroke-width": 2,
           role: "graphics-symbol",
+          "aria-roledescription": "data point",
           "aria-label": `${series.name} ${formatCategory(point.xValue)}: ${formatNumber(point.yValue)}`
         });
         makeInteractive(
@@ -1278,6 +1412,21 @@ function renderMultiLineChart(instance, mode) {
       );
     }
   });
+  setupKeyboardNavigation(svg, markGroup);
+  const uniqueX = unique(allRows.map((r) => r.x));
+  const tableRows = uniqueX.map((xVal) => {
+    const rowCells = [formatCategory(xVal)];
+    seriesList.forEach((s) => {
+      const match = s.rows.find((r) => r.x === xVal);
+      rowCells.push(match && isFiniteNumber(match.y) ? formatNumber(match.y) : "");
+    });
+    return rowCells;
+  });
+  renderDataTable(instance, {
+    caption: options.title || options.ariaLabel || `${instance.kind} chart data`,
+    headers: [options.xAxis?.label || "X", ...seriesList.map((s) => s.name)],
+    rows: tableRows
+  });
   if (options.legend !== false) {
     renderTopLegend(
       svg,
@@ -1329,7 +1478,14 @@ function renderScatterChart(instance) {
   });
   drawAnnotations(svg, options, plot, xInfo.scale, yScale, theme);
   const labels = dataLabelConfig(options);
-  const markGroup = append(svg, svgEl("g", { class: "vd-chart-marks vd-chart-scatter" }));
+  const markGroup = append(
+    svg,
+    svgEl("g", {
+      class: "vd-chart-marks vd-chart-scatter",
+      role: "graphics-object",
+      "aria-roledescription": "data points"
+    })
+  );
   rows.forEach((row) => {
     const cx = xInfo.scale(xInfo.mapValue(row.x));
     const cy = yScale(row.y);
@@ -1343,6 +1499,7 @@ function renderScatterChart(instance) {
       fill,
       opacity: options.pointOpacity ?? 0.88,
       role: "graphics-symbol",
+      "aria-roledescription": "data point",
       "aria-label": `${formatCategory(row.x)}: ${formatNumber(row.y)}`
     });
     makeInteractive(circle, typeof options.onPointClick === "function", options.tooltip !== false);
@@ -1363,6 +1520,12 @@ function renderScatterChart(instance) {
     if (labels) drawDataLabel(svg, cx, cy - 8, row.y, labels, theme);
     append(markGroup, circle);
   });
+  setupKeyboardNavigation(svg, markGroup);
+  renderDataTable(instance, {
+    caption: options.title || options.ariaLabel || `${instance.kind} chart data`,
+    headers: [options.xAxis?.label || "X", options.yAxis?.label || "Y"],
+    rows: rows.map((r) => [formatCategory(r.x), formatNumber(r.y)])
+  });
   if (options.legend && color && color.scale) {
     renderTopLegend(
       svg,
@@ -1431,7 +1594,14 @@ function renderDonutChart(instance) {
   const innerRadius = outerRadius * ratio;
   const colorScale = scaleOrdinal({ domain: rows.map((row) => row.label), range: theme.colors });
   const labels = dataLabelConfig(options);
-  const markGroup = append(svg, svgEl("g", { class: "vd-chart-marks vd-chart-slices" }));
+  const markGroup = append(
+    svg,
+    svgEl("g", {
+      class: "vd-chart-marks vd-chart-slices",
+      role: "graphics-object",
+      "aria-roledescription": "pie slices"
+    })
+  );
   let cursor = -Math.PI / 2;
   rows.forEach((row) => {
     const angle = row.value / total * TAU;
@@ -1445,6 +1615,7 @@ function renderDonutChart(instance) {
       stroke: theme.backgroundColor,
       "stroke-width": 2,
       role: "graphics-symbol",
+      "aria-roledescription": "slice",
       "aria-label": `${formatCategory(row.label)}: ${formatNumber(row.value)}`
     });
     makeInteractive(path, typeof options.onSliceClick === "function", options.tooltip !== false);
@@ -1469,6 +1640,16 @@ function renderDonutChart(instance) {
     }
     append(markGroup, path);
   });
+  setupKeyboardNavigation(svg, markGroup);
+  renderDataTable(instance, {
+    caption: options.title || options.ariaLabel || `${instance.kind} chart data`,
+    headers: ["Category", "Value", "Percentage"],
+    rows: rows.map((r) => [
+      formatCategory(r.label),
+      formatNumber(r.value),
+      total > 0 ? `${Math.round(r.value / total * 100)}%` : "0%"
+    ])
+  });
   if (innerRadius > 16 && options.centerLabel !== false) {
     append(
       svg,
@@ -1651,7 +1832,11 @@ var CHART_PROPS = {
   xFormat: { type: Function, default: void 0 },
   yFormat: { type: Function, default: void 0 },
   xAxis: { type: Object, default: void 0 },
-  yAxis: { type: Object, default: void 0 }
+  yAxis: { type: Object, default: void 0 },
+  // Accessible data table: `true` (sr-only, default) / `false` / `'visible'`.
+  dataTable: { type: [Boolean, String], default: void 0 },
+  // Override the SVG `aria-roledescription` (defaults to `${kind} chart`).
+  ariaRoleDescription: { type: String, default: void 0 }
 };
 function optionsFrom(target, props, emit) {
   return {
@@ -1685,6 +1870,8 @@ function optionsFrom(target, props, emit) {
     yFormat: props.yFormat,
     xAxis: props.xAxis,
     yAxis: props.yAxis,
+    dataTable: props.dataTable,
+    ariaRoleDescription: props.ariaRoleDescription,
     // Forward the core's mark-click callbacks as the Vue emit family. Passing
     // all three unconditionally is safe: the core only fires the callback
     // relevant to the rendered chart type (bars → onBarClick, points →