Skip to content

fix(a11y): add accessible aria-labels to BatchForm recipient inputs (#54) - #103

Open
ghzhost wants to merge 1 commit into
StellarSend:mainfrom
ghzhost:fix/batch-input-labels-54
Open

fix(a11y): add accessible aria-labels to BatchForm recipient inputs (#54)#103
ghzhost wants to merge 1 commit into
StellarSend:mainfrom
ghzhost:fix/batch-input-labels-54

Conversation

@ghzhost

@ghzhost ghzhost commented Sep 2, 2026

Copy link
Copy Markdown

Closes #54

Problem

In BatchForm, the per-recipient destination address and amount Input fields were passed without label or aria-label props. Because Input only derives an id and <label> when label is provided, screen-reader users encountered inputs with no accessible name.

Solution

  • Added explicit aria-label={Recipient ${index + 1} address} and aria-label={Recipient ${index + 1} amount} to each recipient row's inputs in BatchForm.tsx.
  • Updated BatchForm.test.tsx to query elements by their accessible role and name (getByRole('textbox', { name: /recipient 1 address/i }), getByRole('spinbutton', { name: /recipient 1 amount/i })).

Verification

  • Tested locally with NODE_ENV=test npm test: 27 test files passed (113 tests).

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.

BatchForm's per-recipient address/amount Inputs have no label or aria-label — the only financial form in the app with this gap

1 participant