interledger / interledger/rafiki

Asset Information fields and Liquidity amount input use unassociated label/value markup (WCAG 1.3.1)

Open
#3,969 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

pkg: frontend
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

  1. "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> or aria-labelledby connecting them.
    • packages/frontend/app/routes/peers.$peerId.tsx:373-411
    • packages/frontend/app/routes/wallet-addresses.$walletAddressId.tsx:226-254
  2. LiquidityDialog "Amount" input (used by the Peer and Asset deposit/withdraw-liquidity dialogs) — a required editable <input> with a plain <span> label that has no htmlFor/aria-labelledby association.

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 add aria-labelledby linking each value to its label.
  • For number 2: give the label an id and add aria-labelledby on the amount input (or convert to a real <label htmlFor>).

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.