fix(docsite): show DropdownMenuRadioGroup in properties preview by Kyujenius · Pull Request #5976 · facebook/astryx

Kyujenius · 2026-09-03T17:34:28Z

Summary

Give DropdownMenuRadioGroup a playground wrapper (DropdownMenu with a Sort trigger, mounted open) and two DropdownMenuRadioItem children, so the Properties preview shows both choices on first load instead of an empty container.
Bridge the wrapper's onOpenChange back into preview state so selecting still closes the menu and the trigger reopens it.
Stop DropdownMenu from moving focus into a controlled menu that mounts already open, so the preview (or any page that renders a menu open on load) does not drop keyboard users into it.
Cover the generated component registry, the preview's render-time first-load state, and the menu's mount-open focus rule.

Notes

The trigger label stays Sort after selection by design. DropdownMenu reads only button.label, and the selected state is shown by the radio mark inside the menu, matching the existing storybook story.
The focus change lives in core, not the preview: DropdownMenu's compound path treated a controlled isMenuOpen that is true at mount like a programmatic open and focused the first item. A mount is not an open anyone asked for, so it now leaves focus alone; the exemption ends with the first close, and every later open follows the modality rules from fix(dropdown-menu): follow input modality for initial focus so pointer opens don't highlight the first item #4594 (keyboard/programmatic → first item, pointer → menu container). Items-array mode was unaffected and is unchanged.
Two changesets, both @astryxdesign/core patches: the .doc.mjs playground change and the DropdownMenu focus change.

AST-009 classification. No real-AT trigger. The change moves only the initial focus destination when a controlled menu mounts already open (FR2: focus destination is not a trigger by itself); roles, names, and announcements are unchanged, and no announcement claim is made. Evidence: Unit (jsdom, rAF-driven focus assertions) and Real browser (headless Chromium: document.activeElement on load and after a post-mount open).

Verification

