Modal Dialog III

Requirements

• Build the reusable Modal component using the supplied App harness. It accepts a stable unique id, open state, title, description, projected content, and an onClose/close callback. Only one instance is open at a time.
• Render no overlay or dialog DOM when closed. When open, show the supplied overlay, visible heading/description, close button, and arbitrary projected content. The host owns open state; request closure through the callback rather than mutating props.
• Keep instance IDs and data-testid selectors unique. Both profile and help must work with the same component. The profile content’s Cancel and Save buttons are supplied to demonstrate externally requested closure.
• The full stylesheet and host harness are supplied. Do not use the native dialog element or a modal library: implement the behavior for this level in Modal and its optional modal-effects.js helper.
• Add role="dialog", aria-modal="true", aria-labelledby="<id>-title", and aria-describedby="<id>-description" to the panel. Keep the actual associated heading and description IDs and a labeled Close dialog button.
• While open, make outside content inert and lock body scrolling. Capture existing inert values and body inline overflow, then restore them exactly on close or unmount. Do not mark the dialog or any ancestor containing it inert.
• Escape requests close and prevents the key’s default action. A click on the overlay itself closes; clicks inside the panel or its content must not. Remove document listeners when closed or destroyed.

Examples

Input: Open Edit profile, then use the close button.
Output: The profile dialog appears and then closes; the host remains usable.

Input: Open Read help using the same Modal implementation.
Output: The second instance uses its own title and content.