fix(a11y): keep portaled Thinking menu inside aria-modal (D7)

[BrianGenisio]

Summary

Closes #51 ([a11y][D7]). The Thinking menu was relocated to document.body to escape the scrolling settings modal. After D1, non-overlay body children are marked inert, so the open menu was outside the aria-modal dialog and inert for AT and keyboard users.

Spike

Two options from the audit / resolution plan:

1. Tactical aria-owns — keep body portal; point the toggle at the menu.
2. Structural — native popover / top layer (or otherwise keep the menu in the dialog subtree); possibly delete portal-dropdown.js.

Choice: keep the portal, but mount into the nearest .modal-overlay (sibling of .modal-dialog) instead of document.body. Falls back to body when there is no modal.

aria-owns is not enough here: D1's body inert observer still removes a body-portaled menu from the interaction tree. Full popover rewrite would also work, but this is the smaller change that restores containment, clears inert, and keeps the existing positioning / clipping behavior.

Changes

• PortalDropdown.getPortalRoot() prefers .modal-overlay
• CSS comment updated for the new host
• DOM tests cover containment, non-inert ancestry, and selecting an option while Settings stays open

No design-system change. D2–D5 / A6 / A9 left alone.

Test plan

• npm test (D7 harness: menu parent is the overlay; not under [inert]; select High while modal open)
• axe shrink-only gate — passed; live check now reports menu inside dialog: true (was false); no baseline shrink (axe counts unchanged)
• Keyboard: open Settings → Thinking → Arrow/Enter through options; Escape returns to toggle; modal focus trap still holds
• Visual: menu still clears the scrolling modal body / footer (light + dark)
• VoiceOver (or equivalent): with Settings + Thinking open, options are reachable inside the dialog context

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 2ea12b0b-d12d-455f-89c4-bc078444c17c

📥 Commits

Reviewing files that changed from the base of the PR and between cbb9a6f and 21098dc.

📒 Files selected for processing (3)

• public/app.css
• public/portal-dropdown.js
• tests/dom/render.test.js

---

📝 Walkthrough

Walkthrough

PortalDropdown now uses the nearest .modal-overlay as its portal root and falls back to document.body. Menu mounting, restoration, width measurement, and destruction use the selected root. Documentation reflects the modal-aware behavior. Tests verify accessible Thinking dropdown interaction while Settings remains open.

Possibly related PRs

• CodeSignal/learn_cosmo-chat#56: Adds ARIA label and description associations for the Settings Thinking dropdown.

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly identifies the accessibility fix that keeps the Thinking menu inside the aria-modal context.
Description check	✅ Passed	The description explains the accessibility issue, the modal-overlay solution, the tests, and the remaining verification work.
Linked Issues check	✅ Passed	The changes satisfy issue #51 by keeping the open menu inside the modal overlay, outside inert subtrees, and covered by accessibility tests.
Out of Scope Changes check	✅ Passed	The changes are limited to portal placement, related documentation, and tests for the linked accessibility objective.

---

_{Comment @coderabbitai help to get the list of available commands.}