@cahyo-dimas/freeday 1.51.0 → 1.52.0

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.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
+  were documented in isolation, so "can a confirm modal open over an open drawer?" had no answer in
+  the file — and the built CSS does not answer it either: the only overlay `z-index` in the bundle
+  belongs to the toast region. Both entries now state the rule, because both components are
+  `<dialog>` opened with `showModal()` and therefore enter the **top layer**, where paint order is
+  the order they were opened: the later modal is above the drawer with no `z-index` from either,
+  Escape closes the topmost first (so cancelling returns to the still-open drawer), and closing them
+  out of order leaves the survivor painted and dismissible.
+- **The one caveat is the browser's, and it is now written down**: open each overlay from the
+  gesture that asked for it. A `showModal()` 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 a
+  single Escape then closes both. Measured, not assumed: two untrusted `.click()` opens, one Escape,
+  both dialogs shut.
+### Added — guards
+- `browser/overlay-stack.mjs` (3 tests) proves that paragraph instead of restating it — the #041
+  lesson applied to a documentation change. Paint order is asserted in **pixels** at the overlap of
+  the two, because a modal dialog makes the rest of the document inert and `elementFromPoint` will
+  name the dialog whatever is really on top; the overlays are opened with **trusted** clicks, or the
+  close-watcher grouping above would fail the Escape assertion for a reason that is not the kit's.
+- **`pressKey` in the browser harness sent every key but Tab with virtual-key code 0** — delivered
+  to the page, but not acted on by the browser: Escape reached a `keydown` listener yet never closed
+  a native `<dialog>`. A dismissal guard written with it would have passed for the wrong reason and
+  reported a broken kit as fine. It now carries the real `windowsVirtualKeyCode` /
+  `nativeVirtualKeyCode` for the keys the suite presses.
+
 ## [1.51.0] — 2026-08-21
 ### Fixed
 - **A cartesian chart's axis text and dots grew with the container** (#042). `renderCartesian` built

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`
@@ -1049,6 +1054,18 @@ painted on top of a modal, because it will tell you the dialog is, even when it
 `__close`. The body scrolls; the footer never clips. `aria-labelledby` → the title's `id`;
 `data-close` on any button that should close it.
 
+**Stacking two overlays is supported.** Modal and drawer are both `<dialog>` opened with
+`showModal()`, so both enter the top layer and paint in the order they were opened — a confirm
+modal opened from inside an open drawer paints **above** it, and neither needs a `z-index` for
+that. Escape closes the topmost first, so cancelling returns to the still-open drawer; a second
+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.
+
 ## 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).
 
@@ -1056,6 +1073,11 @@ Temporary side panel on native `<dialog>` — left by default, `--right` to flip
 `__title` `__body` `__footer` `__close`. Open it from any
 `<button data-fdy-drawer="<dialog id>">`. Needs `freeday-drawer.js`.
 
+Opened with `showModal()`, so it is in the **top layer** on the same terms as the modal — including
+opening a modal over an open drawer, which is supported and described under
+[Modal → *Stacking two overlays*](#modal--fdy-modal). It slides in on `transform` and never animates
+opacity: wait on its position, not on `opacity`, if you need to know when it has arrived.
+
 ## Accordion — `.fdy-accordion`
 Native `<details>`, zero JS: `.fdy-accordion__item` on each `<details>`, content in
 `.fdy-accordion__panel`, the trigger is the `<summary>`.

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