feat(extension): autofocus primary action buttons in DappConnector views (#1893)

This aims to improve UX when using only keyboard in DappConnector views

Author: przemyslaw-wlodek

apps/browser-extension-wallet/src/features/dapp/components/ConfirmData.tsx

@@ -163,6 +163,7 @@ export const DappConfirmData = (): React.ReactElement => {
       </div>
       <div className={styles.actions}>
         <Button
+          autoFocus
           onClick={confirmationCallback}
           disabled={!formattedData || isConfirmingTx}
           data-testid="dapp-transaction-confirm"

apps/browser-extension-wallet/src/features/dapp/components/Connect.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react/no-multi-comp */
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import { Banner, Button, logger } from '@lace/common';
 import cn from 'classnames';
 import { useTranslation } from 'react-i18next';
@@ -106,6 +106,14 @@ export const Connect = (): React.ReactElement => {
   const [dappInfo, setDappInfo] = useState<Wallet.DappInfo>();
   const [isSSLEncrypted, setIsSSLEncrypted] = useState(true);
   const { environmentName } = useWalletStore();
+  const allowAlwaysButtonRef = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    if (isModalVisible && allowAlwaysButtonRef.current) {
+      allowAlwaysButtonRef.current.focus();
+    }
+  }, [isModalVisible]);
+
   useEffect(() => {
     dappDataApi
       .getDappInfo()
@@ -151,7 +159,12 @@ export const Connect = (): React.ReactElement => {
         <AuthorizeDapp dappInfo={dappInfo} warningBanner={showNonSSLBanner ? <NonSSLBanner /> : <WarningBanner />} />
       </div>
       <div className={styles.footer}>
-        <Button className={styles.footerBtn} data-testid="connect-authorize-button" onClick={handleAuthorizeClick}>
+        <Button
+          autoFocus
+          className={styles.footerBtn}
+          data-testid="connect-authorize-button"
+          onClick={handleAuthorizeClick}
+        >
           {t('dapp.connect.btn.accept')}
         </Button>
         <Button
@@ -181,7 +194,12 @@ export const Connect = (): React.ReactElement => {
             {t('dapp.connect.modal.description')}
           </div>
           <div className={styles.modalActions}>
-            <Button block data-testid="connect-modal-accept-always" onClick={handleAllowAlwaysClick}>
+            <Button
+              ref={allowAlwaysButtonRef}
+              block
+              data-testid="connect-modal-accept-always"
+              onClick={handleAllowAlwaysClick}
+            >
               {t('dapp.connect.modal.allowAlways')}
             </Button>
             <Button block data-testid="connect-modal-accept-once" onClick={handleAllowOnceClick} color="secondary">

apps/browser-extension-wallet/src/features/dapp/components/DappError.tsx

@@ -44,7 +44,7 @@ export const DappError = ({
         </div>
       </div>
       <div className={styles.footer}>
-        <Button data-testid={closeButtonTestId} className={styles.footerBtn} onClick={handleClose}>
+        <Button autoFocus data-testid={closeButtonTestId} className={styles.footerBtn} onClick={handleClose}>
           {closeButtonLabel || t('dapp.dappErrorPage.closeButton')}
         </Button>
       </div>

apps/browser-extension-wallet/src/features/dapp/components/DappSignDataFail.tsx

@@ -41,6 +41,7 @@ export const DappSignDataFail = (): React.ReactElement => {
       </div>
       <div className={styles.footer}>
         <Button
+          autoFocus
           data-testid="dapp-sign-data-fail-close-button"
           onClick={onClose}
           color="secondary"

apps/browser-extension-wallet/src/features/dapp/components/DappSignDataSuccess.tsx

@@ -31,7 +31,12 @@ export const DappSignDataSuccess = (): React.ReactElement => {
         </div>
       </div>
       <div className={styles.footer}>
-        <Button data-testid="dapp-sign-data-success-close-button" className={styles.footerBtn} onClick={onClose}>
+        <Button
+          autoFocus
+          data-testid="dapp-sign-data-success-close-button"
+          className={styles.footerBtn}
+          onClick={onClose}
+        >
           {t('general.button.close')}
         </Button>
       </div>

apps/browser-extension-wallet/src/features/dapp/components/DappTransactionFail.tsx

@@ -45,6 +45,7 @@ export const DappTransactionFail = (): React.ReactElement => {
       </div>
       <div className={styles.footer}>
         <Button
+          autoFocus
           data-testid="dapp-sign-tx-fail-close-button"
           onClick={onClose}
           color="secondary"

apps/browser-extension-wallet/src/features/dapp/components/DappTransactionSuccess.tsx

@@ -36,7 +36,12 @@ export const DappTransactionSuccess = (): React.ReactElement => {
         </div>
       </div>
       <div className={styles.footer}>
-        <Button data-testid="dapp-sign-tx-success-close-button" className={styles.footerBtn} onClick={onClose}>
+        <Button
+          autoFocus
+          data-testid="dapp-sign-tx-success-close-button"
+          className={styles.footerBtn}
+          onClick={onClose}
+        >
           {t('general.button.close')}
         </Button>
       </div>

apps/browser-extension-wallet/src/features/dapp/components/confirm-transaction/ConfirmTransaction.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect } from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
 import { Button, logger, PostHogAction } from '@lace/common';
 import { useTranslation } from 'react-i18next';
 import { Layout } from '../Layout';
@@ -30,6 +30,7 @@ export const ConfirmTransaction = (): React.ReactElement => {
   const analytics = useAnalyticsContext();
   const disallowSignTx = useDisallowSignTx(req);
   const { isConfirmingTx, signWithHardwareWallet } = useSignWithHardwareWallet(req);
+  const confirmTransactionButtonRef = useRef<HTMLButtonElement>(null);
 
   const handleConfirmTransaction = () => {
     if (!req) return;
@@ -48,6 +49,7 @@ export const ConfirmTransaction = (): React.ReactElement => {
   };
 
   const txWitnessRequest = useTxWitnessRequest();
+  const isConfirmTransactionLoading = !req || (isHardwareWallet && isConfirmingTx);
 
   const cancelTransaction = useCallback(() => {
     disallowSignTx(true);
@@ -87,13 +89,20 @@ export const ConfirmTransaction = (): React.ReactElement => {
     };
   }, [setSignTxRequest, setDappInfo, txWitnessRequest, redirectToDappTxSignFailure, disallowSignTx]);
 
+  useEffect(() => {
+    if (!isConfirmTransactionLoading && confirmTransactionButtonRef.current) {
+      confirmTransactionButtonRef.current.focus();
+    }
+  }, [isConfirmTransactionLoading]);
+
   return (
     <Layout pageClassname={styles.spaceBetween}>
       {req && walletInfo && inMemoryWallet ? <DappTransactionContainer /> : <Skeleton loading />}
       <div className={styles.actions}>
         <Button
+          ref={confirmTransactionButtonRef}
           onClick={handleConfirmTransaction}
-          loading={!req || (isHardwareWallet && isConfirmingTx)}
+          loading={isConfirmTransactionLoading}
           data-testid="dapp-transaction-confirm"
           className={styles.actionBtn}
         >