Auto focus all CTA buttons

src/ui/pages/BackupWallet/BackupWallet.tsx

@@ -28,6 +28,7 @@ import CopyIcon from 'jsx:src/ui/assets/copy.svg';
 import { ZStack } from 'src/ui/ui-kit/ZStack';
 import { SecretInput } from 'src/ui/components/SecretInput';
 import { UnstyledButton } from 'src/ui/ui-kit/UnstyledButton';
+import { focusNode } from 'src/ui/shared/focusNode';
 import { WithConfetti } from '../GetStarted/components/DecorativeMessage/DecorativeMessage';
 import { DecorativeMessage } from '../GetStarted/components/DecorativeMessage';
 import { clipboardWarning } from './clipboardWarning';
@@ -359,7 +360,12 @@ function VerifySuccess({ seedType }: { seedType: SeedType }) {
             </UIText>
           </VStack>
         </FillView>
-        <Button style={{ marginTop: 'auto' }} as={Link} to="/overview">
+        <Button
+          ref={focusNode}
+          style={{ marginTop: 'auto' }}
+          as={Link}
+          to="/overview"
+        >
           Finish
         </Button>
         <PageBottom />

src/ui/pages/GetStarted/GenerateWallet/GenerateWallet.tsx

@@ -13,6 +13,7 @@ import { NavigationTitle } from 'src/ui/components/NavigationTitle';
 import { getError } from 'src/shared/errors/getError';
 import { WithPasswordSession } from 'src/ui/components/VerifyUser/WithPasswordSession';
 import { PageBottom } from 'src/ui/components/PageBottom';
+import { focusNode } from 'src/ui/shared/focusNode';
 import {
   DecorativeMessage,
   DecorativeMessageDone,
@@ -125,6 +126,7 @@ function GenerateWalletView() {
             </UIText>
           ) : null}
           <Button
+            ref={focusNode}
             disabled={finalizeMutation.isLoading}
             onClick={async () => {
               finalizeMutation.mutate(data.address);

src/ui/pages/GetStarted/ImportWallet/MnemonicImportView/AddressImportFlow/AddressImportMessages/AddressImportMessages.tsx

@@ -159,6 +159,12 @@ function AddressImportMessagesView({ values }: { values: BareWallet[] }) {
       trigger();
     }
   }, [ready, trigger]);
+  const autoFocusRef = useRef<HTMLButtonElement | null>(null);
+  useEffect(() => {
+    if (ready) {
+      autoFocusRef.current?.focus();
+    }
+  }, [ready]);
   return (
     <PageColumn>
       <PageTop />
@@ -178,6 +184,7 @@ function AddressImportMessagesView({ values }: { values: BareWallet[] }) {
         ) : null}
         <Button
           as={animated.button}
+          ref={autoFocusRef}
           disabled={!ready || finalizeMutation.isLoading}
           style={style}
           onClick={() => {

src/ui/pages/GetStarted/ImportWallet/PrivateKeyImportView/PrivateKeyImportView.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { useMutation } from 'react-query';
 import { useNavigate } from 'react-router-dom';
 import { PageColumn } from 'src/ui/components/PageColumn';
@@ -29,6 +29,13 @@ function PrivateKeyImportFlow({
   onSubmit: () => void;
   isSubmitting: boolean;
 }) {
+  const autoFocusRef = useRef<HTMLButtonElement | null>(null);
+  const isDonePreparing = !isSubmitting;
+  useEffect(() => {
+    if (isDonePreparing) {
+      autoFocusRef.current?.focus();
+    }
+  }, [isDonePreparing]);
   return (
     <>
       <VStack gap={8}>
@@ -51,6 +58,7 @@ function PrivateKeyImportFlow({
       </VStack>
 
       <Button
+        ref={autoFocusRef}
         style={{ marginTop: 'auto', marginBottom: 16 }}
         onClick={onSubmit}
         disabled={isSubmitting}

src/ui/shared/focusNode.ts

@@ -0,0 +1,3 @@
+export function focusNode<T extends HTMLElement>(node: T | null) {
+  node?.focus();
+}