Bug: Swap has various accessibility issues

[samcartersmith]

Describe the bug and the steps to reproduce it

1. Go to https://onchainkit.xyz/#swap
2. Tab around the Swap component
3. Turn on a screen reader
4. Experience button labels with a screen reader

Issues

• The drop-down for selecting asset type have a confusing label and do not communicate name, state, or value
• The swap direction icon has no label
• There is no keyboard focus on the drop-down
• Dropdown asset selectors should function like select HTML components
• Red is used to indicate an error which is not clear to all users

Asset Selector

Swap Direction Button

What's the expected behavior?

Suggested Fixes

• The drop-down for selecting asset type has a confusing label and do not communicate name, state, or value
  You can use this spec as an example. https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/. When the user focuses the asset selector they should hear the following: purpose, value, and role. For example, "asset selector, ETH, combobox".
• The swap direction icon has no label
  Use an aria-label on the button. For example, aria-label="change swap direction"
• There is no visual keyboard focus on the drop-down
  Use an outline to indicate focus that meets a 3:1 contrast ratio or above.
• Visual focus indicators are not easy to see
  Use an outline that meets a 3:1 or above contrast ratio.

What version of the libraries are you using?

No response

[fakepixels]

Thanks so much for the detailed write up @samcartersmith

We're looking into it! 🫡