Skip to content

fix(ui): address shadow DOM review regressions (YPE-5713) - #388

Merged
abharms merged 3 commits into
journey-to-the-shadow-domfrom
codex/shadow-dom-review-fixes
Sep 10, 2026
Merged

abharms merged 3 commits into
journey-to-the-shadow-domfrom
codex/shadow-dom-review-fixes

Conversation

@abharms

@abharms abharms commented Sep 9, 2026

Copy link
Copy Markdown
Collaborator

Summary

Targets journey-to-the-shadow-dom after PR #381.

  • Preserve verse selection and re-anchoring on touch in light and shadow DOM by capturing an event-keyed verse verdict before Radix defers outside handling.
  • Restore focus for initially anchored and conditionally mounted verse actions, while preserving ordinary reader and outside-focus behavior.
  • Let the actual reader settings body scroll within the existing popover collision-height cap.
  • Reconcile ADR 0007, rollout-plan and README guidance on document-owned fonts, root-font/rem sizing, CSS customization, and deferred overlay coordination. Add a patch changeset.

Verification

  • Forced build, typecheck and lint pass; 1,291 package tests pass.
  • All 25 focused Chromium shadow/regression stories pass, including PR test(ui): prove nested overlays through the production shadow seam #381's eight scenarios.
  • Eight native Chromium checks pass: touch/mouse selection in both DOM scopes, focus restoration, and real 800×360 settings scrolling/hit testing. The identical checks reproduce all five bug cases on the untouched base.
  • Public declarations are unchanged; bundle budgets, tree-shaking and i18n checks pass (existing i18n warnings remain).
  • Independent Standards, Spec and Compatibility reviews found no required changes. Compatibility coverage limits remain for external/Expo layouts, standalone/demo composition and popover-specific iframe behavior; no new regression was demonstrated.

The broader 39-story run passed every test but exited nonzero for the previously reproduced Default-story font-load rejection with a placeholder app key. The focused 25-story run exits cleanly.

Scope

No public API expansion, new overlay manager, font loader, unit rewrite, or broader automatic-isolation rollout. PR #381's documented peer-concurrency and rapid/nested final-focus gaps remain production gates for YPE-5356.

Greptile Summary

This PR addresses touch re-anchoring, focus restoration, and constrained settings scrolling regressions while reconciling Shadow DOM documentation.

  • Captures verse-pointer verdicts before deferred outside-interaction handling.
  • Preserves focus targets across virtual anchors and conditional mounting.
  • Makes the reader settings body scroll within the popover’s collision-height cap.
  • Adds focused browser stories, unit coverage, documentation updates, and a patch changeset.

Confidence Score: 5/5

The PR appears safe to merge because no blocking failure remains.

No blocking failure remains.

Important Files Changed

Filename Overview
packages/ui/src/components/verse-action-popover.tsx Adds event-keyed touch handling and lifecycle-aware focus capture and restoration for verse-action popovers.
packages/ui/src/components/bible-reader.tsx Makes the reader settings body shrinkable and vertically scrollable within the existing popover height constraint.
packages/ui/src/components/verse-action-popover.test.tsx Expands focus-restoration coverage for virtual anchors, conditional mounting, document roots, and shadow roots.
packages/ui/src/components/bible-reader.stories.tsx Adds browser coverage for touch selection re-anchoring, outside dismissal, and focus preservation.
packages/ui/src/components/bible-theme-settings.stories.tsx Adds constrained-viewport coverage proving settings controls remain scrollable and hit-testable.
docs/adr/0007-prototype-shadow-dom-style-isolation.md Clarifies document-owned font loading, root-font sizing, and the prototype’s overlay-coordination boundaries.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
  A[Verse pointer interaction] --> B{Pointer targets verse?}
  B -->|Yes| C[Record event-keyed verse verdict]
  B -->|No| D[Allow outside dismissal]
  C --> E[Radix deferred outside handling]
  E --> F[Prevent dismissal and re-anchor]
  D --> G[Close popover and retain outside focus]
  F --> H[Keep verse actions open]
  G --> I[Clear selection]
  J[Popover opens] --> K[Capture prior focus target]
  K --> L[Focus action content]
  L --> M[Popover closes]
  M --> N{Outside interaction retained focus?}
  N -->|No| O[Restore captured target]
  N -->|Yes| P[Preserve newly focused outside element]
Loading

Reviews (3): Last reviewed commit: "test(ui): wait for placement before meas..." | Re-trigger Greptile

@changeset-bot

changeset-bot Bot commented Sep 9, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 0df3443

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 Sep 9, 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-09-09T19:22:46.361679Z 0df3443 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.

@abharms abharms changed the title fix(ui): address shadow DOM review regressions fix(ui): address shadow DOM review regressions (YPE-5713) Sep 9, 2026
@abharms
abharms requested a review from cameronapak September 9, 2026 19:36
@abharms abharms self-assigned this Sep 9, 2026

@cameronapak cameronapak left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Review

No Jira. Spec is the PR body.

Summary

Standards: 1 non-blocking issue — localized label in test query. Spec: 0 must-fix — none.

For Agents: review context

PR #388 at 0df3443; diff is 0222ae9...0df3443. Focused local UI tests could not run because dependencies were absent and npm was unavailable. Greptile is informational only.

By Code Reviewer bot, sent on behalf of Cam.

await user.click(priorControl);
const dialog = await screen.findByRole('dialog');
await waitFor(() => expect(document.activeElement).toBe(dialog));
await user.click(screen.getByRole('button', { name: 'Copy' }));

@cameronapak cameronapak Sep 10, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

issue (non-blocking): Avoid hard-coding the localized Copy label; focus-restoration coverage should not depend on English UI text.

For Agents: stable copy action lookup

docs/testing.md requires stable roles and behavior rather than i18n prose. This new query uses the exact English accessible name. Target the action through the translation key or a stable behavior-level hook instead.

By Code Reviewer bot, sent on behalf of Cam.

@abharms
abharms merged commit dae9a49 into journey-to-the-shadow-dom Sep 10, 2026
15 checks passed
@abharms
abharms deleted the codex/shadow-dom-review-fixes branch September 10, 2026 13:21
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.

3 participants