[BX-805] Expected to be able to press "ENTER" to submit my Swap (#699)

rainbow-me · Jun 30, 2023 · a13f814 · a13f814
1 parent a10ec34
commit a13f814
Show file tree

Hide file tree

Showing 3 changed files with 168 additions and 135 deletions.
diff --git a/src/design-system/components/Button/Button.tsx b/src/design-system/components/Button/Button.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 
 import { BoxStyles } from '~/design-system/styles/core.css';
 import { Radius } from '~/design-system/styles/designTokens';
@@ -42,60 +42,67 @@ export type ButtonProps = {
       }
   );
 
-export function Button({
-  children,
-  emoji,
-  height,
-  symbol,
-  symbolSide,
-  testId,
-  ...props
-}: ButtonProps) {
-  const { textColor } = stylesForVariant({
-    color: props.color ?? 'accent',
-  })[props.variant];
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      children,
+      emoji,
+      height,
+      symbol,
+      symbolSide,
+      testId,
+      ...props
+    }: ButtonProps,
+    ref,
+  ) => {
+    const { textColor } = stylesForVariant({
+      color: props.color ?? 'accent',
+    })[props.variant];
 
-  const { paddingHorizontal, gap, textSize } = stylesForHeight[height];
+    const { paddingHorizontal, gap, textSize } = stylesForHeight[height];
 
-  const symbolComponent =
-    (symbol && (
-      <Symbol
-        color={textColor}
-        size={
-          parseInt(
-            textSize?.split(' ')[0].replace('pt', '') ?? '',
-          ) as SymbolProps['size']
-        }
-        symbol={symbol}
-        weight="bold"
-      />
-    )) ||
-    null;
+    const symbolComponent =
+      (symbol && (
+        <Symbol
+          color={textColor}
+          size={
+            parseInt(
+              textSize?.split(' ')[0].replace('pt', '') ?? '',
+            ) as SymbolProps['size']
+          }
+          symbol={symbol}
+          weight="bold"
+        />
+      )) ||
+      null;
 
-  return (
-    // eslint-disable-next-line react/jsx-props-no-spreading
-    <ButtonWrapper height={height} {...props} testId={testId}>
-      <Box
-        paddingLeft={props.paddingLeft || paddingHorizontal}
-        paddingRight={props.paddingRight || paddingHorizontal}
-      >
-        {typeof children === 'string' ? (
-          <Inline alignVertical="center" space={gap}>
-            {emoji && (
+    return (
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      <ButtonWrapper height={height} {...props} testId={testId} ref={ref}>
+        <Box
+          paddingLeft={props.paddingLeft || paddingHorizontal}
+          paddingRight={props.paddingRight || paddingHorizontal}
+        >
+          {typeof children === 'string' ? (
+            <Inline alignVertical="center" space={gap}>
+              {emoji && (
+                <Text color={textColor} size={textSize} weight="bold">
+                  {emoji}
+                </Text>
+              )}
+              {symbolSide !== 'right' && symbolComponent}
               <Text color={textColor} size={textSize} weight="bold">
-                {emoji}
+                {children}
               </Text>
-            )}
-            {symbolSide !== 'right' && symbolComponent}
-            <Text color={textColor} size={textSize} weight="bold">
-              {children}
-            </Text>
-            {symbolSide === 'right' && symbolComponent}
-          </Inline>
-        ) : (
-          children
-        )}
-      </Box>
-    </ButtonWrapper>
-  );
-}
+              {symbolSide === 'right' && symbolComponent}
+            </Inline>
+          ) : (
+            children
+          )}
+        </Box>
+      </ButtonWrapper>
+    );
+  },
+);
+
+Button.displayName = 'Button';
diff --git a/src/design-system/components/Button/ButtonWrapper.tsx b/src/design-system/components/Button/ButtonWrapper.tsx
@@ -1,5 +1,5 @@
 import { motion } from 'framer-motion';
-import React from 'react';
+import React, { forwardRef } from 'react';
 
 import {
   BoxStyles,
@@ -232,90 +232,98 @@ export const stylesForVariant = ({
   },
 });
 
