Skill LibraryPrompt Skill1 DesignsTop Views

Overlay Focus and Scroll Lock

Define focus trap, focus return, Escape, background inertness, scroll lock, and mobile safe-area contracts for dialogs, drawers, sheets, popovers, and alerts.

Skill Uses0

Recorded selections across prompt workflows.

Public Designs1

Ranked by views, then community favorites.

Prompt Lines10

Reusable instruction lines for generation.

Author@Interface Lab

Accessibility

Skill Directive

Description

Define focus trap, focus return, Escape, background inertness, scroll lock, and mobile safe-area contracts for dialogs, drawers, sheets, popovers, and alerts.

TagsAccessibility

Skill Prompt

- Inputs must include overlay type, modal status, trigger element, close methods, nesting, content length, form/destructive-action presence, target devices, and Radix/shadcn/headless primitive usage.
- Choose the pattern first: modal dialogs/drawers make the background unavailable, while non-modal popovers provide temporary context; do not put long-running tasks inside hover popovers.
- The focus contract must specify initial focus on open, Tab/Shift+Tab cycle scope, Escape behavior, outside-click behavior, close-time focus return, and fallback when the trigger disappears.
- Background treatment covers semantics and interaction: modal overlays use `aria-modal`, suitable role, portal layering, inert/non-focusable background, scrim click rules, and screen-reader-readable title/description.
- Scroll lock distinguishes body, main page scroller, and overlay internal scroll; when background scrolling is locked, compensate scrollbars, prevent iOS touch-through, and keep long overlay content scrollable.
- Mobile drawers/sheets handle viewport height, safe-area insets, virtual keyboard, fixed bottom action areas, and a visible close affordance; the close button must not hide under status bars or keyboards.
- Animation must not break focus: during enter/exit transitions, focus cannot land on unmounted nodes; under `prefers-reduced-motion`, shorten or remove spatial movement.
- Deliver an overlay state machine, focus map, scroll-lock strategy, ARIA/role attributes, z-index/token guidance, mobile safe-area rules, and Playwright keyboard tests.
- Failure conditions: focus escapes or disappears, background remains tabbable, focus does not return to trigger, double body scroll, iOS scroll bleed, inconsistent Escape behavior, missing title, or incorrect alertdialog use.
- Sources referenced: WAI-ARIA APG Dialog Modal, HTML dialog/MDN inert, Radix Dialog/Popover, React Aria useModalOverlay, and MDN overscroll-behavior. The content is rewritten as Interface Lab overlay skill guidance.

Public directive summary shown; Pro unlocks the full prompt.

Layout Info

Designs below are ordered by views. Top items use live previews; the rest stay fast thumbnail cards.

Unlock Pro All Skills

Overlay Focus and Scroll Lock

More pages using Overlay Focus and Scroll Lock