Playbook · Shopify modal focus trap broken
Modal opens. Tab walks the page behind it.
Written for a Shopify owner whose modal focus trap is broken — Tab escapes the dialog, Escape closes without returning focus, or assistive tech roams the background — or you chased a quick-view that never opens, a cart drawer, or a stuck mobile nav instead. DIY-first: prove Tab / Escape / aria-modal / focus-return → repair → retest. Distinct from quick view modal not opening and cart drawer not opening. Soft-link mobile nav stuck when the drawer is open but scroll-lock / close is frozen. Soft-link size guide not opening when the size-guide dialog never mounts. No earnings claims, no invented case studies.
Nico at Latch AI Ops · Sep 10, 2026 · ~12 minute read
Buy the 72-hour install — $997Quick view not openingCart drawerMerchant FAQ
01
Modal focus trap broken — not quick-view not opening, not cart drawer.
Several “modal / drawer / nav” bugs look alike. They do not share a fix. This page is only when a modal mounts and is visible, but keyboard focus is not trapped — Tab / Shift+Tab leave the dialog, Escape does not restore opener focus, or aria-modal / role=dialog is missing so the background stays reachable. Quick view that never opens is still quick-view-modal-not-opening. Cart drawer that never opens is shopify-cart-drawer-not-opening.
Soft-check shopify-mobile-nav-stuck when the mobile nav is open but frozen / scroll-lock stuck, and soft-link shopify-size-guide-not-opening when the size-guide dialog never mounts — not when the focus trap itself leaks after the modal is already open.
02
Prove Tab escape vs Escape focus loss vs aria-modal vs focus-return.
On Current theme (not a draft), open a modal in incognito — quick view, size guide dialog, newsletter popup, age gate, app modal. Soft-check Tab cycles only among focusable controls inside the dialog. Soft-check Shift+Tab wraps within the dialog. Soft-check Escape closes and returns focus to the opener. Soft-check role=dialog and aria-modal=true. Soft-check background is inert / aria-hidden while open. Soft-check App embeds not stealing focus on a timer. Soft-check mobile vs desktop. Soft-check Console errors on keydown / focusin.
Capture: page URL + which modal, recording of Tab leaving the dialog, Elements panel role/aria-modal, activeElement before and after Escape, App embeds toggle state, and mobile/desktop settings on Current.
03
Repair focus trap / Escape return / aria-modal / inert; retest keyboard path.
On Current, soft-check a focus trap (focusin / Tab keydown) keeps focus inside the dialog. Soft-check first focusable receives focus on open. Soft-check Escape closes and restores opener focus. Soft-check role=dialog + aria-modal=true + labelledby. Soft-check background inert or aria-hidden. Soft-check App embeds not fighting focus. Soft-check mobile/desktop. Publish Current, hard-refresh desktop and phone.
Honest retest: Tab stays inside; Escape restores opener focus — not only mouse click-to-close. Soft-link quick-view-modal-not-opening when the modal never mounts. Soft-link shopify-cart-drawer-not-opening when the cart drawer never opens. Soft-link shopify-mobile-nav-stuck when the mobile nav is open but frozen.
04
You tested quick-view not opening, cart drawer, or mobile nav stuck instead.
Quick view that never opens is still quick-view-modal-not-opening. Cart drawer that never opens is shopify-cart-drawer-not-opening. Mobile nav open but frozen / scroll-lock stuck is shopify-mobile-nav-stuck. Size guide that never mounts is shopify-size-guide-not-opening.
The only honest test for this page: open the modal, press Tab / Shift+Tab without leaving the dialog, then Escape and confirm focus returns to the opener — while quick-view-not-opening / cart-drawer / mobile-nav-stuck paths may still work.
05
When to stay DIY vs pay $997.
Stay DIY if you can spend one afternoon on the list above: prove Tab escape vs Escape focus loss vs aria-modal, soft-check apps, repair, retest. That is the whole playbook. No agency required. Short answers also live on the merchant FAQ. Related pages: quick view not opening, cart drawer not opening, mobile nav stuck.
Pay for help when the work is not the modal-focus-trap wiring itself — it is connecting the stack you already have so storefront / theme / modal-focus-trap exception alerts land in a channel you already check, and the live store is one workflow instead of a spreadsheet plus a Slack bot you forgot. That is the Latch AI Ops install.
What $997 USD one-time buys: lead capture on the live store, ops alerts in a channel you already check, and a checkout-ready workflow. 72 hours after collaborator access, not after payment. One live Shopify store. Access plus a delivery thread. Store URL collected at checkout. Not a SaaS seat, not a theme rebuild retainer, not a conversion guarantee, not a brand or theme job.
Other shops' public ranges, not testimonials: a checkout / ops install typically runs $500–$2,500. A full ops consulting block typically runs $2,000–$5,000. $997 is the cheap end of that work, sold as a 72-hour install of three systems — not as an earnings number or conversion-lift claim.
What it does not buy: more orders, recovered revenue, a forever modal-focus-trap guarantee, or a case study. Latch AI Ops has not published customer proof because there are no customers yet. You are buying the install.
Checkout is on Whop. Operator is Nico. United States offer. You can revoke collaborator access after handoff. We do not take owner passwords.