Skip to content

Fix/accessibility and mock issues#162

Open
Jess52487 wants to merge 3 commits into
Sorokit:mainfrom
Jess52487:fix/accessibility-and-mock-issues
Open

Fix/accessibility and mock issues#162
Jess52487 wants to merge 3 commits into
Sorokit:mainfrom
Jess52487:fix/accessibility-and-mock-issues

Conversation

@Jess52487

Copy link
Copy Markdown

closes #100
closes #101
closes #102

Description

This PR resolves three groups of issues related to UI accessibility, connection UX, and test reliability:

1. Badge Accessibility

  • Increased the base font size of the Badge component from 9px to 11px to meet WCAG minimum readable size.
  • Added a live boolean prop to dynamically updated badges. When true, it applies role="status" and aria-live="polite", ensuring screen readers announce status changes (e.g., transaction outcomes).
  • Added aria-hidden="true" to the decorative pulsing dot, preventing it from being announced incorrectly.

2. Wallet Connection UX

  • Added clear "Connecting to your wallet…" helper text beneath the connect button while the wallet is connecting.
  • Wired up the global error state from SorokitProvider to render an inline error banner on the ConnectScreen.
  • Added an interactive dismiss button to the banner that calls clearError().
  • Provided a descriptive alt="sorokit wallet dashboard preview" attribute for the hero image to improve screen reader context.

3. Mock Client Reliability

  • Replaced the invalid repeating string with a proper Ed25519 Stellar testnet public key.
  • Handled unknown network fallbacks explicitly by returning a structured { data: null, error: "Unknown network..." } response, rather than failing silently to testnet.
  • Updated MOCK_HISTORY and MOCK_EVENTS to use a deterministic mock generation algorithm rather than module-load-time randHex() calls, ensuring snapshot tests pass consistently across test runs.

Acceptance Criteria met

  • All badges render at minimum text-[11px]
  • <Badge live> has role="status" and aria-live="polite"
  • Dot span has aria-hidden="true"
  • Transaction status change is announced by a screen reader
  • "Connecting to your wallet…" message visible during connection
  • Global error renders on ConnectScreen as an inline banner with dismiss functionality
  • Hero image has an alt attribute
  • MOCK_ADDRESS passes format check and switchNetwork handles invalid strings properly
  • MOCK_HISTORY and MOCK_EVENTS are deterministic
  • npm run build and npm run lint pass successfully

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