Skip to content

ResponsiveModal → Dialog + accessibility improvements#12586

Open
jpye-finch wants to merge 8 commits intodevelopfrom
dialog-refactor
Open

ResponsiveModal → Dialog + accessibility improvements#12586
jpye-finch wants to merge 8 commits intodevelopfrom
dialog-refactor

Conversation

@jpye-finch
Copy link
Copy Markdown
Contributor

@jpye-finch jpye-finch commented May 8, 2026


Summary

  • Migrate ResponsiveModal → Dialog (28 call sites) across packages/client and packages/login. Replaces the legacy show/handleClose/responsive/autoHeight/contentHeight API with isOpen/onClose; adds variant="large" where a width prop was present. Net deletion: 44 lines.
  • Accessibility hardening (Dialog.tsx + useDialogA11y.ts):
    • Body scroll lock via a module-level openDialogCount counter — nested dialogs don't prematurely restore scroll when an inner dialog closes.
    • Focus-on-open via requestAnimationFrame; return-focus-on-close to the triggering element.
    • Escape key closes the dialog; Tab/Shift+Tab cycle is trapped within the dialog's focusable children.
    • aria-modal="true", aria-labelledby (stable useId-generated), aria-describedby wired to DialogContent.
    • Close button now conditionally rendered — omitted entirely when no onClose is provided (e.g. ReloadModal), preventing an inert keyboard target.
    • onClose removed from useEffect deps; a useRef wrapper keeps the callback current without triggering spurious effect cycles on inline-function re-renders.
  • Responsive fixes (Dialog.tsx):
    • Large-variant mobile breakpoint: @media (max-width: 768px) and
      (orientation: portrait) → @media (max-width: ${theme.grid.breakpoints.lg}px) — portrait qualifier removed so
      landscape phones get the full-screen treatment.
    • Footer actions stack column-reverse at [breakpoints.md](http://breakpoints.md/) and below, each button full-width — primary action stays visually first on mobile.

@github-actions
Copy link
Copy Markdown

github-actions Bot commented May 8, 2026

Oops! Looks like you forgot to update the changelog. When updating CHANGELOG.md, please consider the following:

  • Changelog is read by country implementors who might not always be familiar with all technical details of OpenCRVS. Keep language high-level, user friendly and avoid technical references to internals.
  • Answer "What's new?", "Why was the change made?" and "Why should I care?" for each change.
  • If it's a breaking change, include a migration guide answering "What do I need to do to upgrade?".

@github-actions
Copy link
Copy Markdown

github-actions Bot commented May 8, 2026

ℹ️ Coverage metrics explained:
Statements — Executed code statements (basic logic lines)
Branches — Tested decision paths (if/else, switch, ternaries)
Functions — Functions invoked during tests
Lines — Source lines executed

@jpye-finch jpye-finch changed the title ResponsiveModal → Dialo + accessibility improvements ResponsiveModal → Dialog + accessibility improvements May 8, 2026
@github-actions
Copy link
Copy Markdown

github-actions Bot commented May 8, 2026

📊 commons test coverage

Statements: 75.48%
Branches:   39.88%
Functions:  56.85%
Lines:      75.05%
Updated at: Fri, 08 May 2026 15:11:28 GMT

@jpye-finch jpye-finch linked an issue May 8, 2026 that may be closed by this pull request
@github-actions
Copy link
Copy Markdown

github-actions Bot commented May 8, 2026

📊 events test coverage

Statements: 86.86%
Branches:   84.93%
Functions:  92.08%
Lines:      86.86%
Updated at: Fri, 08 May 2026 15:20:11 GMT

@jpye-finch jpye-finch added this to the 2.1 milestone May 8, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Replace deprecated ResponsiveModal with the Dialog component

1 participant