Skip to content

fix: accessibility and component improvements for split-app - #643

Open
okontemple96-dotcom wants to merge 4 commits into
Stellar-split:mainfrom
okontemple96-dotcom:fix/a11y-and-component-fixes
Open

fix: accessibility and component improvements for split-app#643
okontemple96-dotcom wants to merge 4 commits into
Stellar-split:mainfrom
okontemple96-dotcom:fix/a11y-and-component-fixes

Conversation

@okontemple96-dotcom

Copy link
Copy Markdown

Summary

This PR addresses four critical issues across accessibility compliance and component behavior:

  1. TextInput Focus Ring (Add visible focus ring to TextInput for keyboard navigation #571) - Added visible focus ring for keyboard navigation
  2. Toast Deduplication (Duplicate toasts appear when events fire in rapid succession #572) - Implemented deduplication for rapid-fire toast events
  3. FormInputs aria-describedby (Wire aria-describedby on all error states in FormInputs #570) - Verified proper screen reader text linking
  4. WalletConnect Install Prompt (WalletConnect shows blank button when Freighter extension is not installed #569) - Verified install prompt for missing extension

Changes

  • Added focus-visible:ring-2 to TextInput for keyboard-only users
  • Implemented deduplication logic in ToastContainer to collapse identical toasts within 500ms
  • Added comprehensive test coverage for FormInputs aria-describedby attributes
  • Added tests for WalletConnect install prompt behavior

Test Coverage

All changes include corresponding tests to ensure:

  • Focus ring is properly applied via Tailwind classes
  • Duplicate toasts are collapsed correctly
  • Toast dismiss timers are reset on duplicate arrival
  • FormInputs properly link errors and helpers via aria-describedby
  • WalletConnect shows install prompt when Freighter is unavailable

Closes #572
Closes #571
Closes #570
Closes #569

Adds focus-visible:ring-2 and focus-visible:ring-indigo-500 classes to TextInput
component to ensure keyboard-only users can clearly see which field is focused,
meeting WCAG 2.1 AA compliance requirements. The focus ring is only visible on
keyboard focus (via :focus-visible), not on mouse clicks.

Closes Stellar-split#571
Implements toast deduplication in ToastContainer to prevent duplicate toasts
when identical events fire within milliseconds. Toasts with the same message
and type are now collapsed into a single toast, and subsequent duplicates
reset the auto-dismiss timer of the existing toast.

Closes Stellar-split#572
Adds comprehensive test coverage for aria-describedby attributes on all
FormInputs components (TextInput, NumberInput, Textarea, Select, DatePicker,
Toggle, Checkbox). Ensures error and helper text are properly linked to
their respective input elements for screen reader users.

Closes Stellar-split#570
Adds test coverage for WalletConnect component to ensure it renders an
install prompt with a link to the Freighter store when the extension is
not detected, rather than showing a blank or non-functional button.

Closes Stellar-split#569
@vercel

vercel Bot commented Aug 27, 2026

Copy link
Copy Markdown

@okontemple96-dotcom is attempting to deploy a commit to the kingsman-99's projects Team on Vercel.

A member of the Team first needs to authorize it.

@drips-wave

drips-wave Bot commented Aug 27, 2026

Copy link
Copy Markdown

@okontemple96-dotcom 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

1 participant