@cahyo-dimas/freeday 1.51.1 → 1.52.0

package/CHANGELOG.md

@@ -3,6 +3,39 @@
 Semua perubahan penting dicatat di sini. Format longgar mengikuti
 [Keep a Changelog](https://keepachangelog.com/); tiap versi = git tag.
 
+## [1.52.0] — 2026-08-24
+### Fixed
+- **A chart's legend, bar values and donut centre were exposed to assistive tech after all** (#047).
+  `COMPONENTS.md` explained the a11y contract with the ARIA spec — `role="img"` is *Children
+  Presentational*, therefore "rendered bar values, axis ticks and legends are not exposed". Measured
+  against Chrome's accessibility tree, that is not what happens: a donut kept `list` → three
+  `listitem` → `StaticText "posted — 76%"` and its centre total `1687`, the legacy `.fdy-bars` kept
+  every value and label (`12`, `Jan`, `30`, `Feb`…), and a two-series cartesian kept its legend — all
+  live, none ignored. What actually protected the advice was only that AT treats a *named*
+  `role="img"` as a leaf and does not descend; the docs presented a habit as a guarantee. Axis ticks
+  were the one true claim, and for an unstated reason: the renderer already sets `aria-hidden` on the
+  `<svg>` itself.
+  `ensureImg()` now marks the rendered children `aria-hidden="true"`, so the author's `aria-label`
+  really is the entire text alternative and cannot be double-announced by an AT that does descend.
+  Nothing is removed and nothing moves — the legend and the centre are still in the DOM and still
+  painted.
+- **The hiding requires a name.** A chart with no `aria-label`/`aria-labelledby` keeps its contents
+  exposed: pruning the subtree of an unlabelled chart would leave an image with no name *and* no
+  text, which is worse than the leak and harder for the author to notice. An element whose author
+  set some other `role` is left alone entirely.
+### Docs
+- The Charts a11y bullet now describes the kit instead of the spec: what is hidden, that `role="img"`
+  alone would not have hidden it, and what happens when the label is missing.
+### Added — guards
+- `browser/chart-a11y.mjs` (5 tests) over donut, legacy bars and cartesian: the accessible subtree
+  exposes no text of its own, the author label survives as the name, the legend is still rendered and
+  visible (hidden, not deleted), and an unlabelled chart still reads. The first three were verified to
+  fail against 1.51.1.
+- `axSubtree()` in the browser harness — every AX node under an element, ignored ones included. The
+  DOM cannot answer this class of question: `aria-hidden` changes no markup, so a `querySelector`
+  assert passes identically before and after the fix. Same reason the 1.51.0 scaling bug needed a
+  real measurement rather than a source read.
+
 ## [1.51.1] — 2026-08-24
 ### Docs
 - **`COMPONENTS.md` never said whether two overlays may be open at once** (#046). Modal and Drawer

package/COMPONENTS.md

@@ -868,9 +868,14 @@ Pure SVG/CSS, no dependency, re-colours with the theme. Needs `freeday-chart.js`
   many x-labels fit. Set the token rather than `font-size` on `__tick`/`__xlabel`, or the gutter and
   the autoskip will still be computed from the old size.
 - A11y: every chart is `role="img"` + an **author-supplied** `aria-label`, and that label is the
-  *entire* text alternative — write one that carries the numbers, not just the shape. `role="img"`
-  makes descendants presentational, so rendered bar values, axis ticks and legends are not exposed
-  either; any `<table>`/text placed inside the element is **pre-render only** and is replaced on
+  *entire* text alternative — write one that carries the numbers, not just the shape. The renderer
+  marks everything it draws `aria-hidden="true"` — legend, bar values and labels, donut centre, the
+  SVG — so nothing inside the chart competes with your label or repeats it. `role="img"` alone would
+  **not** have done that: it is Children Presentational per ARIA, but browsers keep the subtree in
+  the accessibility tree anyway, so the kit hides it rather than relying on the spec. That hiding
+  needs a name to work from — a chart with **no** `aria-label`/`aria-labelledby` keeps its contents
+  exposed, because an image with neither a name nor any text is worse than one that leaks its
+  legend. Any `<table>`/text placed inside the element is **pre-render only** and is replaced on
   render. Good: `aria-label="Monthly posting trend: Posted 62% → 88%, Draft 24% → 16%"`.
 - Internal parts (set by JS, useful for overrides): `.fdy-chart__legend` (+`--row`) `__swatch`
   `__tip`; `.fdy-bars__col` `__bar` `__track` `__label` `__val`; `.fdy-chart-xy__plot` `__grid`

package/README.id.md

@@ -5,7 +5,7 @@
 > **Lebih banyak _free day_ buat dev — UI kit-nya sudah siap pakai.**
 
 [![Live docs](https://img.shields.io/badge/docs-live-2050d8?style=flat-square)](https://cahyo-dimas.github.io/freeday-ui-kit/)
-[![Release](https://img.shields.io/badge/release-v1.51.1-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v1.51.1)
+[![Release](https://img.shields.io/badge/release-v1.52.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v1.52.0)
 
 UI KIT yang token-driven & framework-agnostic — satu sumber kebenaran untuk warna, tipografi,
 spasi, dan komponen. Blueprint: `docs/superpowers/specs/2026-07-21-freeday-ui-kit-design.md`.

package/README.md

@@ -5,7 +5,7 @@
 > **More free days for devs — the UI kit is ready to use.**
 
 [![Live docs](https://img.shields.io/badge/docs-live-2050d8?style=flat-square)](https://cahyo-dimas.github.io/freeday-ui-kit/)
-[![Release](https://img.shields.io/badge/release-v1.51.1-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v1.51.1)
+[![Release](https://img.shields.io/badge/release-v1.52.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v1.52.0)
 
 A token-driven, framework-agnostic UI kit — one source of truth for color, typography,
 spacing, and components. Blueprint: `docs/superpowers/specs/2026-07-21-freeday-ui-kit-design.md`.

package/dist/freeday-chart.js

@@ -49,7 +49,21 @@
     var v = el.getAttribute(attr);
     return v ? v.split(',').map(function (s) { return s.trim(); }) : [];
   }
-  function ensureImg(el) { if (!el.hasAttribute('role')) el.setAttribute('role', 'img'); }
+  // role="img" is Children Presentational per ARIA, so the docs used to say a chart's rendered
+  // legend, bar values and donut centre are not exposed. No browser actually prunes that subtree —
+  // measured in Chrome's AX tree, every one of those nodes is live and unignored; what saves the
+  // advice is only that AT treats a NAMED role="img" as a leaf and does not descend. So the kit
+  // hides them itself, and the author's aria-label really is the whole text alternative.
+  //
+  // Only for a chart that HAS a name: hiding the contents of an unlabelled one would leave an image
+  // with no text at all, which is worse than the leak. An author who sets some other role owns the
+  // subtree and gets no help from here.
+  function ensureImg(el) {
+    if (!el.hasAttribute('role')) el.setAttribute('role', 'img');
+    if (el.getAttribute('role') !== 'img') return;
+    if (!el.hasAttribute('aria-label') && !el.hasAttribute('aria-labelledby')) return;
+    Array.prototype.forEach.call(el.children, function (child) { child.setAttribute('aria-hidden', 'true'); });
+  }
   function svgEl(name) { return document.createElementNS(NS, name); }
 
   // Cartesian charts size their viewBox to the measured plot, so a width change needs a repaint.

package/dist/freeday.js

@@ -913,7 +913,21 @@
     var v = el.getAttribute(attr);
     return v ? v.split(',').map(function (s) { return s.trim(); }) : [];
   }
-  function ensureImg(el) { if (!el.hasAttribute('role')) el.setAttribute('role', 'img'); }
+  // role="img" is Children Presentational per ARIA, so the docs used to say a chart's rendered
+  // legend, bar values and donut centre are not exposed. No browser actually prunes that subtree —
+  // measured in Chrome's AX tree, every one of those nodes is live and unignored; what saves the
+  // advice is only that AT treats a NAMED role="img" as a leaf and does not descend. So the kit
+  // hides them itself, and the author's aria-label really is the whole text alternative.
+  //
+  // Only for a chart that HAS a name: hiding the contents of an unlabelled one would leave an image
+  // with no text at all, which is worse than the leak. An author who sets some other role owns the
+  // subtree and gets no help from here.
+  function ensureImg(el) {
+    if (!el.hasAttribute('role')) el.setAttribute('role', 'img');
+    if (el.getAttribute('role') !== 'img') return;
+    if (!el.hasAttribute('aria-label') && !el.hasAttribute('aria-labelledby')) return;
+    Array.prototype.forEach.call(el.children, function (child) { child.setAttribute('aria-hidden', 'true'); });
+  }
   function svgEl(name) { return document.createElementNS(NS, name); }
 
   // Cartesian charts size their viewBox to the measured plot, so a width change needs a repaint.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cahyo-dimas/freeday",
-  "version": "1.51.1",
+  "version": "1.52.0",
   "description": "Freeday — token-driven, framework-agnostic UI KIT (design source-of-truth).",
   "type": "module",
   "license": "MIT",
@@ -92,7 +92,7 @@
   "scripts": {
     "build": "node tokens/build.mjs",
     "test": "node --test",
-    "test:browser": "node --test browser/vanilla.mjs browser/adapter.mjs browser/layout.mjs browser/theme.mjs browser/state.mjs browser/root-init.mjs browser/upload-states.mjs browser/number.mjs browser/card-stretch.mjs browser/text-override.mjs browser/control-heights.mjs browser/cfl-multi.mjs browser/crowding.mjs browser/over-dialog.mjs browser/chart-scale.mjs browser/overlay-stack.mjs",
+    "test:browser": "node --test browser/vanilla.mjs browser/adapter.mjs browser/layout.mjs browser/theme.mjs browser/state.mjs browser/root-init.mjs browser/upload-states.mjs browser/number.mjs browser/card-stretch.mjs browser/text-override.mjs browser/control-heights.mjs browser/cfl-multi.mjs browser/crowding.mjs browser/over-dialog.mjs browser/chart-scale.mjs browser/overlay-stack.mjs browser/chart-a11y.mjs",
     "prepack": "node tokens/build.mjs",
     "version": "node tokens/build.mjs && git add dist",
     "typecheck:react": "tsc -p adapters/react/tsconfig.json --noEmit"