-export function ButtonWrapper({
-  autoFocus,
-  children,
-  cursor = 'default',
-  color,
-  height,
-  onClick,
-  variant,
-  width = 'fit',
-  blur = '',
-  borderRadius,
-  tabIndex,
-  disabled,
-  testId,
-}: ButtonWrapperProps) {
-  const { boxShadow } = stylesForHeightAndVariant({
-    color: color as ButtonColor,
-  })[height][variant];
+export const ButtonWrapper = forwardRef<HTMLButtonElement, ButtonWrapperProps>(
+  (
+    {
+      autoFocus,
+      children,
+      cursor = 'default',
+      color,
+      height,
+      onClick,
+      variant,
+      width = 'fit',
+      blur = '',
+      borderRadius,
+      tabIndex,
+      disabled,
+      testId,
+    }: ButtonWrapperProps,
+    ref,
+  ) => {
+    const { boxShadow } = stylesForHeightAndVariant({
+      color: color as ButtonColor,
+    })[height][variant];
 
-  const { background, borderColor, borderWidth } = stylesForVariant({
-    color: color ?? 'accent',
-  })[variant];
+    const { background, borderColor, borderWidth } = stylesForVariant({
+      color: color ?? 'accent',
+    })[variant];
 
-  let outlineColor = undefined;
-  // Only apply outline to buttons with tabIndex
-  if (tabIndex !== undefined) {
-    outlineColor =
-      color && color !== 'accent'
-        ? foregroundColorVars[color as TextColor] || accentColorAsHsl
-        : accentColorAsHsl;
-  }
-  const styles = {
-    ...((blur && { backdropFilter: `blur(${blur})` }) || {}),
-    outlineColor,
-  };
+    let outlineColor = undefined;
+    // Only apply outline to buttons with tabIndex
+    if (tabIndex !== undefined) {
+      outlineColor =
+        color && color !== 'accent'
+          ? foregroundColorVars[color as TextColor] || accentColorAsHsl
+          : accentColorAsHsl;
+    }
+    const styles = {
+      ...((blur && { backdropFilter: `blur(${blur})` }) || {}),
+      outlineColor,
+    };
 
-  return (
-    <Box
-      as={motion.div}
-      initial={{ zIndex: 0 }}
-      whileHover={{ scale: disabled ? undefined : transformScales['1.04'] }}
-      whileTap={{ scale: disabled ? undefined : transformScales['0.96'] }}
-      transition={transitions.bounce}
-      width={width}
-      className="bx-button-wrapper"
-    >
+    return (
       <Box
-        as="button"
-        alignItems="center"
-        background={
-          variant === 'transparentHover'
-            ? {
-                default: background || 'transparent',
-                hover: 'surfaceSecondaryElevated',
-              }
-            : background
-        }
-        borderRadius={borderRadius ?? 'round'}
-        borderColor={
-          variant === 'transparentHover'
-            ? { default: 'transparent', hover: 'buttonStroke' }
-            : borderColor
-        }
-        borderWidth={variant === 'transparentHover' ? '1px' : borderWidth}
-        boxShadow={boxShadow}
-        className={[
-          heightStyles[height],
-          variant === 'tinted' &&
-            tintedStyles[(color as ButtonColor) || 'accent'],
-        ]}
-        display="flex"
-        onClick={onClick}
-        disabled={disabled}
-        position="relative"
-        justifyContent="center"
+        as={motion.div}
+        initial={{ zIndex: 0 }}
+        whileHover={{ scale: disabled ? undefined : transformScales['1.04'] }}
+        whileTap={{ scale: disabled ? undefined : transformScales['0.96'] }}
+        transition={transitions.bounce}
         width={width}
-        style={styles}
-        tabIndex={tabIndex}
-        testId={testId}
-        cursor={cursor}
-        autoFocus={autoFocus}
+        className="bx-button-wrapper"
       >
-        {children}
+        <Box
+          as="button"
+          alignItems="center"
+          background={
+            variant === 'transparentHover'
+              ? {
+                  default: background || 'transparent',
+                  hover: 'surfaceSecondaryElevated',
+                }
+              : background
+          }
+          borderRadius={borderRadius ?? 'round'}
+          borderColor={
+            variant === 'transparentHover'
+              ? { default: 'transparent', hover: 'buttonStroke' }
+              : borderColor
+          }
+          borderWidth={variant === 'transparentHover' ? '1px' : borderWidth}
+          boxShadow={boxShadow}
+          className={[
+            heightStyles[height],
+            variant === 'tinted' &&
+              tintedStyles[(color as ButtonColor) || 'accent'],
+          ]}
+          display="flex"
+          onClick={onClick}
+          disabled={disabled}
+          position="relative"
+          justifyContent="center"
+          width={width}
+          style={styles}
+          tabIndex={tabIndex}
+          testId={testId}
+          cursor={cursor}
+          ref={ref}
+          autoFocus={autoFocus}
+        >
+          {children}
+        </Box>
       </Box>
-    </Box>
-  );
-}
+    );
+  },
+);
+
+ButtonWrapper.displayName = 'ButtonWrapper';
diff --git a/src/entries/popup/pages/swap/SwapReviewSheet/SwapReviewSheet.tsx b/src/entries/popup/pages/swap/SwapReviewSheet/SwapReviewSheet.tsx
@@ -1,6 +1,12 @@
 import { CrosschainQuote, Quote, QuoteError } from '@rainbow-me/swaps';
 import { motion } from 'framer-motion';
-import React, { useCallback, useMemo, useState } from 'react';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import { Address } from 'wagmi';
 
 import SendSound from 'static/assets/audio/woosh.mp3';
@@ -215,6 +221,7 @@ const SwapReviewSheetWithQuote = ({
   const [sendingSwap, setSendingSwap] = useState(false);
   const { selectedGas } = useGasStore();
   const { setSwapAssetsToRefresh } = useSwapAssetsToRefreshStore();
+  const confirmSwapButtonRef = useRef<HTMLButtonElement>(null);
 
   const nativeAssetUniqueId = getNetworkNativeAssetUniqueId({
     chainId: assetToSell?.chainId || ChainId.mainnet,
@@ -420,6 +427,14 @@ const SwapReviewSheetWithQuote = ({
     [enoughNativeAssetBalanceForGas],
   );
 
+  useEffect(() => {
+    if (show) {
+      setTimeout(() => {
+        confirmSwapButtonRef.current?.focus();
+      }, 301);
+    }
+  }, [show]);
+
   return (
     <>
       <ExplainerSheet
@@ -438,6 +453,7 @@ const SwapReviewSheetWithQuote = ({
             borderTopLeftRadius: '24px',
             borderTopRightRadius: '24px',
           }}
+          isModal
         >
           <Stack space="12px">
             <Navbar
@@ -684,6 +700,8 @@ const SwapReviewSheetWithQuote = ({
                     disabled={sendingSwap}
                     width="full"
                     testId="swap-review-execute"
+                    tabIndex={0}
+                    ref={confirmSwapButtonRef}
                   >
                     {sendingSwap ? (
                       <Box