Check	Result	Evidence
Two choices on first load	Pass	Docsite `/components/DropdownMenuRadioGroup?tab=properties`: `Newest` (checked) and `Oldest` rendered without a click.
Selection, close, reopen	Pass	Selecting `Oldest` moves the check, closes the menu, and updates the `value` knob; the trigger reopens it.
Initial focus (mount-open)	Pass	Headless Chromium on the docsite page and on the new `core-dropdownmenu--mounted-open` story: `document.activeElement` is `<body>` on load.
Post-mount open still focuses the first item	Pass	After a close, Enter on the trigger focuses `Newest` (#4594 unchanged).

pnpm exec vitest run packages/core — 9127 passed; the one failure (TabList roving tab stop) is the pre-existing rAF race noted in fix(dropdown-menu): follow input modality for initial focus so pointer opens don't highlight the first item #4594 and passes in isolation
pnpm -F @astryxdesign/docsite generate && pnpm -F @astryxdesign/docsite test — 484 passed
pnpm -F @astryxdesign/core typecheck, typecheck:docs, pnpm -F storybook typecheck, pnpm check:changesets
Console clean on the docsite page and the story.

Screenshot

AS-IS

TO-BE (video: open Sort, select Oldest)

updated at 2026-09-05 : default as opened
updated at 2026-09-06: default as not focused on Dropdown Items

2026-09-05.mov

2026-09-06-final.mov

vercel · 2026-09-03T17:34:32Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
astryx	Ready	Preview	Sep 6, 2026 10:59am UTC

cixzhang

Thanks for putting this under a real DropdownMenu; that preserves the menu semantics and keyboard owner. One thing still blocks this from closing #5888: the PR explicitly starts with the trigger closed, while the issue requires at least two radio choices on first load. Please keep the menu scaffold, make those choices available immediately, and cover that rendered first-load state; selecting one should still move the checked state without errors.

If you'd rather talk it through with someone, we're in Discord.

[Reviewed by Robohands]

Kyujenius · 2026-09-04T05:50:59Z

@cixzhang

Correcting my note above: isMenuOpen is viable and my reason for ruling it out was wrong — wrapperProps already holds the wrapper's value in state and injects a real onChange, so wrapper.props is only the seed. The open pair is
just the one that was never wired.

However, I'd rather not add isMenuOpen as a second hardcoded name there. Following #5982, generate-data.mjs could derive a wrapper's value/onChange-style pairs from the wrapper component's documented props — no authoring-type change, since PlaygroundConfig is generated and already carries overlayControl for the same purpose on the previewed component. Either way I'd add the first-load coverage at render time.

Is that in scope for #5888, or would you prefer this PR stay minimal with a separate issue for the bridge?

…adio-group-preview

github-actions · 2026-09-05T15:06:37Z

PR Analysis Report

📚 Storybook Preview

View Storybook for this PR
GitHub Pages may take up to a minute to hydrate after deploy.

🧪 Sandbox Preview

View Sandbox for this PR
GitHub Pages may take up to a minute to hydrate after deploy.

Modified Components

DropdownMenu _{(@astryxdesign/core)} · View in Storybook

Metric	Before	After	Delta
Bundle Size (ESM)	N/A	N/A	N/A
Lines of Code	N/A	2108	-
Complexity	N/A	Very High (238)	-

Bundle Size Summary

Package	Size (ESM)	Size (CJS)	Gzipped
@astryxdesign/core	N/A	4.8KB	1.2KB

Accessibility Audit

Status: No accessibility violations detected.

Visual Regression

Status: No visual change across 2 compared shot(s).

_{Generated by PR Enrichment workflow | Storybook | Sandbox | View full report}

cixzhang

Thanks for making the choices immediately available and keeping them inside a real menu. One accessibility issue still blocks this: at first load, Chromium moves focus from the page directly into Newest because the wrapper is mounted controlled-open. That drops keyboard users into the middle of the preview before they choose to interact with it. Please keep both radio choices visible on first load without stealing focus, and add browser-level coverage for the initial focus state; selection, checked-state movement, close, and reopen otherwise work.

If you'd rather talk it through, we're in Discord.

[Reviewed by Robohands]

…dy open

Kyujenius · 2026-09-06T00:21:05Z

@cixzhang Fixed in core: a controlled DropdownMenu that mounts with isMenuOpen true no longer moves focus into the first item; only an open after mount does, so #4594 behavior is unchanged.

Covered by three jsdom tests, a new MountedOpen story, and headless Chromium on the docsite page and the story — document.activeElement stays on <body> at load. AST-009 classification (FR2, no real-AT trigger) is in the PR body.

cixzhang

Thanks for fixing the first-load visibility and focus theft. One keyboard path still blocks this: in Chromium, after focus reaches the already-open Sort trigger, ArrowDown leaves focus on the trigger, while Enter closes the menu. Both radio items remain outside the tab order, so keyboard users must close and reopen the preview before they can choose either option.

Please keep initial focus where it is while letting the focused trigger move into an already-open menu, and cover that path in real-browser testing. The menu roles, names, selection, checked-state movement, close, and reopen otherwise work.

If you'd rather talk it through, we're in Discord.

[Reviewed by Robohands]

LayoutFooter renders an empty landmark bar on its own, so the docsite properties-tab preview showed an empty stage on first load. Seed representative footer content and wrap it in a Layout parent via playground defaults, mirroring the sibling LayoutHeader fixture, plus docsite tests covering the non-empty preview state and registry shape. Scoped to LayoutFooter only; the DropdownMenuRadioGroup half is dropped here so the radio-item accessibility fix can converge in facebook#5976 (per maintainer review on facebook#5975). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: 1f322fc5-62a9-4f66-ad77-ef2b16a940ff

… menu

Kyujenius · 2026-09-06T10:59:31Z

@cixzhang Thanks for the clear repro — that path was a gap I'd missed.

With the menu open and focus on the trigger, ArrowDown now moves into the first item (handleButtonKeyDown); Enter/Space still toggle. Covered by a jsdom test and verified in headless Chromium on both the docsite page and the MountedOpen story: a trusted ArrowDown on the Sort button lands focus on Newest without closing and reopening.

cixzhang

Thanks, this now fixes the full path for me: initial focus stays put, ArrowDown enters cleanly, selection moves, and close/reopen preserves it.

[Reviewed by Robohands]

fix(docsite): show DropdownMenuRadioGroup in properties preview

33b2248

Kyujenius requested review from cixzhang, imdreamrunner and josephfarina as code owners September 3, 2026 17:34

github-actions Bot added community Authored by a community contributor (not on the eng/design team) needs:code-review High-risk change (new package/component/API) — needs human code review before merge labels Sep 3, 2026

meta-cla Bot added the CLA Signed This label is managed by the Meta Open Source bot. label Sep 3, 2026

vercel Bot deployed to Preview September 3, 2026 17:39 View deployment

chore: add changeset for DropdownMenuRadioGroup preview fix

a2c4e0e

vercel Bot deployed to Preview September 3, 2026 17:56 View deployment

Kyujenius mentioned this pull request Sep 3, 2026

fix(docsite): show CheckIndicator in properties preview #5972

Merged

cixzhang mentioned this pull request Sep 3, 2026

docs(LayoutFooter): seed playground preview fixture (#5895) #5975

Open

cixzhang requested changes Sep 3, 2026

View reviewed changes

Kyujenius added 2 commits September 5, 2026 23:22

Merge remote-tracking branch 'upstream/main' into fix/dropdown-menu-r…

dae0489

…adio-group-preview

fix(docsite): open the DropdownMenuRadioGroup preview menu on first load

5f36283

github-actions Bot added the needs:design-review Affects visuals — Design should review label Sep 5, 2026

github-actions Bot requested review from cixzhang, cvkxx, ernestt, kentonquatman and rubyycheung September 5, 2026 14:44

vercel Bot deployed to Preview September 5, 2026 14:47 View deployment

github-actions Bot added a commit that referenced this pull request Sep 5, 2026

Deploy PR #5976 preview

71e9eaf

cixzhang requested changes Sep 5, 2026

View reviewed changes

fix(DropdownMenu): keep focus put when a controlled menu mounts alrea…

ad5e359

…dy open

github-actions Bot requested a review from cixzhang September 6, 2026 00:13

vercel Bot deployed to Preview September 6, 2026 00:15 View deployment

github-actions Bot added a commit that referenced this pull request Sep 6, 2026

Deploy PR #5976 preview

442c971

cixzhang requested changes Sep 6, 2026

View reviewed changes

fix(DropdownMenu): let ArrowDown on the trigger enter an already-open…

6a46c72

… menu

github-actions Bot requested a review from cixzhang September 6, 2026 10:56

vercel Bot deployed to Preview September 6, 2026 10:59 View deployment

github-actions Bot added a commit that referenced this pull request Sep 6, 2026

Deploy PR #5976 preview

bcc6a52

cixzhang approved these changes Sep 6, 2026

View reviewed changes

github-actions Bot removed the needs:code-review High-risk change (new package/component/API) — needs human code review before merge label Sep 6, 2026

Navigation Menu

Uh oh!

fix(docsite): show DropdownMenuRadioGroup in properties preview - #5976

fix(docsite): show DropdownMenuRadioGroup in properties preview#5976
Kyujenius wants to merge 6 commits into
facebook:mainfrom
Kyujenius:fix/dropdown-menu-radio-group-preview

Kyujenius commented Sep 3, 2026 •

edited

Loading

Uh oh!

vercel Bot commented Sep 3, 2026 •

edited

Loading

Uh oh!

cixzhang left a comment

Uh oh!

Kyujenius commented Sep 4, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Sep 5, 2026 •

edited

Loading

Uh oh!

cixzhang left a comment

Uh oh!

Kyujenius commented Sep 6, 2026

Uh oh!

cixzhang left a comment

Uh oh!

Kyujenius commented Sep 6, 2026

Uh oh!

cixzhang left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

Kyujenius commented Sep 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Notes

Verification

Screenshot

Uh oh!

vercel Bot commented Sep 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

cixzhang left a comment

Choose a reason for hiding this comment

Uh oh!

Kyujenius commented Sep 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Sep 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Analysis Report

📚 Storybook Preview

🧪 Sandbox Preview

Modified Components

Bundle Size Summary

Accessibility Audit

Visual Regression

Uh oh!

cixzhang left a comment

Choose a reason for hiding this comment

Uh oh!

Kyujenius commented Sep 6, 2026

Uh oh!

cixzhang left a comment

Choose a reason for hiding this comment

Uh oh!

Kyujenius commented Sep 6, 2026

Uh oh!

cixzhang left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Kyujenius commented Sep 3, 2026 •

edited

Loading

vercel Bot commented Sep 3, 2026 •

edited

Loading

Kyujenius commented Sep 4, 2026 •

edited

Loading

github-actions Bot commented Sep 5, 2026 •

edited

Loading