Skip to content

Modals don't manage focus consistently #34

@stultus

Description

@stultus

Problem

The app's modals (Settings, Export, Metadata, Help, About) don't manage focus
consistently:

  • Opening a modal sometimes leaves focus in the editor behind it.
  • Tab doesn't trap inside the modal; users can tab back into the editor while the
    modal is still visible.
  • Escape dismissal works for some modals and not others.
  • On close, focus doesn't always return to the button that opened the modal.

Observed

  • SettingsModal.svelte, ExportModal.svelte, MetadataModal.svelte all implement
    backdrop-click + Escape differently.
  • No shared focus-trap utility; each modal re-invents its own behavior.

Proposed

  • Introduce a shared modal wrapper component or action that:
    • Moves focus to the first focusable element on open.
    • Traps Tab/Shift-Tab within the modal.
    • Restores focus to the opener on close.
    • Handles Escape uniformly.
  • Migrate all five modals to use it.

Acceptance

  • Keyboard users can navigate every modal without accidentally focusing the editor.
  • Escape and backdrop-click behave identically across modals.
  • Focus returns to the trigger on dismiss.

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