@cahyo-dimas/freeday 1.51.1 → 1.52.1

package/CHANGELOG.md

@@ -3,6 +3,66 @@
 Semua perubahan penting dicatat di sini. Format longgar mengikuti
 [Keep a Changelog](https://keepachangelog.com/); tiap versi = git tag.
 
+## [1.52.1] — 2026-08-24
+### Docs
+- **1.51.1's close-watcher caveat named the wrong condition** (#048). It said a `showModal()` with
+  no transient activation — "from a timer, or after an `await` that outlived the click" — has its
+  close watcher grouped with the dialog below, so one Escape closes both. A consumer audited three
+  call sites of exactly that shape and could not reproduce it. They were right, and the reason is
+  that the line is **sticky** activation, not transient: grouping needs a page that has received no
+  user input *at all*. Six seconds after a single click — transient activation long expired,
+  `navigator.userActivation.isActive === false` — two stacked overlays are still independent. So the
+  grouping is reachable in a test harness and nowhere else, which is exactly where the kit met it.
+- **What the advice was protecting was real, but it is a different failure.** Open either overlay
+  from script and the second one's `cancel` event arrives **non-cancelable**: Escape still closes
+  only the topmost, but `preventDefault()` on it is ignored, so an "unsaved changes, stay open" guard
+  on that dialog silently stops working. Only when both overlays are opened by a real gesture is that
+  veto available. The Modal entry now says this instead.
+- The note also proposed documenting that the typed wrappers' `@cancel.prevent` makes them immune to
+  the grouping. **Measured, they are not** — in a page with no activation the `cancel` event is not
+  cancelable at all, so preventing it does nothing and both dialogs close regardless. That claim is
+  not in the docs, and this is why.
+### Added — guards
+- `browser/overlay-stack.mjs` gains the whole matrix as one assertion — four ways to open two
+  overlays × what one Escape leaves open × whether it could be refused — so a row changing is
+  reported as news about the browser rather than a regression in the kit. Verified identical on
+  Chromium 133 (the suite's engine) and Chrome 151.
+- The fixture records each `cancel` event's `cancelable` flag; nothing prevents it, so the older
+  tests measure what they always did.
+
+## [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`
@@ -1056,10 +1061,19 @@ that. Escape closes the topmost first, so cancelling returns to the still-open d
 Escape then closes the drawer. Closing them out of order is fine too: closing the drawer while the
 modal is up leaves the modal open, painted and dismissible.
 
-One caveat, and it is the browser's rather than the kit's: **open each overlay from the gesture
-that asked for it.** A `showModal()` that runs with no user activation — from a timer, or after an
-`await` that outlived the click — has its close watcher grouped with the dialog below it, and then
-a single Escape closes both at once instead of the topmost only.
+One caveat, and it is the browser's rather than the kit's: **the second overlay's Escape can only
+be refused if both were opened by a real gesture.** A `showModal()` that runs from script — a timer,
+or after an `await` that outlived the click — still closes only the topmost, but its `cancel` event
+arrives **non-cancelable**, so `preventDefault()` on it is ignored and an "unsaved changes, stay
+open" guard silently stops working. Routing Escape through app state instead, which is what the
+typed wrappers do, is unaffected: the dialog closes and your state follows it.
+
+*Correction to 1.51.1, which said such a dialog has its close watcher grouped with the one below so
+that a single Escape closes both.* That happens only on a page that has received **no user input at
+all** — a test harness, never an app; six seconds after one click the overlays are still
+independent. Open overlays with real clicks in a test, or a stacking assertion fails for a reason
+that is not the kit. Both rules measured on Chromium 133 and 151, and pinned as a matrix in
+`browser/overlay-stack.mjs`.
 
 ## Drawer — `.fdy-drawer`
 > **Typed wrapper: `<FdyDrawer>`** — Vue (`:open` + `@close`) · React (`open` + `onClose`) · Blazor (`@bind-Open`). In those stacks use the wrapper; the markup below is for stacks without an adapter (and is what the wrapper renders).

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.1-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v1.52.1)
 
 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.1-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v1.52.1)
 
 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.1",
   "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"