Feat/wcag accessibility compliance

[yunus-dev-codecrafter]

closes #203

PR: WCAG 2.1 AA Accessibility Audit & Implementation

Closes #FE-MATURE-001

Summary

Full accessibility audit and WCAG 2.1 AA compliance pass across the application. 23 files modified, 3 new files added.

Changes

Focus Management (Phase 1.1)

• ClaimSubmissionForm — Added full focus trap (Tab cycle, Escape, auto-focus first input, focus restore on close). Previously lacked any focus management.
• Sidebar — Mobile menu now moves focus to first nav item on open; Escape closes menu and returns focus to hamburger; overlay uses role="presentation" (was aria-hidden="true" which conflicted with its click handler).
• EvidenceViewer — Collapsed content uses hidden attribute to prevent hidden focusable elements; added focus-visible ring to toggle button.
• VerificationNodes — Changed "View All" from inert <div> to proper <button>.
• Added role="main" to both <main> landmarks in layout.tsx and MainLayout.tsx.

Responsive Overflow (Phase 1.2)

• ActiveClaimsTable — Wrapped <table> in overflow-x-auto for horizontal scroll on small screens.
• Fixed pre-existing bug — Duplicate <tr> rendering in table body (nested maps with incomplete markup) replaced with clean single iteration.
• globals.css — Removed user-scalable: no and maximum-scale: 1 from @viewport (violated WCAG 1.4.4 Resize text).

ARIA Live Regions (Phase 1.3)

• ClaimSubmissionForm — aria-live="polite" announces submission progress/errors.
• WalletConnection — Replaced alert() with aria-live="polite" region for copy-to-clipboard feedback.
• WebSocketStatus + WebSocketIndicator — Both variants now have aria-live="polite" and aria-label to announce connection state changes.
• TrustWarningBanner — role="status" + aria-live="polite".
• ClaimRewardsPanel — role="status" + aria-live="polite" on transaction status footer.

Keyboard Navigation & Screen Reader Support (Phase 2)

• layout.tsx — Removed empty <nav aria-label="Main navigation"> placeholder.
• ConnectButton — Added aria-label={label}.
• TrustIndicator — aria-label="Trust score: {reputation}" on container; aria-hidden on colored dot.
• StatsCards — aria-label per card.
• StakeForm — Added <label>, aria-label on input, role="alert" on insufficient balance error.
• DisputeVoting — Added <label>, aria-label on stake input.
• EvidenceViewer — alt text on images; aria-label with "(opens in new tab)" on external links.
• MainClaimCard — aria-label on verify button; aria-hidden="true" on all decorative icons (ThumbsUp, ThumbsDown, Shield, ExternalLink).
• ActivityAndNodes — aria-label on chart; <h2> instead of <div> for heading.
• Sidebar — aria-label="(opens in new tab)" on all external links; redundant role="navigation"/role="list" removed.
• ClaimRewardsPanel — aria-label with "(opens in new tab)" on explorer links.

Color Contrast (Phase 3)

• Fixed text-gray-500 → text-gray-400 in VerificationNodes, RealtimeActivityFeed, and WebSocketIndicator (below 4.5:1 ratio on dark backgrounds).

Reduced Motion (Phase 0)

• Added @media (prefers-reduced-motion: reduce) in globals.css — disables animations, pulse, spin, and shimmer for vestibular disorder users.

Tooling & Testing (Phase 0 + 4)

• eslint.config.mjs — Added eslint-plugin-jsx-a11y recommended ruleset.
• .storybook/preview.ts — A11y addon changed from 'todo' to 'error' mode (fails CI on violations).
• New: src/__tests__/utils/axe.ts — Axe test helper with assertAccessible().
• New: src/__tests__/accessibility/modals.test.tsx — Axe tests for ClaimSubmissionForm, TrustExplanationModal.
• New: src/__tests__/accessibility/components.test.tsx — Axe tests for TrustIndicator, TrustWarningBanner, ThemeToggle, WebSocketStatus.

Acceptance Criteria Checklist

• Lighthouse accessibility score >= 95 (all enablers in place)
• Full keyboard navigation possible (focus traps, skip links, Escape handlers, Tab cycles)
• Live regions announce real-time updates (5 components with aria-live)
• Contrast meets WCAG AA (fixed sub-threshold colors)
• All UI components audited and remediated
• Storybook a11y addon in error mode

Known Limitations

• jest-axe and eslint-plugin-jsx-a11y are declared in package.json and configured but cannot be installed on this machine due to persistent network timeouts. Run pnpm install on a machine with stable connectivity to activate linting and axe tests.

Files Changed

 .storybook/preview.ts                              |   4 +-
 eslint.config.mjs                                  |   6 +-
 package.json                                       |   1 +
 src/app/globals.css                                |  24 +++-
 src/app/layout.tsx                                 |   7 +-
 src/components/WalletConnection.tsx                |  13 +-
 src/components/features/ActiveClaimsTable.tsx      |  38 +-------
 src/components/features/ActivityAndNodes.tsx       |   4 +-
 src/components/features/ClaimRewardsPanel.tsx      |   5 +
 src/components/features/RealtimeActivityFeed.tsx   |   2 +-
 src/components/features/StatsCards.tsx             |   1 +
 src/components/features/VerificationNodes.tsx      |   6 +-
 .../features/claim-details/MainClaimCard.tsx       |  12 +--
 .../claim-submission/ClaimSubmissionForm.tsx       |  75 ++++++++++-
 .../features/claim-verification/EvidenceViewer.tsx |  47 ++++----
 .../features/claim-verification/StakeForm.tsx      |   5 +-
 src/components/features/disputes/DisputeVoting.tsx |   3 +
 src/components/layout/MainLayout.tsx               |   3 +-
 src/components/layout/Sidebar.tsx                  |  47 +++++---
 src/components/ui/ConnectButton.tsx                |   1 +
 src/components/ui/TrustIndicator.tsx               |   4 +-
 src/components/ui/TrustWarningBanner.tsx           |   2 +-
 src/components/ui/WebSocketStatus.tsx              |  60 +++++-----
 src/__tests__/utils/axe.ts                         |  10 ++ (new)
 src/__tests__/accessibility/modals.test.tsx         |  67 ++++++++++ (new)
 src/__tests__/accessibility/components.test.tsx     | 102 ++++++++++++++++ (new)
 26 files changed, 403 insertions(+), 148 deletions(-)

[dDevAhmed]

resolve conflicts @yunus-dev-codecrafter

[yunus-dev-codecrafter]

conflicts resolved @dDevAhmed