@godxjp/ui 25.0.0 → 25.1.0

package/dist/components/data-entry/select.d.ts

@@ -127,5 +127,31 @@ export declare const SelectItem: React.ForwardRefExoticComponent<Omit<React.HTML
     /** @deprecated Radix-only; has no effect. */
     asChild?: boolean;
 } & React.RefAttributes<HTMLDivElement>>;
+/**
+ * A RULE, NOT A ROLE — `role="separator"` is not a child a `listbox` may own (gh#643).
+ *
+ * It rendered react-aria's `<Separator>`, so a divider between two `SelectGroup`s landed in the
+ * viewport as `<div role="separator">`, a direct child of `role="listbox"`. ARIA 1.2 lets a
+ * `listbox` own `option` and `group` and nothing else, so axe's `aria-required-children` fires
+ * CRITICAL on the whole viewport: "Element has children which are not allowed: [role=separator]".
+ * Measured by `check:frame-axe`'s overlay scope on `/isolate/data-entry-select-matrix`, 1 node at
+ * each of 1440 / 375 / 320 — and only ever with the list OPEN, which is why nothing saw it for the
+ * two releases the gate has existed. `menu` DOES own `separator`, so `DropdownMenuSeparator` is
+ * correct as it stands; this is a listbox-only rule.
+ *
+ * MAKING IT A `group` INSTEAD WAS REJECTED. It would satisfy the rule and it would lie: the
+ * grouping is already carried by the two `SelectGroup` sections either side of it, and a screen
+ * reader would then announce an empty third group between them. The divider is decoration over a
+ * structure that is already announced, so it says so — `aria-hidden`, which takes it out of the
+ * accessibility tree and therefore out of the listbox's owned children. Same call `SelectLabel`
+ * already makes one component up, where the group's `<header>` renders `role="presentation"`
+ * because `aria-labelledby` is what actually names the section.
+ *
+ * DROPPING `AriaSeparator` FOR A PLAIN `<div>` WAS TRIED FIRST AND IS WRONG. It is a
+ * `createLeafComponent` collection node, not a styled element: react-aria builds the listbox's
+ * collection from the element TYPES of its children, so an unrecognised `<div>` truncates the
+ * collection and every option after the divider stops existing. `select-groups.test.tsx` caught
+ * it immediately — "Unable to find an accessible element with the role option and name バナナ".
+ */
 export declare const SelectSeparator: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;
 export {};

package/dist/components/data-entry/select.js

@@ -533,7 +533,15 @@ const SelectSeparator = React.forwardRef(
         ref,
         "data-slot": "select-separator",
         className: cn("ui-select-separator", className),
-        ...splitDomProps(props).attributes
+        ...splitDomProps(props).attributes,
+        render: (separatorProps) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            ...separatorProps,
+            role: void 0,
+            "aria-hidden": "true"
+          }
+        )
       }
     );
   }

package/dist/contracts/measurement.json

