Skip to content

Trap focus and handle Escape in all 5 modals Closes #26 - #40

Merged
telivity-otaip merged 3 commits into
TelivityAI:mainfrom
pasanghilp-art:fix/modal-focus-trap
Sep 8, 2026
Merged

telivity-otaip merged 3 commits into
TelivityAI:mainfrom
pasanghilp-art:fix/modal-focus-trap

Conversation

@pasanghilp-art

Copy link
Copy Markdown
Contributor

shared createFocusTrapp helper,
wired into open/close for all 5 modals,
extended the Excape keydown handler,
note npm test passes with no regressions,
couldnt fully test live due to supabase access.

pasanghilp-art and others added 2 commits September 7, 2026 15:31
Builds on @pasanghilp-art's PR TelivityAI#40: keep a shared createFocusTrap, but
wire open/close through trapModal/closeModal, fold Escape into the
existing builder/drawer handler (instead of five duplicate listeners),
and give all five modals role=dialog + aria-labelledby names.

Co-authored-by: telivity-otaip <telivity-otaip@users.noreply.github.com>
@cursor

cursor Bot commented Sep 8, 2026

Copy link
Copy Markdown
Contributor

Maintainer follow-up pushed to this branch (thanks @pasanghilp-art — your trap + wiring stays as the base commit):

  • Shared trapModal / closeModal so save/import closes also release the trap and restore focus
  • One Escape handler (extends the existing builder/drawer listener) instead of five duplicates
  • role="dialog" aria-modal="true" aria-labelledby=… on all five modals
  • Hardened createFocusTrap (.box scope, visible focusables, optional initial focus)
  • Smoke checks for the helper + dialog names

This should fully satisfy #26. Ready to merge from here; duplicate #41 closed.

Extend TelivityAI#40 so Escape/focus-trap work with SR-safe page inerting,
backdrop click-to-close, and a live Playwright keyboard pass
(Tab wrap, Escape, backdrop, focus restore). Clear inert before
restoring opener focus — browsers ignore focus() into inert trees.

Co-authored-by: telivity-otaip <telivity-otaip@users.noreply.github.com>
@cursor

cursor Bot commented Sep 8, 2026

Copy link
Copy Markdown
Contributor

Follow-up on this branch (still credited to @pasanghilp-art as author of the base work):

  1. inert on page behind — while a modal is open, every other body child is marked inert (SR + Tab can’t reach the board). Cleared before focus restore (browsers ignore focus() into inert trees).
  2. Backdrop click closes — click the dimmed .modal chrome (not .box) → closeModal.
  3. Live keyboard pass — npm run test:modal-a11y (Playwright): initial focus, Tab / Shift+Tab wrap, Escape, backdrop, opener restore, inert on/off. All green locally.

Should fully cover #26 plus the three gaps from review. Ready to merge once CI finishes.

@telivity-otaip telivity-otaip self-assigned this Sep 8, 2026
@telivity-otaip
telivity-otaip merged commit 3d2f864 into TelivityAI:main Sep 8, 2026
3 checks passed
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