@cfasim-ui/docs 0.6.3 → 0.6.4

package/charts/BarChart/BarChart.md

@@ -701,11 +701,11 @@ anchor. `lineColor`, `lineWidth`, and `lineDash` style the line.
 
 ## Accessibility
 
-The chart's individual bars aren't exposed to assistive tech, so the chart
-announces itself with a single accessible name. When the chart has a `title`,
-its root element gets `role="figure"` and an `aria-label` set to the title, so
-screen readers announce it as a labeled figure while the menu and download
-controls stay reachable.
+The chart's `<svg>` is exposed as a single labeled image so screen readers
+announce one accessible name instead of wandering through the individual bars.
+When the chart has a `title`, the `<svg>` gets `role="img"` and an `aria-label`
+set to the title. The menu and download controls live outside the `<svg>`, so
+they stay reachable regardless.
 
 Set `ariaLabel` to give screen readers a fuller summary than the visible title
 (it overrides `title` for the accessible name only):
@@ -719,9 +719,8 @@ Set `ariaLabel` to give screen readers a fuller summary than the visible title
 />
 ```
 
-Pass `role` to override the default, e.g. `role="img"` to expose the chart as a
-single image (note this hides the inner menu/download controls from assistive
-tech).
+Pass `role` to override the default `"img"` (e.g. `role="figure"`, or a role of
+your own).
 
 ## API
 

package/charts/BarChart/BarChart.vue

@@ -286,12 +286,14 @@ const props = withDefaults(defineProps<BarChartProps>(), {
   valueAxis: true,
 });
 
-// Accessible name for the whole chart; falls back to the visible title.
+// Accessible name for the chart; falls back to the visible title.
 const chartAriaLabel = computed(() => props.ariaLabel ?? props.title);
-// Label the chart as a figure when it has a name (keeps inner controls
-// reachable, unlike role="img"). An explicit `role` prop always wins.
+// Expose the <svg> as a single labeled image so screen readers announce the
+// name instead of wandering through the individual bars. The menu/download
+// controls live outside the <svg>, so they stay reachable. An explicit `role`
+// prop always wins.
 const chartRole = computed(
-  () => props.role ?? (chartAriaLabel.value ? "figure" : undefined),
+  () => props.role ?? (chartAriaLabel.value ? "img" : undefined),
 );
 
 // The template root is a <Teleport>, so fallthrough attrs (class, style,
@@ -1483,8 +1485,6 @@ const columnHeaders = computed<ColumnHeader[]>(() => {
       class="bar-chart-wrapper"
       :class="{ 'is-fullscreen': isFullscreen }"
       :style="fullscreenStyle"
-      :role="chartRole || undefined"
-      :aria-label="chartAriaLabel || undefined"
     >
       <ChartMenu
         v-if="menu"
@@ -1495,7 +1495,13 @@ const columnHeaders = computed<ColumnHeader[]>(() => {
       <div class="chart-sr-only" aria-live="polite">
         {{ isFullscreen ? "Chart expanded to fill window" : "" }}
       </div>
-      <svg ref="svgRef" :width="width" :height="height">
+      <svg
+        ref="svgRef"
+        :width="width"
+        :height="height"
+        :role="chartRole || undefined"
+        :aria-label="chartAriaLabel || undefined"
+      >
         <!-- title -->
         <text
           v-if="title"

package/charts/LineChart/LineChart.md

@@ -1115,11 +1115,11 @@ until the user clicks Download:
 
 ## Accessibility
 
-The chart's individual marks aren't exposed to assistive tech, so the chart
-announces itself with a single accessible name. When the chart has a `title`,
-its root element gets `role="figure"` and an `aria-label` set to the title, so
-screen readers announce it as a labeled figure while the menu and download
-controls stay reachable.
+The chart's `<svg>` is exposed as a single labeled image so screen readers
+announce one accessible name instead of wandering through the individual marks.
+When the chart has a `title`, the `<svg>` gets `role="img"` and an `aria-label`
+set to the title. The menu and download controls live outside the `<svg>`, so
+they stay reachable regardless.
 
 Set `ariaLabel` to give screen readers a fuller summary than the visible title
 (it overrides `title` for the accessible name only):
@@ -1132,9 +1132,8 @@ Set `ariaLabel` to give screen readers a fuller summary than the visible title
 />
 ```
 
