feat(a11y): fix focus trap in connect-wallet modal#477
Open
Fury03 wants to merge 2 commits into
Open
Conversation
…ts, and fixed props - Add Storybook path and variant list for the 5 components that have story files (AddressInput, AmountInput, FormField, Select, Toggle) - Add a Storybook intro blurb at the top explaining how to browse stories - Fix ConfirmDialog props table: breakdown is optional, not required; add 7 previously undocumented props (description, children, confirmInputLabel, confirmInputHint, variant, confirmPhrase, confirmHint) - Add 7 missing public component entries: ActionCard, Disclaimer, ThemeToggle, KeyboardShortcutsDialog, AttestationForm, CreateBondFlow, ErrorBoundary — each with props table, a11y notes, tokens, and example - Extend styling ownership table to cover the 7 new components - Update README.md and docs/README.md descriptions to mention stories Closes CredenceOrg#402
Create ConnectWalletModal with WCAG 2.1 AA focus management: portal-rendered dialog with useFocusTrap (Tab wrapping, Escape, initial focus on Cancel, return focus on close) and body scroll lock. Entrance animations respect prefers-reduced-motion: reduce. Wire the modal into Bond and BondDetail, replacing bare connect() calls so the wallet flow is always announced as a dialog. Add 24-test suite covering rendering, error states, connecting state, closing, auto-close on connect, scroll lock, and focus restoration. Closes CredenceOrg#378
|
@Fury03 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! 🚀 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
ConnectWalletModal— a portal-rendered dialog withuseFocusTrap(Tab/Shift+Tab wrapping, Escape, initial focus on Cancel, return focus to trigger on close), body scroll lock, and entrance animations disabled underprefers-reduced-motion: reduceBond.tsxandBondDetail.tsx, replacing all bareconnect()calls so every wallet-connection entry point is announced asrole="dialog"witharia-modal="true"aria-haspopup="dialog";returnFocusRefrestores focus to the exact trigger element that opened the modalTest plan
node_modules/.bin/vitest run src/components/ConnectWalletModal.test.tsx— 24 passednode_modules/.bin/vitest run src/pages/BondDetail.test.tsx— 10 passedConnectWalletModal.tsx,Bond.tsx, orBondDetail.tsxprefers-reduced-motion: reducesuppresses backdrop fade-in and panel slide-up animationsCloses #378