Modal Dialog IV

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.
• Move focus to the first tabbable control (the supplied close button) after opening. If no tabbable control is available, focus the panel using tabindex="-1".
• Trap Tab from the last control to the first and Shift+Tab from the first to the last, preserving normal browser navigation between interior controls. Handle the single-control help dialog in both directions.
• On every close path and component cleanup, restore focus to the original invoking element if it remains connected and can receive focus. Restore inert/scroll state before returning focus. Cleanup must survive repeated opens and React Strict Mode without leaked listeners.

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, then press Tab and Escape.
Output: Focus stays within the single-control dialog and returns to Read help when dismissed.