Skip to content

fix(swap): make swap token and amount controls keyboard and screen-reader accessible - #3150

Open
shivam-V8 wants to merge 1 commit into
aave:mainfrom
shivam-V8:fix/3100-swap-controls-a11y
Open

shivam-V8 wants to merge 1 commit into
aave:mainfrom
shivam-V8:fix/3100-swap-controls-a11y

Conversation

@shivam-V8

@shivam-V8 shivam-V8 commented Oct 24, 2026 •

Copy link
Copy Markdown

Closes #3100

General Changes

  • The "Recently used & Popular" token chips in the swap token picker are now rendered as ButtonBase instead of a click-only Box, so keyboard users can Tab to them and select with Enter/Space. They get a focus-visible style matching hover.
  • Icon-only swap controls now have accessible names: Switch input and output assets (the switch button), Swap direction (the disabled arrow shown when switching isn't available), and Clear amount (the clear button in the amount field).
  • The amount fields no longer share the name amount input: they are now Input amount and Output amount, and the limit-order price field is Limit price.
  • Updated the Cypress switch-tool selector to input[aria-label="Input amount"].
  • Regenerated catalogs with pnpm i18n. Clear amount is the same string fix: add accessible names to icon-only buttons #3133 uses for AssetInput, so both share one catalog entry.

No visual changes, apart from the new focus state on the token chips.

Developer Notes


Reviewer Checklist

Please ensure you, as the reviewer(s), have gone through this checklist to ensure that the code changes are ready to ship safely and to help mitigate any downstream issues that may occur.

  • End-to-end tests are passing without any errors
  • Code changes do not significantly increase the application bundle size
  • If there are new 3rd-party packages, they do not introduce potential security threats
  • If there are new environment variables being added, they have been added to the .env.example file as well as the pertinant .github/actions/* files
  • There are no CI changes, or they have been approved by the DevOps and Engineering team(s)

@vercel

vercel Bot commented Oct 24, 2026

Copy link
Copy Markdown

@Krshivam25 is attempting to deploy a commit to the Aave Team on Vercel.

A member of the Team first needs to authorize it.

…ader accessible

- Render the "Recently used & Popular" token chips as buttons so they can be
  focused with Tab and activated with Enter/Space, with a focus-visible style
  matching hover.
- Give the icon-only swap controls accessible names: switch input and output
  assets, the disabled swap-direction arrow, and clear amount.
- Give the input, output and limit-price fields distinct accessible names
  instead of a shared "amount input".
- Update the Cypress switch-tool selector to the new input name.

Closes aave#3100
@shivam-V8
shivam-V8 force-pushed the fix/3100-swap-controls-a11y branch from 96d9276 to 83c5540 Compare October 24, 2026 08:35

This branch has not been deployed

No deployments
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.

bug: swap token controls are not fully keyboard and screen-reader accessible

2 participants