-Pass `role` to override the default, e.g. `role="img"` to expose the chart as a
-single image (note this hides the inner menu/download controls from assistive
-tech).
+Pass `role` to override the default `"img"` (e.g. `role="figure"`, or a role of
+your own).
 
 ## Props
 

package/charts/LineChart/LineChart.vue

@@ -240,12 +240,14 @@ const props = withDefaults(defineProps<LineChartProps>(), {
   yScaleType: "linear",
 });
 
-// Accessible name for the whole chart; falls back to the visible title.
+// Accessible name for the chart; falls back to the visible title.
 const chartAriaLabel = computed(() => props.ariaLabel ?? props.title);
-// Label the chart as a figure when it has a name (keeps inner controls
-// reachable, unlike role="img"). An explicit `role` prop always wins.
+// Expose the <svg> as a single labeled image so screen readers announce the
+// name instead of wandering through the individual marks. The menu/download
+// controls live outside the <svg>, so they stay reachable. An explicit `role`
+// prop always wins.
 const chartRole = computed(
-  () => props.role ?? (chartAriaLabel.value ? "figure" : undefined),
+  () => props.role ?? (chartAriaLabel.value ? "img" : undefined),
 );
 
 // The template root is a <Teleport>, so fallthrough attrs (class, style,
@@ -1056,8 +1058,6 @@ const positionedLegendItems = computed(() => {
       class="line-chart-wrapper"
       :class="{ 'is-fullscreen': isFullscreen }"
       :style="fullscreenStyle"
-      :role="chartRole || undefined"
-      :aria-label="chartAriaLabel || undefined"
     >
       <ChartMenu
         v-if="menu"
@@ -1068,7 +1068,13 @@ const positionedLegendItems = computed(() => {
       <div class="chart-sr-only" aria-live="polite">
         {{ isFullscreen ? "Chart expanded to fill window" : "" }}
       </div>
-      <svg ref="svgRef" :width="width" :height="totalHeight">
+      <svg
+        ref="svgRef"
+        :width="width"
+        :height="totalHeight"
+        :role="chartRole || undefined"
+        :aria-label="chartAriaLabel || undefined"
+      >
         <!-- title -->
         <text
           v-if="title"

package/charts/_shared/chartProps.ts

@@ -104,16 +104,16 @@ export interface ChartCommonProps {
   /** Styling for the chart title. See `TitleStyle`. */
   titleStyle?: TitleStyle;
   /**
-   * ARIA role for the chart's root element. Defaults to `"figure"` when an
-   * accessible name is present (from `ariaLabel` or `title`), so screen
-   * readers announce the chart as a labeled figure while its controls (menu,
-   * download) stay reachable. Pass `"img"` to expose it as a single image
-   * (which hides the inner controls from assistive tech), or your own role.
+   * ARIA role for the chart's `<svg>`. Defaults to `"img"` when an accessible
+   * name is present (from `ariaLabel` or `title`), so screen readers announce
+   * the chart as a single labeled image instead of exposing the individual
+   * marks. The menu and download controls sit outside the `<svg>`, so they
+   * stay reachable regardless. Pass your own role to override.
    */
   role?: string;
   /**
-   * Accessible name for the chart, announced by screen readers via the root
-   * element's `aria-label`. Defaults to the `title` prop. The individual
+   * Accessible name for the chart, announced by screen readers via the
+   * `<svg>`'s `aria-label`. Defaults to the `title` prop. The individual
    * marks aren't exposed to assistive tech, so set this to a short summary of
    * what the chart shows.
    */

package/index.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.6.3",
+  "version": "0.6.4",
   "package": "@cfasim-ui/docs",
   "content": {
     "components": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cfasim-ui/docs",
-  "version": "0.6.3",
+  "version": "0.6.4",
   "description": "LLM-friendly component and chart documentation for cfasim-ui",
   "license": "Apache-2.0",
   "repository": {