skills.rest
vecear
vecearCOMMUNITY
Explore all skills by this author →
GitHub

modal-drawer-system

Create accessible React TypeScript modal and drawer components with focus trapping and ARIA attributes.

Updated Jan 21, 2026
Search Tags:#typescript#accessibility#react#modal#aria#drawer#focus-trap
One-click install
npx skills add https://github.com/vecear/Nipponverb --skill modal-drawer-system-vecear
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: modal-drawer-system
Source: https://github.com/vecear/Nipponverb/tree/main/.claude/skills/modal-drawer-system
Command: npx skills add https://github.com/vecear/Nipponverb --skill modal-drawer-system-vecear

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Facilitates building accessible modal and drawer interfaces that manage focus, trap interactions, and ARIA roles without leaking focus or breaking layout.

Core Features & Use Cases

  • Focus management and trap for modal content
  • ESC-to-close, scroll lock, and backdrop interactions
  • Portal rendering outside the main DOM tree
  • ARIA attributes and keyboard navigation
  • Sample use cases: edit forms, confirmations, detail views, and overlays

Quick Start

Create a modal or drawer by importing the provided components, wrap your content, and render via a portal with isOpen controlling visibility.

Frequently Asked Questions about modal-drawer-system

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I trap focus inside a React modal so keyboard navigation doesn't leak to the background?▼

Focus trapping in a React modal confines Tab and Shift+Tab cycles to the modal content. This implementation manages focus capture, restores focus on close, and prevents background interaction leakage.

What's the best way to build an accessible drawer with ARIA attributes and scroll lock in TypeScript?▼

An accessible drawer in TypeScript requires valid ARIA roles, scroll lock to prevent background scrolling, and a portal for DOM isolation. This system provides these features to ensure predictable keyboard navigation.

How does portal rendering help when creating overlay components in React?▼

Portal rendering for React overlays mounts the modal or drawer outside the main DOM tree. This prevents parent CSS stacking context issues and ensures the overlay covers the application correctly.

Do I need any external dependencies to implement ESC-to-close and backdrop interactions in a React dialog?▼

No external dependencies are required to implement ESC-to-close and backdrop interactions in a React dialog. This system provides a reusable TypeScript implementation handling these controls natively.

Why does my modal component break keyboard navigation for screen reader users?▼

Modal components break screen reader keyboard navigation when ARIA attributes and focus management are missing. Applying proper focus trapping and ARIA roles ensures the dialog is announced and navigated safely.

Can I use this modal and drawer system for edit forms and confirmation dialogs?▼

Yes, you can use this modal and drawer system for edit forms, confirmation dialogs, detail views, and overlays. It safely manages focus, scroll locking, and portal rendering across various UI patterns.

Related Skills

Explore More Software Engineering Skills→
LimaTechnologiesLimaTechnologies

shadcn-ui

Implement shadcn/ui components in React and Next.js projects.

Community
Advanced
legioncodeinclegioncodeinc
72

modal-toast-dialog-stinger

Select accessible React overlay primitives and audit focus, ARIA, and stacking behavior.

Official
Advanced
hashintelhashintel
1.6k

ark-ui

Provide headless React primitives for accessible, customizable UI components.

Official
Intermediate
coastdigitalgroupcoastdigitalgroup
2

accessible-modal-dialog

Implement accessible modal dialogs with focus trapping and ARIA attributes.

Official
Intermediate