[Frontend] Accessibility (a11y) & WCAG 2.1 AA Compliance Audit

[blurbeast]

Overview & Background

To ensure FlowFi is inclusive and compliant with WCAG 2.1 AA standards, an accessibility audit and remediation is required across interactive modals, forms, dropdowns, and dynamic stream balance tickers.

---

Detailed Problem Statement

• Dynamic ticking numbers cause frequent unannounced screen reader changes or excessive noise without ARIA live regions.
• Modal dialogs (StreamDetailsModal, WalletModal, TopUpModal) lack keyboard focus traps, allowing Tab navigation to bleed into background elements.
• Certain dark mode low-contrast colors fail WCAG AA 4.5:1 ratio requirements.

---

Technical Specification & Remediation Plan

1. Modal Focus Trapping:

   • Implement focus trapping and ESC key dismissal in all modals using useModalDialog and aria-modal="true".
   • Restore focus to trigger element upon modal closure.

2. Live Region Announcements:

   • Add aria-live="polite" and aria-atomic="true" to live ticking balance counters so screen readers announce balance on user query rather than every millisecond.

3. Color Contrast & Keyboard Navigation:

   • Audit and adjust Tailwind theme contrast ratios in frontend/src/app/globals.css to achieve $> 4.5:1$ contrast for standard text and $> 3:1$ for interactive icons.
   • Ensure visible focus-visible:ring-2 outlines on all buttons and form inputs.

4. Automated Testing:

   • Add axe-core automated accessibility test suite in frontend/src/__tests__/a11y.test.tsx.

---

Target Files

• frontend/src/components/dashboard/StreamDetailsModal.tsx
• frontend/src/components/wallet/WalletModal.tsx
• frontend/src/components/stream-creation/TopUpModal.tsx
• frontend/src/app/globals.css

---

Acceptance Criteria

• Zero critical or serious accessibility violations in automated axe-core audit.
• 100% keyboard navigable (Tab, Shift+Tab, Enter, Escape).
• Focus is trapped within open modal dialogs.
• Text elements meet WCAG 2.1 AA contrast standards in both dark and light modes.

[Adedoyinjr]

@Adedoyinjr has applied to work on this issue as part of the Stellar Wave Program's 8th wave.

Hello lovely maintainer I can solve this issue within minutes. I would like to work on it. Thank you 😊

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Adedoyinjr to this issue.

[Adeyinka0123]

@Adeyinka0123 has applied to work on this issue as part of the Stellar Wave Program's 8th wave.

Hello Maintainer, I’d be happy to take ownership of this issue and deliver a quality pull request once completed.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Adeyinka0123 to this issue.

[BestBisong]

@BestBisong has applied to work on this issue as part of the Stellar Wave Program's 8th wave.

I would like to work on this issue

ℹ️ Repo Maintainers: To accept this application, review their application or assign @BestBisong to this issue.

[dimka90]

@dimka90 has applied to work on this issue as part of the Stellar Wave Program's 8th wave.

Can i work on this?

ℹ️ Repo Maintainers: To accept this application, review their application or assign @dimka90 to this issue.