fix(a11y): resolve accessibility gaps in JointSave dashboard

[Opulencechuks]

Closes #222

Description

This PR resolves several accessibility gaps across the JointSave dashboard components, ensuring improved usability and WCAG AA compliance.

Specifically, it includes the following updates:

• Added visually hidden h1 and skip-to-content link
• Implemented keyboard navigation for dashboard tabs
• Replaced custom backdrop modal with Radix Dialog in onboarding for proper focus trapping
• Added descriptive aria-labels to pool card badges
• Configured aria-describedby and aria-required on form inputs

Closes # (issue)

Type of Change

• feat: new feature
• fix: bug fix
• chore: maintenance, tooling, dependencies
• docs: documentation only
• refactor: code restructuring (no functional changes)
• test: adding or updating tests

How Has This Been Tested?

• cargo test passes (smart contracts)
• pnpm build succeeds (frontend)
• pnpm lint passes (frontend)
• Manual testing:
  • Verified skip-to-content link functionality using the keyboard tab key.
  • Tested keyboard navigability on dashboard tabs using arrow keys.
  • Opened the onboarding wizard to ensure focus remains trapped inside the modal and can be closed using the Esc key.
  • Confirmed screen readers accurately narrate pool card badges and form inputs via their associated labels.

Checklist

• My code follows the coding conventions of this project
• I have added/updated tests if needed
• I have updated documentation if needed
• My changes generate no new warnings or errors

Screenshots (if applicable)

nil

[Sendi0011]

Review — Approve

Solid accessibility work. The changes are consistent and follow the existing component patterns.

What I liked:

1. Onboarding wizard to Dialog — Replacing the custom motion.div backdrop with Radix Dialog/DialogContent gives you focus trapping and Escape handling for free. The showCloseButton={false} preserves the existing close UX.

2. Skip-to-content link — sr-only focus:not-sr-only pattern on dashboard/page.tsx is the standard approach. The <main id="main-content" tabIndex={-1}> allows programmatic focus.

3. ARIA on forms — aria-required, aria-describedby linking inputs to their FieldError messages, aria-label on dynamic member address fields. All correct.

4. Tab keyboard navigation — Arrow key handling in dashboard-tabs.tsx with aria-selected, aria-controls, and role="tablist". Proper WAI-ARIA tabs pattern.

5. Pool card keyboard activation — role="article" with onKeyDown for Enter/Space, tabIndex={-1} on the inner link to avoid double-focus.

One thing to discuss

test.yml adds pnpm format --write before pnpm format:check — this auto-formats all files before the check, which means the format check will always pass even if the PR introduces formatting issues. This defeats the CI check. Consider removing the auto-format step and letting contributors run pnpm format locally.

Minor nits (non-blocking)

• dashboard-tabs.tsx:282 — tabValues is re-created on every render. Consider useMemo or a module-level constant.
• pool-card.tsx:387-394 — document.getElementById(...) in onKeyDown works but is fragile. A ref would be more idiomatic.

Good work. Approving.

[Opulencechuks]

please review and merge

[Sendi0011]

Review — Accessibility Improvements

Thorough accessibility work — skip-to-content, proper ARIA on all form fields, keyboard navigation for tabs, screen reader labels on pool cards, and the onboarding wizard now uses the Dialog component for proper focus trapping. No blocking issues.

Suggestions (non-blocking)

1. CI adds pnpm format --write before format check — .github/workflows/test.yml:11-13 This auto-fixes formatting before the check runs, which means formatting issues in PRs will silently pass. The intention (preventing CI flakes from whitespace) is understandable, but it masks contributor errors. Consider running format:check first and only running format --write as a separate auto-fix step.

2. pnpm format --write on CI runs on all files, not just changed ones — This could reformat code that the PR author didn't touch, creating noisy diffs in the merge commit. Would be better scoped to only the changed files.

What is good

• Skip-to-content link (sr-only focus:not-sr-only) is well-implemented
• All form fields now have aria-required="true" and aria-describedby linking to their error messages
• Tab navigation uses proper role="tab", aria-selected, aria-controls, and arrow key handling
• Pool cards have role="article", descriptive aria-label, and keyboard activation (Enter/Space)
• FieldError component now accepts an id for aria-describedby linkage
• Onboarding wizard properly uses Dialog for focus management instead of custom overlay
• All 4 CI green, mergeable state clean

Approved. Ready to merge.