interledger / interledger/rafiki
Asset Information fields and Liquidity amount input use unassociated label/value markup (WCAG 1.3.1)
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 358
- Forks
- 116
- Avg merge
- 2d 21h
- Merged PRs (30d)
- 4
Description
Context
Accessibility audit found label/value pairs conveyed only by layout/styling, not markup — violates WCAG 1.3.1 Info and Relationships (Level A).
Locations
- "Asset Information" sub-panel (Code, Scale, Withdrawal threshold) on the Peer and Wallet Address detail pages — each field is a
<Text>(span) label next to a<Text>(span) value inside a<Flex>(div), with no<dl>/<dt>/<dd>oraria-labelledbyconnecting them.packages/frontend/app/routes/peers.$peerId.tsx:373-411packages/frontend/app/routes/wallet-addresses.$walletAddressId.tsx:226-254
LiquidityDialog"Amount" input (used by the Peer and Asset deposit/withdraw-liquidity dialogs) — a required editable<input>with a plain<span>label that has nohtmlFor/aria-labelledbyassociation.
Note: the Liquidity Information panel's own "Amount" field (via the local FormField component) already uses a proper label[for] / input[id] pair and is not affected. Tenant's detail page has no instances of this pattern — every field there uses label[for]/input[id].
Fix
- For number 1: use
<dl>/<dt>/<dd>markup, or addaria-labelledbylinking each value to its label. - For number 2: give the label an
idand addaria-labelledbyon the amount input (or convert to a real<label htmlFor>).
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the Asset Information sections in packages/frontend/app/routes/peers.$peerId.tsx:373-411 and packages/frontend/app/routes/wallet-addresses.$walletAddressId.tsx:226-254, then locate the shared LiquidityDialog Amount input. Update the label/value and input associations as described, and verify that assistive technology can identify each value and the Amount input with its label.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Clearly specified
- Newbie friendliness
- 76/100