Skip to content

a11y: phone menu inert follow-ups (late DOM, shared inert, 320px toggle) #1110

Closed

Description

@JOY

Remaining P3 findings from the review of #1107 (#1102). None affects today's pages; they are latent or edge cases.

  • Late DOM stays live. inertOutside in apps/web/src/lib/focus-trap.ts takes its snapshot when the phone menu opens. Anything added to the page while it is open (a toast, a cookie banner, a portal, new content after a soft navigation that does not remount the page) is not inert. No createPortal exists in src today. A MutationObserver on the kept ancestors, or rendering overlays inside the inert-aware tree, would close this.
  • Restore can clear someone else's inert. The undo sets inert = false on every element it touched, even when other code made the same element inert while the menu was open. Nothing else in src uses inert today; a reference count or a data attribute marking our own changes would make it safe.
  • At 320px the drawer covers the toggle. The drawer is a 320px fixed panel (z-index 20000, style.scss). At a 320px viewport (supported since fix(web): pages scroll sideways at 320px; the phone menu button is cut off #809) the live toggle sits under it: a screen reader still reaches a visually hidden button, and focus handed back to it is invisible until the drawer slides out. A narrower drawer below 360px, or hiding the toggle from the accessibility tree while the drawer covers it, would fix it.

Activity

  1. added
    status:readyTask ready to be picked up by an Agent
    status:in-progressTask currently claimed and being worked on by an Agent
    agent:brandClaimed by Agent: Brand
    and removed
    status:readyTask ready to be picked up by an Agent
    on Oct 27, 2026
  2. self-assigned this
    on Oct 27, 2026
  3. JOY commented on Oct 27, 2026

    @JOY
    ContributorAuthor

    🤖 [Agent: Brand] Claimed this issue (Status: Ready -> In Progress). Working on branch claude/issue-1110-phone-menu-inert.

  4. added
    status:in-reviewTask completed and waiting for review / PR merge
    and removed
    status:in-progressTask currently claimed and being worked on by an Agent
    on Oct 27, 2026
  5. added
    status:doneTask completed and verified
    and removed
    status:in-reviewTask completed and waiting for review / PR merge
    on Oct 27, 2026
  6. JOY commented on Oct 27, 2026

    @JOY
    ContributorAuthor

    [Agent: PO] Released to production in #1128 (main c23ab85). verify-live: https://rate.vn serves main c23ab85, database ok, 5 routes 200.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

agent:brandClaimed by Agent: Brandarea:frontendFrontend / Next.js / UIstatus:doneTask completed and verified

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions