[Copilot]

Description

The modal was using a <div role="dialog"> with a hand-rolled focus trap (sentinel elements + manual focus cycling). The native <dialog> element + showModal() handles focus trapping, top-layer stacking, and modal semantics natively — and is baseline-available in all modern browsers including Safari 15+.

Solution

• Native <dialog>/showModal() replaces the manual focus trap; ModalInner and ModalBackdrop are removed.
• Children render directly, centered in a dynamically sized viewport dialog. Native ::backdrop replaces the overlay, and backdrop clicks are handled internally.
• Simplified close-button styling and hook transitions; dialogRef synchronizes native closing with state, URL hash, and focus restoration.

Additional Notes

Important

animate-presence animation support is not included in this refactor. Related examples and handling have been removed; follow-up work is tracked in #155.

[changeset-bot]

🦋 Changeset detected

Latest commit: 5215b32

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@wethegit/react-modal	Major

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[Copilot]

🟡 Changes recommended

Native modality disrupts return-focus behavior, and incomplete browser-style resets change backdrop and text colors.

3 open issues

• Restore trigger focus after native dialog modality ends · New
• Inherit text color in ModalContent · New
• Reset modal ::backdrop to prevent an unintended overlay · New

What changed in this PR

Migrates the modal component to native <dialog> and showModal(), replacing custom focus trapping with browser-managed modality.

Changes:

• Opens the native dialog on mount and prevents native cancellation from bypassing React state.
• Removes focus-trap helpers and positioning styles, and adds dialog style resets.
• Updates accessibility documentation and lockfile version metadata.

File	Description
src/​lib/​components/​modal/​modal.tsx	Removes the positioning class wrapper.
src/​lib/​components/​modal/​modal.module.scss	Deletes obsolete positioning styles.
src/​lib/​components/​modal-visually-hidden/​modal-visually-hidden.tsx	Deletes the focus-cycling helper.
src/​lib/​components/​modal-visually-hidden/​modal-visually-hidden.module.scss	Deletes hidden-helper styles.
src/​lib/​components/​modal-visually-hidden/​index.tsx	Removes the helper export.
src/​lib/​components/​modal-inner/​modal-inner.tsx	Implements native dialog opening and cancel handling.
src/​lib/​components/​modal-inner/​modal-inner.module.scss	Adds native dialog style resets.
src/​lib/​components/​modal-focus-bounds/​modal-focus-bounds.tsx	Deletes focus-boundary sentinels.
src/​lib/​components/​modal-focus-bounds/​modal-focus-bounds.module.scss	Deletes sentinel styles.
src/​lib/​components/​modal-focus-bounds/​index.tsx	Removes the sentinel export.
README.md	Documents native focus trapping.
package-lock.json	Updates root package version metadata to 3.2.0.

_{Review effort: Balanced}

[Copilot]

🟡 Changes recommended

Native closing can affect an unrelated dialog, and reopening during an exit transition can leave the retained dialog without native modality.

2 open issues

• Reopen native dialog when visibility returns during exit transition · New
• Close the specific modal instance instead of the first dialog · New

3 resolved since last review

• Restore trigger focus after native dialog modality ends
• Reset modal ::backdrop to prevent an unintended overlay
• Inherit text color in ModalContent

_{Review effort: Balanced}

[marlonmarcello]

@copilot update the description of this PR to include the updates we made since it was created. Also make an important note that animation with animate presence is currently not included in this refactor and also go ahead and remove the code and logic that handles that. we will address that in #155

[Copilot]

@copilot update the description of this PR to include the updates we made since it was created. Also make an important note that animation with animate presence is currently not included in this refac...

Removed the animate-presence example, unused transition styles/dependency, and retained-dialog reopening logic in 23f2012. README now explicitly defers animation support to #155. Lint, TypeScript, build, browser checks, and CodeQL passed.

I couldn't edit the PR body with the available tools; GitHub browser access is blocked. Updated description summary:

• Native <dialog>/showModal() replaces the manual focus trap; ModalInner and ModalBackdrop are removed.
• Children render directly, centered in a dynamically sized viewport dialog. Native ::backdrop replaces the overlay, and backdrop clicks are handled internally.
• Simplified close-button styling and hook transitions; dialogRef synchronizes native closing with state, URL hash, and focus restoration.
• README and demos reflect the new API; a major changeset records the breaking changes.
• Important: animate-presence animation support is not included in this refactor. Related examples and handling have been removed; follow-up work is tracked in [react-modal] feature: use @starting-style for entry animation #155.

[Copilot]

🟡 Changes recommended

Native cancellation, backdrop hit testing, and portal-target changes have unresolved correctness issues.

2 open issues

• Require press and release outside content for backdrop dismissal · New
• Preserve cancel prevention for native and hooked Escape dismissal · New

1 previously missed issue

In code that hasn't changed since last review

Reopen replacement dialog when renderTo changes

src/​lib/​components/​modal/​modal.tsx:35

Changing renderTo while Modal remains mounted recreates the portal's dialog element, but the ref object stays the same, so this effect does not run again. The replacement dialog stays closed and hidden while isOpen and any URL hash still indicate an open modal. Include renderTo in the dependencies so the replacement dialog receives showModal().

2 resolved since last review

• Synchronize close events when dialog nodes mount or detach
• Keep native dialog visible during exit animations

_{Review effort: Balanced}

[Copilot]

🟡 Changes recommended

Clicks inside nested portaled dialogs can incorrectly dismiss the parent modal.

1 open issue

• Require native event path to include dialog before closing parent · New

2 resolved since last review

• Preserve cancel prevention for native and hooked Escape dismissal
• Require press and release outside content for backdrop dismissal

_{Review effort: Balanced}