fully accessible modal for invoice marketplace with focus trap and escape

[mikewheeleer]

Summary

The invoice marketplace modal doesn't trap focus, close on escape, or restore focus, so keyboard and screen-reader users get lost. Make it fully accessible.

Why this matters

An inaccessible modal locks out keyboard/AT users entirely. Focus management is a hard WCAG requirement, not a nicety.

Requirements

• Trap focus within the open invoice marketplace modal; Tab/Shift+Tab cycle inside it.
• Close on Escape and on overlay click; restore focus to the trigger on close.
• Correct ARIA (role=dialog, aria-modal, labelled title).
• No visual regression.

Technical guidance

• Move focus to the first focusable element (or the dialog) on open.
• Remember and restore the previously-focused element.

Edge cases — each must have a test

• open -> focus moves into the dialog
• Tab at the last element -> wraps to the first
• Escape -> closes and restores focus
• overlay click -> closes
• dialog has an accessible name

Acceptance criteria

• All requirements and every edge case above implemented and covered by tests
• New unit and integration tests; existing tests still pass and no regressions
• Structured, typed errors (no leaked internals; stable codes)
• npm run lint, npm test, and npm run build all pass locally
• Code follows the repo's existing conventions; no duplication or dead code
• Short docs/comments explaining the design and any non-obvious decisions
• PR description explains the approach and includes Closes #<issue>

Out of scope

• Nested modals
• Animation polish

Rewards

Part of the GrantFox OSS / Official Campaign (FWC26) — this task may be rewarded. PR quality is assessed by AI: depth, correctness under edge cases, meaningful tests, and clean design are what earn the reward. Shallow changes (typos, formatting, trivial docs) do not qualify.

[chuks68]

I would like to work on this issue because i am confident i can resolve the issue, having worked on and resolved similar issues. my eta is 4 hours