fix(a11y): add accessible name to AmountInput for screen readers (#427)

[Amas-01]

Summary

• apps/web/src/components/ui/AmountInput.tsx: added aria-label to the <input> element, derived from the existing currency prop — value is Amount in ${currency}
• apps/web/src/__tests__/components/AmountInput.test.tsx: created new test file with 5 accessibility and regression tests asserting the input's accessible name includes the currency

Approach taken

aria-label was chosen over aria-labelledby because:

• The codebase has zero precedent for aria-labelledby or <label htmlFor> wiring — the only ARIA pattern used anywhere is plain aria-label on iconographic buttons (Toasts.tsx, WalletConnect.tsx)
• The visible currency <span> has no stable id, and adding one would require also adding an id prop to the component with no existing convention to follow
• aria-label derived from the already-available currency prop requires no new props, no JSX restructuring, and no call site changes

Accessible name value

Template: Amount in ${currency}

Examples: "Amount in USDC" (DepositTab), "Amount in mUSDC" (WithdrawTab)

Verification

• getByRole('spinbutton', { name: /amount in usdc/i }) passes — confirms the accessible name is present and includes the currency
• getByRole with a name filter throws if no matching accessible name exists, making it a hard accessibility assertion without requiring axe

axe audit: not run — jest-axe / @axe-core/react are not installed in this project. Documented in the test file with a comment.

Test plan

• pnpm lint && pnpm typecheck && pnpm test pass locally (57/57 tests pass; 1 pre-existing unrelated failure in useVaultActions.test.ts documented below)
• getByRole('spinbutton', { name: /amount in usdc/i }) succeeds — accessible name confirmed present
• No call site modified; no existing prop changed or removed

Breaking change

No — no existing prop was changed or removed. No call site was modified.

Additional findings

The useVaultActions.test.ts file has a pre-existing failure (Cannot find module '@meridian/shared') present on main before this change. It is caused by the workspace package not being built in the test environment and is unrelated to this PR.

Closes #427

[vercel]

@Amas-01 is attempting to deploy a commit to the Collins' projects Team on Vercel.

A member of the Team first needs to authorize it.

[drips-wave]

@Amas-01 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

[collinsezedike]

CI is failing on pnpm format:check: prettier --check flags apps/web/src/__tests__/components/AmountInput.test.tsx. Run pnpm prettier --write apps/web/src/__tests__/components/AmountInput.test.tsx and push the result.

Worth noting for next time: format:check is a separate script from pnpm lint, so pnpm lint && pnpm typecheck && pnpm test (what your test plan lists) won't catch this on its own.

Everything else here is solid, thorough PR body, real accessibility assertions via getByRole with a name filter rather than just checking the attribute exists, and the pre-existing unrelated test failure you flagged is appreciated context.

[collinsezedike]

Approving. The accessibility assertion approach here is solid, using getByRole with a name filter is a real hard check that the accessible name exists, not just that an attribute is present.

Thank you for the contribution. Feel free to grab another open issue.

Merging now.