component-dialog

Generate an accessible React dialog component using TypeScript by scaffolding dialog.tsx and dialog.module.scss files with native showModal() behavior, focus trapping, ARIA attributes, and safe close functionality without manual wiring.

Add focus trapping and screen reader support to a React modal by using the native <dialog> element's showModal() method, which automatically handles focus management, return-focus-on-close, and ARIA behavior for accessibility compliance.

Yes, the dialog generator is dependency-aware and verifies that a Button component exists before generating files, ensuring the close button and footer confirm/cancel actions compile cleanly without missing references.

Yes, you can generate React modal confirmation flows with header, body, and footer composition by specifying the title, description, body content, and optional footer actions for confirm and cancel buttons during the component generation process.

The native <dialog> element provides built-in focus trapping, Escape-to-close behavior, and return-focus-on-close out of the box, eliminating the need to manually wire accessibility attributes and keyboard event handlers in your React modal component.

Scaffold a React dialog component with SCSS styles by generating dialog.tsx and dialog.module.scss files using predefined templates, which also initializes ui.tsx when missing and verifies integration through detect_target and verify_integration scripts.