Skip to content

fix(ui): align picker v2 shadow journeys - #471

Closed
abharms wants to merge 2 commits into
journey-to-the-shadow-domfrom
codex/shadow-picker-v2-test-fixes
Closed

abharms wants to merge 2 commits into
journey-to-the-shadow-domfrom
codex/shadow-picker-v2-test-fixes

Conversation

@abharms

@abharms abharms commented Nov 3, 2026 •

Copy link
Copy Markdown
Collaborator

Summary

  • update Bible Card, Bible Reader, and picker Shadow DOM journeys for the picker v2 screen flow and focus order
  • preserve the journeys' existing isolation, overlay ownership, hostile-style, geometry, and rapid-reopen coverage
  • keep Firefox from treating the scrollable version-list viewport as an extra Tab stop

Verification

  • 37/37 picker and popover unit tests passed
  • 42/42 full Shadow DOM Storybook Chromium journeys passed
  • 42/42 full Shadow DOM Storybook WebKit journeys passed
  • the formerly failing Firefox picker focus-order journey passes locally

The local full Firefox runner is intermittently rendering unrelated stories as Storybook's No Preview shell. The exact Firefox regression test is deterministic and green; CI remains the authoritative full Firefox run.

RetriggerView in GreptileConfidence Score: 4/5 Tier: apex

The new changes have no confirmed issues, but the previous closing-picker focus bug still needs fixing before merging.

Fix All in Claude CodeFindings

  1. P1 Closing picker steals focus ▶
Fix with agent prompt
### Issue 1
packages/ui/src/components/bible-version-picker/index.tsx:609-617
Closing the picker from Languages or Search Languages resets `view` to `versions`. That schedules this frame while `PopoverContent` remains mounted for its exit animation. The frame then focuses `language-entry` inside the closing picker. A user clicking an outside input can lose focus just after the click, and the focused button then disappears.

Skip this work when `isPopoverOpen` is false and check that the panel is still open inside the callback.

---

For each issue above, determine whether it is valid and should be fixed. If so, fix it directly.

Summary

Updates the Shadow DOM journeys for picker v2.

  • Tab skips the scrolling area and follows the picker’s v2 control order.
  • Isolation checks follow the picker’s language screens.

Browser tests were not rerun because workspace dependencies are not installed.

Reviews (3) · Last reviewed commit: "fix(ui): skip version list viewport in t..." · Reviewed by Greptile

@changeset-bot

changeset-bot Bot commented Nov 3, 2026 •

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: bf42d1f

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages
Name Type
@youversion/platform-react-ui Patch
vite-react Patch
@youversion/platform-core Patch
@youversion/platform-react-hooks Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@chatgpt-codex-connector

chatgpt-codex-connector Bot commented Nov 3, 2026 •

Copy link
Copy Markdown

Codex Review Summary

This comment shows the latest Codex review activity on this pull request.

Review Status Commit Review trigger
📝 Code Review ✅ Completed 2026-11-03T18:33:14.094410Z bf42d1f New commits
ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review" or "@codex security review".

Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings.

Comment thread packages/ui/src/i18n/locales/en.json Resolved
Comment on lines +609 to +617
const frame = window.requestAnimationFrame(() => {
const scope = popoverContentRef.current;
if (!scope) return;
if (view === 'languages' && previous === 'versions') {
scope.querySelector<HTMLElement>('[data-slot="language-back"]')?.focus();
return;
}
if (view === 'versions') {
scope.querySelector<HTMLElement>('[data-slot="language-entry"]')?.focus();

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P1 Closing picker steals focus

Closing the picker from Languages or Search Languages resets view to versions. That schedules this frame while PopoverContent remains mounted for its exit animation. The frame then focuses language-entry inside the closing picker. A user clicking an outside input can lose focus just after the click, and the focused button then disappears.

Skip this work when isPopoverOpen is false and check that the panel is still open inside the callback.

Prompt To Fix With AI
This is a comment left during a code review.
Path: packages/ui/src/components/bible-version-picker/index.tsx
Line: 609-617

Comment:
**Closing picker steals focus**

Closing the picker from Languages or Search Languages resets `view` to `versions`. That schedules this frame while `PopoverContent` remains mounted for its exit animation. The frame then focuses `language-entry` inside the closing picker. A user clicking an outside input can lose focus just after the click, and the focused button then disappears.

Skip this work when `isPopoverOpen` is false and check that the panel is still open inside the callback.

---

For each issue above, determine whether it is valid and should be fixed. If so, fix it directly.

Fix in Claude Code Fix in Cursor Fix in Codex

@abharms
abharms force-pushed the codex/shadow-picker-v2-test-fixes branch from be02975 to bf42d1f Compare November 3, 2026 18:31
@abharms abharms changed the title test(ui): reconcile main and picker v2 shadow journeys fix(ui): align picker v2 shadow journeys Nov 3, 2026
@abharms

abharms commented Nov 3, 2026

Copy link
Copy Markdown
Collaborator Author

@greptileai review

@abharms

abharms commented Nov 3, 2026

Copy link
Copy Markdown
Collaborator Author

Superseded by #472. The replacement starts from the corrected six-file diff and includes the validated retained-exit focus fix, without the stale review history from the earlier oversized branch topology.

@abharms abharms closed this Nov 3, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant