Skip to content

follow-up: a11y + long-session hardening for Mermaid zoom modal #360

Description

@AmirTlinov

Context

Initial inspect/zoom UX for Mermaid diagrams is being introduced in #359 (implementation candidate in #358).

Problem

The modal interaction should be hardened for accessibility and long-lived preview sessions.

Goal

Ship production-level UX hardening for the Mermaid inspect modal.

Scope

In scope

  • Keyboard accessibility:
    • Esc closes modal
    • Focus management and focus return
    • Keyboard operation for zoom controls
  • A11y semantics:
    • role="dialog", aria-modal, labels for controls
  • Stability:
    • Stress test repeated open/close cycles and live-update rerenders
    • Ensure no leaked handlers / duplicate DOM nodes over long sessions

Out of scope

  • Re-design of visual style.
  • New external UI frameworks.

Acceptance criteria

  • Modal can be fully operated with keyboard only.
  • Focus trap/restore behavior is correct.
  • ARIA attributes are present and valid.
  • Repeated open/close and rerender cycles do not create duplicate nodes/listeners.
  • No regression in preview performance.

Verification

  • Manual keyboard test matrix.
  • Browser/runtime smoke checks for DOM/listener idempotency.
  • Long-session test (>10 min with frequent rerenders).

References

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions