Skip to content

a11y(wallet): manage focus on transitions#788

Open
Carlys17 wants to merge 1 commit into
Talenttrust:mainfrom
Carlys17:a11y/wallet-21-focus
Open

a11y(wallet): manage focus on transitions#788
Carlys17 wants to merge 1 commit into
Talenttrust:mainfrom
Carlys17:a11y/wallet-21-focus

Conversation

@Carlys17

Copy link
Copy Markdown

Summary

Adds proper focus management on wallet route/dialog transitions so keyboard and screen-reader users aren't disoriented.

Changes

  • src/hooks/useWalletFocus.ts — new hook that moves focus to connected element on connect and restores focus to connect button on disconnect
  • src/components/WalletConnectButton.tsx — uses useWalletFocus to manage focus on connect/disconnect transitions
  • src/components/HeaderActions.tsx — mobile toggle focuses first interactive element on open, restores focus to toggle button on close
  • src/hooks/tests/useWalletFocus.test.tsx — tests for the hook (connect, disconnect, isConnecting, rapid cycles)
  • src/components/tests/a11y.test.tsx — focus-behaviour tests for WalletConnectButton + HeaderActions

Acceptance criteria coverage

  • Move focus to sensible target on wallet open/route-change
  • Restore focus on close/disconnect
  • Trap focus in wallet dialogs (existing useDialogFocusTrap already handles ConfirmDialog + MilestoneCreationForm)
  • No visual change — focus behavior only via refs + useEffect
  • Focus-behaviour tests added
  • npm run lint clean
  • npm test — 1270 tests pass
  • npm run build succeeds

Test output

Test Suites: 74 passed, 74 total
Tests: 1270 passed, 1270 total
Snapshots: 7 passed, 7 total
Time: 81.763 s

Closes #692

- Add useWalletFocus hook for connect/disconnect focus management
- WalletConnectButton moves focus to connected element on connect
- WalletConnectButton returns focus to connect button on disconnect
- HeaderActions mobile toggle focuses first interactive element on open
- HeaderActions mobile toggle restores focus to toggle button on close
- Add comprehensive focus-behaviour tests
- All 1270 tests pass, lint clean, build succeeds

Closes Talenttrust#692
@drips-wave

drips-wave Bot commented Jul 25, 2026

Copy link
Copy Markdown

@Carlys17 Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add focus management on wallet route and dialog transitions

1 participant