@@ -1,6 +1,6 @@
 {
   "$comment": "AUTO-GENERATED by scripts/gen-measurement-contract.mjs — do not edit. Read this instead of guessing: docs/MEASUREMENT-CONTRACT.md.",
-  "version": "25.0.0",
+  "version": "25.1.0",
   "targetSize": {
     "standard": "WCAG 2.2 SC 2.5.8 Target Size (Minimum), level AA — 24×24 CSS px",
     "min": 24,

package/docs/FRAME-A11Y-CI.md

@@ -31,6 +31,7 @@ pnpm check:frame-axe -- /isolate/layout-topbar   # one route, while fixing
 | tags      | `wcag2a` · `wcag2aa` · `wcag21aa` · `wcag22aa` — **the consumer's set, verbatim** |
 | routes    | every `/isolate/<id>` in `window.__STORY_MANIFEST__` + every `/showcase/<id>`     |
 | viewports | 1440×900 · 375×667 · **320×568**                                                  |
+| states    | as rendered, **plus** one overlay OPEN on the routes that declare `data-axe-open` |
 
 320 is not decoration: it is WCAG 2.2 SC 1.4.10's reflow width, it is the width the consumer's
 nightly runs, and it is the width gh#639 failed at while 390 passed.
@@ -39,6 +40,114 @@ Showcases are included on purpose. They are the only frames here shaped like a r
 page, a landmark tree, a focus order — which is precisely the class the component frames cannot
 reach and the consumer has been carrying alone.
 
+## The overlay scope — opening the thing before measuring it
+
+A menu, dialog, listbox or popover that is closed at rest **paints nothing**. Every axe rule whose
+condition only exists while one is open was therefore outside this gate's field of view, not passing
+it. The gate shipped in 24.1.0 without this half; it is back (gh#643 item 4), rebuilt from the
+version #492 deleted.
+
+A demo opts in **declaratively**, from the demo itself:
+
+```tsx
+// the trigger, when it forwards DOM props
+<DialogTrigger asChild>
+  <Button data-axe-open size="sm">仕訳新規作成</Button>
+</DialogTrigger>
+
+// the region that owns it, when the component renders its own trigger
+<CardContent data-axe-open>
+  <FormField id="status" label="状態"><Select … /></FormField>
+</CardContent>
+
+// right-click, for the gesture nothing else reaches
+<Button data-axe-open="contextmenu" variant="outline">…</Button>
+```
+
+What the gate then does, per route/viewport, **after** the default-state scan (opening an overlay is
+destructive to the state that scan measures):
+
+1. Take the **first** `[data-axe-open]` on the page. No declaration ⇒ the route skips this entirely
+   and costs nothing.
+2. Press **Escape** up to three times while any overlay is mounted. Several demos deliberately
+   render one open at rest (`popover`'s anchored panel, `dropdown-menu`'s `defaultOpen` card), and a
+   modal one makes the rest of the page unreachable. Dismissing first also makes the measurement a
+   real **closed → open** transition rather than whatever the demo happened to leave mounted.
+3. Resolve the click target: the declaring element itself when it matches
+   `button, [role=button], [role=combobox], [role=menuitem], a[href], summary`, otherwise the first
+   such control inside it. (`Select` and `DatePicker` own their trigger DOM and forward no `data-*`
+   to it — hence the declare-on-the-region form. `DatePicker`'s combobox `<input>` is what opens the
+   calendar, and it is what gets pressed.)
+4. Click (or right-click), then wait until **one more** overlay is mounted
+   (`[data-radix-popper-content-wrapper], [role=dialog], [role=alertdialog], [role=menu],
+[role=listbox]`) — never a bare timer.
+5. Scan again, and key the rows `@<viewport>+open`:
+
+```
+/isolate/data-entry-select-matrix @1440+open aria-required-children
+```
+
+**A declaration whose overlay never opens is a gate FAILURE**, recorded as `overlay-did-not-open`
+and red on the spot. A broken declaration otherwise reads exactly like a clean frame, which is the
+one thing this scope exists to prevent.
+
+**Routes declaring an open step today — 7 declared, 7 open:** `data-entry-select`,
+`data-entry-select-matrix`, `data-entry-date-picker`, `data-display-popover`,
+`navigation-dropdown-menu`, `feedback-dialog`, `feedback-sheet`. (The old `navigation-context-menu`
+frame is gone — `ContextMenu` was folded into `DropdownMenu trigger={["contextMenu"]}` in v23 — so
+the right-click gesture is declared on that card of `navigation-dropdown-menu` instead.)
+
+### What it found, and the proof it has teeth
+
+**`aria-required-children`, CRITICAL, on `/isolate/data-entry-select-matrix` at all three
+viewports.** `SelectSeparator` rendered react-aria's `<Separator>`, i.e. `role="separator"`, as a
+direct child of the viewport's `role="listbox"`. ARIA 1.2 lets a `listbox` own `option` and `group`
+and nothing else. Fixed in `src/components/data-entry/select.tsx` — the divider is decoration over a
+structure the two `SelectGroup`s already announce, so it now renders `aria-hidden` with no role.
+`menu` **does** own `separator`, so `DropdownMenuSeparator` is correct as it stands. Regression test:
+`src/components/data-entry/__tests__/select-groups.test.tsx`.
+
+The control run is the part worth keeping. On the **same defective build**:
+
+| declarations | result                                                                      |
+| ------------ | --------------------------------------------------------------------------- |
+| removed      | ✓ green, `0 route(s) opened a declared overlay`                             |
+| present      | ✗ red, 3 × `aria-required-children` on `@1440+open / @375+open / @320+open` |
+
+A `data-axe-open` on a `Button` that opens nothing turns the gate red with three
+`overlay-did-not-open` rows, one per viewport.
+
+**The original 2026-09 proof no longer reproduces, and the reason matters more than the proof.** That
+commit disabled `src/components/general/inert-background.ts` and watched `aria-hidden-focus` go red
+on `select`, `dropdown-menu` and `context-menu`. Disabling it today changes nothing measurable:
+these overlays are **react-aria-components**, not Radix: react-aria inerts the background itself —
+`#root` plus three focus sentinels carry `inert` the moment a listbox opens, with no `aria-hidden`
+anywhere on them. Stripping every `inert` attribute immediately before the scan still leaves the
+page clean and `aria-hidden-focus` in axe's `passes` bucket, because that rule needs an
+`aria-hidden` ancestor to fire at all. No `src/` component imports `useInertHiddenBackground` any
+more; the only importer is the Radix parity fixture
+`src/components/data-entry/__tests__/radix-select.fixture.tsx`. So `inert-background.ts` is dead
+for `Select` and `DropdownMenu`, and the overlay scope's value is no longer the rule it was built
+for.
+
+Be careful with the stronger version of that claim, because the first draft of this paragraph made
+it and it is false: `data-aria-hidden` is **not** absent from the built preview. The `aria-hidden`
+npm package ships inside the `command` chunk (`cmdk`'s dependency tree), so the marker exists in
+the bundle even though no first-party overlay sets it. What is measured above is the narrow claim —
+`Select` and `DropdownMenu` background-inert via `inert`, not `aria-hidden` — not a repo-wide
+absence. It is still the rule class: `aria-required-children` is the same
+shape, and nothing else here could see it.
+
+### What is still outside this scope, stated rather than hidden
+
+- Only the **first** declaration per route is exercised. A route with several distinct overlays is
+  measured on one of them.
+- Only **one step deep**: submenus, an overlay opened from inside another, and the state after a
+  selection are not reached.
+- **Keyboard opening is not exercised** — the gate clicks. A trigger that opens on click but not on
+  `Enter`/`Space` passes.
+- The overlay's **focus trap and focus order** are not asserted; axe cannot see a JS focus trap.
+
 ## What it found on its first run — and what came of it
 
 54 rows, **159 violation nodes**, on code that passed every other gate in this repository. Fixing
@@ -105,12 +214,10 @@ The gate fails on a key that is **not** in the baseline, and on a baselined key
 
 ## What this gate does NOT do — stated, not hidden
 
-The gate deleted in #492 did three things this one does not, and each is a real gap:
+The gate deleted in #492 did three things this one does not. One is now back; two are still gaps:
 
-1. **No overlay scope.** It scans the frame as rendered. A menu, dialog, listbox or popover that is
-   closed at rest is never measured, so `aria-hidden-focus` and friends stay outside its field of
-   view. The old gate opened one overlay per frame from a `data-axe-open` attribute; that attribute
-   was removed from the demos along with the gate and would have to come back.
+1. ~~**No overlay scope.**~~ Restored — see [the overlay
+   scope](#the-overlay-scope--opening-the-thing-before-measuring-it) above.
 2. **No chrome/component split.** The old gate held the preview toolbar to zero violations and
    allowlisted the component scope separately. `/isolate/**` renders the demo alone, so there is
    little chrome to separate — but `/showcase/**` is scanned whole.
@@ -127,11 +234,16 @@ which changes what `color-contrast` resolves a background to). Two sweeps after
 
 ## Cost
 
-|                                    |                                                                                     |
-| ---------------------------------- | ----------------------------------------------------------------------------------- |
-| full sweep                         | **3m20s** locally · **12m01s** on the self-hosted runner — 215 routes × 3 viewports |
-| sequential                         | ~55 min — the three viewport passes run concurrently, which is the whole difference |
-| showcase only (`--scope=showcase`) | 30s                                                                                 |
+|                                       |                                                                                                                |
+| ------------------------------------- | -------------------------------------------------------------------------------------------------------------- |
+| full sweep                            | **3m20s** locally · **12m01s** on the self-hosted runner — 215 routes × 3 viewports                            |
+| sequential                            | ~55 min — the three viewport passes run concurrently, which is the whole difference                            |
+| showcase only (`--scope=showcase`)    | 30s                                                                                                            |
+| full sweep **with the overlay scope** | **2m14s** on the machine gh#643 item 4 was built on, same 215 × 3 — the runner number has not been re-measured |
+
+The overlay pass is bounded by declaration: only the 7 declaring routes pay it (21 extra scans plus
+their open steps), and no `/showcase/**` route declares one, so `--scope=showcase` — the merge lane —
+is unchanged.
 
 `--shard=i/n` is in the script for the day the sweep outgrows the lane. Using it adds check-run
 names, which costs nothing here because none of them is in `REQUIRED_CI_CHECK_RUNS`.

package/docs/data-display/popover.tsx

@@ -61,7 +61,9 @@ export default function Demo() {
           <CardContent>
             <Popover open={filterOpen} onOpenChange={setFilterOpen}>
               <PopoverTrigger asChild>
-                <Button variant="outline">
+                {/* data-axe-open: check:frame-axe presses this before its overlay scan, so the
+                    panel is measured OPEN as well as closed. See docs/FRAME-A11Y-CI.md. */}
+                <Button data-axe-open variant="outline">
                   <SlidersHorizontal />
                   絞り込み
                 </Button>

package/docs/data-entry/date-picker.tsx

@@ -41,7 +41,9 @@ export default function Demo() {
               形式に整形され、 解釈できない入力は元の値へ復帰する。
             </CardDescription>
           </CardHeader>
-          <CardContent>
+          {/* data-axe-open on the region: DatePicker owns its trigger DOM. The gate presses the
+              `[role="combobox"]` input inside, which is what opens the calendar. */}
+          <CardContent data-axe-open>
             <FormField id="issue-date" label="発行日" required>
               <DatePicker
                 id="issue-date"

package/docs/data-entry/select-matrix.tsx

@@ -37,7 +37,9 @@ export default function Demo() {
               content. Radix owns keyboard focus and collision handling.
             </CardDescription>
           </CardHeader>
-          <CardContent>
+          {/* data-axe-open on the region: the gate presses the first `[role="combobox"]` inside it,
+              which is the compound SelectTrigger. */}
+          <CardContent data-axe-open>
             <Flex direction="col" gap="md">
               <FormField
                 id="compound-controlled"

package/docs/data-entry/select.tsx

@@ -90,7 +90,10 @@ export default function Demo() {
               Pass an options array; name= submits the value with the form.
             </CardDescription>
           </CardHeader>
-          <CardContent>
+          {/* data-axe-open on the REGION, not the trigger: the data-driven Select renders its own
+              trigger and forwards no `data-*` to it, so the gate resolves the `[role="combobox"]`
+              inside this element and presses that. See docs/FRAME-A11Y-CI.md. */}
+          <CardContent data-axe-open>
             <FormField id="status" label="状態">
               <Select
                 id="status"

package/docs/feedback/dialog.tsx

@@ -64,7 +64,10 @@ export default function Demo() {
           <CardContent>
             <Dialog open={createOpen} onOpenChange={setCreateOpen}>
               <DialogTrigger asChild>
-                <Button size="sm">仕訳新規作成</Button>
+                {/* data-axe-open: check:frame-axe presses this before its overlay scan. */}
+                <Button data-axe-open size="sm">
+                  仕訳新規作成
+                </Button>
               </DialogTrigger>
               <DialogContent className="max-w-lg">
                 <DialogHeader>

package/docs/feedback/sheet.tsx

@@ -104,7 +104,8 @@ export default function Demo() {
           <CardContent>
             <Sheet open={filterOpen} onOpenChange={setFilterOpen}>
               <SheetTrigger asChild>
-                <Button variant="outline" size="sm">
+                {/* data-axe-open: check:frame-axe presses this before its overlay scan. */}
+                <Button data-axe-open variant="outline" size="sm">
                   <SlidersHorizontal />
                   詳細検索
                 </Button>

package/docs/navigation/dropdown-menu.tsx

@@ -105,7 +105,14 @@ export default function Demo() {
             <Flex direction="row" align="center" gap="md" wrap>
               <DropdownMenu trigger={["contextMenu"]}>
                 <DropdownMenuTrigger asChild>
-                  <Button variant="outline">仕訳 JE-0042 を右クリック</Button>
+                  {/* data-axe-open="contextmenu": the gate RIGHT-clicks this before its overlay
+                      scan. It is declared here rather than on one of the click menus above
+                      because the `defaultOpen` card at the bottom of this page already holds a
+                      click-opened menu mounted at rest, so the click path is measured either way
+                      — the right-click path is the one nothing else on this page reaches. */}
+                  <Button data-axe-open="contextmenu" variant="outline">
+                    仕訳 JE-0042 を右クリック
+                  </Button>
                 </DropdownMenuTrigger>
                 <DropdownMenuContent>
                   <DropdownMenuItem>編集</DropdownMenuItem>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@godxjp/ui",
-  "version": "25.0.0",
-  "godxUiMcp": "25.0.0",
+  "version": "25.1.0",
+  "godxUiMcp": "25.1.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",