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

cypress/e2e/5-widgets/switch-tool.cy.ts

@@ -51,7 +51,7 @@ const switchByTool = ({
       if (isMaxAmount) {
         cy.get('[data-cy=Modal]').find('button:contains("Max")').click();
       } else {
-        cy.get('[data-cy=Modal] input[aria-label="amount input"]')
+        cy.get('[data-cy=Modal] input[aria-label="Input amount"]')
           .first()
           .type(amount.toString(), { force: true });
       }

src/components/transactions/Swap/inputs/LimitOrderInputs.tsx

@@ -1,4 +1,5 @@
 import { ArrowDownIcon, SwitchVerticalIcon } from '@heroicons/react/outline';
+import { t } from '@lingui/macro';
 import { Box, IconButton, SvgIcon, Typography } from '@mui/material';
 import { Dispatch } from 'react';
 
@@ -143,6 +144,7 @@ export const LimitOrderInputs = ({
         {params.showSwitchInputAndOutputAssetsButton ? (
           <Box sx={{ position: 'absolute' }}>
             <IconButton
+              aria-label={t`Switch input and output assets`}
               onClick={swapState.onSwitchReserves}
               disabled={!(customProps?.canSwitchTokens ?? false)}
               sx={{
@@ -182,6 +184,7 @@ export const LimitOrderInputs = ({
           !outputInputTitle && (
             <Box sx={{ position: 'absolute' }}>
               <IconButton
+                aria-label={t`Swap direction`}
                 disabled
                 sx={{
                   border: '1px solid',

src/components/transactions/Swap/inputs/MarketOrderInputs.tsx

@@ -1,4 +1,5 @@
 import { ArrowDownIcon, SwitchVerticalIcon } from '@heroicons/react/outline';
+import { t } from '@lingui/macro';
 import { Box, IconButton, SvgIcon, Typography } from '@mui/material';
 import { Dispatch } from 'react';
 
@@ -111,6 +112,7 @@ export const MarketOrderInputs = ({
         {params.showSwitchInputAndOutputAssetsButton ? (
           <Box sx={{ position: 'absolute' }}>
             <IconButton
+              aria-label={t`Switch input and output assets`}
               onClick={swapState.onSwitchReserves}
               disabled={!(customProps?.canSwitchTokens ?? false)}
               sx={{
@@ -143,6 +145,7 @@ export const MarketOrderInputs = ({
           !params.outputInputTitle && (
             <Box sx={{ position: 'absolute' }}>
               <IconButton
+                aria-label={t`Swap direction`}
                 disabled
                 sx={{
                   border: '1px solid',

src/components/transactions/Swap/inputs/primitives/SwapAssetInput.tsx

@@ -3,12 +3,13 @@ import { isAddress } from '@ethersproject/address';
 import { formatUnits } from '@ethersproject/units';
 import { ExclamationIcon } from '@heroicons/react/outline';
 import { XCircleIcon } from '@heroicons/react/solid';
-import { Trans } from '@lingui/macro';
+import { t, Trans } from '@lingui/macro';
 import ExpandMore from '@mui/icons-material/ExpandMore';
 import LaunchIcon from '@mui/icons-material/Launch';
 import {
   Box,
   Button,
+  ButtonBase,
   CircularProgress,
   IconButton,
   InputBase,
@@ -340,7 +341,7 @@ export const SwitchAssetInput = ({
                 }
               }}
               inputProps={{
-                'aria-label': 'amount input',
+                'aria-label': side === 'input' ? t`Input amount` : t`Output amount`,
                 style: {
                   width: '100%',
                   fontSize: '21px',
@@ -358,6 +359,7 @@ export const SwitchAssetInput = ({
           )}
           {value !== '' && !disableInput && (
             <IconButton
+              aria-label={t`Clear amount`}
               sx={{
                 minWidth: 0,
                 p: 0,
@@ -474,7 +476,7 @@ export const SwitchAssetInput = ({
                       <Trans>{popularSectionTitle}</Trans>
                     </Typography>
                     {mergedPopular.map((asset) => (
-                      <Box
+                      <ButtonBase
                         key={asset.addressToSwap}
                         sx={{
                           display: 'flex',
@@ -489,6 +491,9 @@ export const SwitchAssetInput = ({
                           '&:hover': {
                             backgroundColor: 'border-2',
                           },
+                          '&.Mui-focusVisible': {
+                            backgroundColor: 'border-2',
+                          },
                         }}
                         onClick={() => handleSelect(asset)}
                       >
@@ -500,7 +505,7 @@ export const SwitchAssetInput = ({
                         <Typography variant="subheader1" color="fg-1" sx={{ mr: 1 }}>
                           {asset.symbol}
                         </Typography>
-                      </Box>
+                      </ButtonBase>
                     ))}
                   </Box>
                 )}

src/components/transactions/Swap/inputs/shared/PriceInput.tsx

@@ -1,5 +1,6 @@
 import { BigNumberValue, valueToBigNumber } from '@aave/math-utils';
 import { ExclamationIcon, RefreshIcon } from '@heroicons/react/outline';
+import { t } from '@lingui/macro';
 import { Box, Button, CircularProgress, InputBase, SvgIcon, Typography } from '@mui/material';
 import React, { useEffect, useRef, useState } from 'react';
 import NumberFormat, { NumberFormatProps } from 'react-number-format';
@@ -289,7 +290,7 @@ export const PriceInput = ({
             autoFocus
             disabled={disabled}
             inputProps={{
-              'aria-label': 'amount input',
+              'aria-label': t`Limit price`,
               style: {
                 width: '100%',
                 fontSize: '21px',

src/locales/en/messages.po

@@ -523,6 +523,11 @@ msgstr "Withdrawing GHO"
 msgid "Signing"
 msgstr "Signing"
 
+#: src/components/transactions/Swap/inputs/LimitOrderInputs.tsx
+#: src/components/transactions/Swap/inputs/MarketOrderInputs.tsx
+msgid "Switch input and output assets"
+msgstr "Switch input and output assets"
+
 #: src/components/transactions/Repay/RepayActions.tsx
 msgid "Repay {symbol}"
 msgstr "Repay {symbol}"
@@ -1087,6 +1092,10 @@ msgstr "Estimated compounding interest rate, that is determined by Aave Governan
 msgid "unstaked"
 msgstr "unstaked"
 
+#: src/components/transactions/Swap/inputs/primitives/SwapAssetInput.tsx
+msgid "Output amount"
+msgstr "Output amount"
+
 #: src/layouts/SupportModal.tsx
 msgid "Share my wallet address to help the support team resolve my issue"
 msgstr "Share my wallet address to help the support team resolve my issue"
@@ -3091,6 +3100,10 @@ msgstr "This swap has a price impact of {0}%, which exceeds the 25% safety thres
 msgid "Earn into sGHO"
 msgstr "Earn into sGHO"
 
+#: src/components/transactions/Swap/inputs/primitives/SwapAssetInput.tsx
+msgid "Input amount"
+msgstr "Input amount"
+
 #: src/ui-config/errorMapping.tsx
 msgid "Zero address not valid"
 msgstr "Zero address not valid"
@@ -3331,6 +3344,11 @@ msgstr "Disable E-Mode"
 msgid "Enable E-Mode"
 msgstr "Enable E-Mode"
 
+#: src/components/transactions/Swap/inputs/LimitOrderInputs.tsx
+#: src/components/transactions/Swap/inputs/MarketOrderInputs.tsx
+msgid "Swap direction"
+msgstr "Swap direction"
+
 #: src/components/transactions/Emode/EmodeModalContent.tsx
 msgid "Enabling E-Mode allows you to maximize your borrowing power, however, borrowing is restricted to assets within the selected category. <0>Learn more</0> about how it works and the applied restrictions."
 msgstr "Enabling E-Mode allows you to maximize your borrowing power, however, borrowing is restricted to assets within the selected category. <0>Learn more</0> about how it works and the applied restrictions."
@@ -3493,6 +3511,10 @@ msgstr "English"
 msgid "Learn more in our <0>FAQ guide</0>"
 msgstr "Learn more in our <0>FAQ guide</0>"
 
+#: src/components/transactions/Swap/inputs/primitives/SwapAssetInput.tsx
+msgid "Clear amount"
+msgstr "Clear amount"
+
 #: src/components/transactions/Warnings/CowLowerThanMarketWarning.tsx
 msgid "The selected rate is lower than the market price. You might incur a loss if you proceed."
 msgstr "The selected rate is lower than the market price. You might incur a loss if you proceed."
@@ -3851,6 +3873,10 @@ msgstr "Please connect your wallet to see your supplies, borrowings, and open po
 msgid "Invalid expiration"
 msgstr "Invalid expiration"
 
+#: src/components/transactions/Swap/inputs/shared/PriceInput.tsx
+msgid "Limit price"
+msgstr "Limit price"
+
 #: src/modules/umbrella/AvailableToClaimItem.tsx
 msgid "Rewards available to claim"
 msgstr "Rewards available to claim"