modal-toast-dialog-stinger

To build accessible React overlays, you must implement an accessible modal contract covering focus traps, keyboard behavior, ARIA attributes, scroll locking, and focus restoration. This Skill audits your implementation and recommends appropriate primitive patterns to ensure compliance.

You should select a modal dialog for critical interactions requiring immediate focus, a drawer for secondary navigation, and a toast for transient notifications. This Skill guides primitive selection by matching overlay patterns to specific React use cases and accessibility requirements.

The accessible modal contract for React requires proper portal mounting, ARIA semantics, focus trapping, scroll locking, and focus restoration upon close. This Skill applies these rules to review your overlay architecture and identify missing accessibility contracts.

Fixing focus management and stacking issues in React dialogs requires applying correct portal mounting and z-index stacking rules alongside focus restoration logic. This Skill audits your overlay system to debug focus behavior and standardize component stacking.

Yes, this React overlay guidance applies framework-specific component selection for established libraries including Radix. It helps you choose and implement the right primitive patterns for dialogs, drawers, toasts, and command palettes using your preferred React toolkit.

Your React modal loses focus or fails keyboard navigation because it lacks proper focus restoration and focus trap mechanisms defined in the accessible modal contract. This Skill audits your overlay behavior to identify and recommend fixes for these specific accessibility failures.