[WIP] Automatically focus inputs, or the primary button, in modals.

packages/desktop-client/src/components/accounts/Account.jsx

@@ -76,7 +76,12 @@ function EmptyMessage({ onAdd }) {
           manage it locally yourself.
         </Text>
 
-        <Button variant="primary" style={{ marginTop: 20 }} onPress={onAdd}>
+        <Button
+          variant="primary"
+          style={{ marginTop: 20 }}
+          autoFocus
+          onPress={onAdd}
+        >
           Add account
         </Button>
 

packages/desktop-client/src/components/accounts/AccountSyncCheck.jsx

@@ -132,6 +132,7 @@ export function AccountSyncCheck() {
               <Button onPress={unlink}>Unlink</Button>
               <Button
                 variant="primary"
+                autoFocus
                 onPress={reauth}
                 style={{ marginLeft: 5 }}
               >

packages/desktop-client/src/components/accounts/Reconcile.jsx

@@ -78,7 +78,7 @@ export function ReconcilingMessage({
           </View>
         )}
         <View style={{ marginLeft: 15 }}>
-          <Button variant="primary" onPress={onDone}>
+          <Button variant="primary" autoFocus onPress={onDone}>
             Done Reconciling
           </Button>
         </View>

packages/desktop-client/src/components/manager/ImportActual.tsx

@@ -84,6 +84,7 @@ export function ImportActual({ modalProps }: ImportProps) {
             <View style={{ alignSelf: 'center' }}>
               <ButtonWithLoading
                 type="primary"
+                autoFocus
                 loading={importing}
                 onClick={onImport}
               >

packages/desktop-client/src/components/manager/ImportYNAB4.tsx

@@ -73,6 +73,7 @@ export function ImportYNAB4({ modalProps }: ImportProps) {
             <View>
               <ButtonWithLoading
                 type="primary"
+                autoFocus
                 loading={importing}
                 onClick={onImport}
               >

packages/desktop-client/src/components/manager/ImportYNAB5.tsx

@@ -83,6 +83,7 @@ export function ImportYNAB5({ modalProps }: ImportProps) {
             <View>
               <ButtonWithLoading
                 type="primary"
+                autoFocus
                 loading={importing}
                 onClick={onImport}
               >

packages/desktop-client/src/components/manager/WelcomeScreen.tsx

@@ -75,7 +75,7 @@ export function WelcomeScreen() {
           <Button onClick={() => createBudget({ testMode: true })}>
             View demo
           </Button>
-          <Button type="primary" onClick={() => createBudget()}>
+          <Button type="primary" autoFocus onClick={() => createBudget()}>
             Start fresh
           </Button>
         </View>

packages/desktop-client/src/components/mobile/transactions/TransactionEdit.jsx

@@ -456,7 +456,7 @@ const TransactionEditInner = memo(function TransactionEditInner({
 
   const { editingField, onRequestActiveEdit, onClearActiveEdit } =
     useSingleActiveEditForm();
-  const [totalAmountFocused, setTotalAmountFocused] = useState(false);
+  const [totalAmountFocused, setTotalAmountFocused] = useState(true);
   const childTransactionElementRefMap = useRef({});
 
   const payeesById = useMemo(() => groupById(payees), [payees]);

packages/desktop-client/src/components/modals/CloseAccountModal.tsx

@@ -149,6 +149,7 @@ export function CloseAccountModal({
                     value={transferAccountId}
                     inputProps={{
                       placeholder: 'Select account...',
+                      autoFocus: true,
                       ...(isNarrowWidth && {
                         value: transferAccount?.name || '',
                         style: {

packages/desktop-client/src/components/modals/ConfirmCategoryDelete.tsx

@@ -62,7 +62,7 @@ export function ConfirmCategoryDelete({
           {group ? (
             <Block>
               Categories in the group <strong>{group.name}</strong> are used by
-              existing transaction
+              existing transactions
               {!isIncome &&
                 ' or it has a positive leftover balance currently'}.{' '}
               <strong>Are you sure you want to delete it?</strong> If so, you
@@ -109,6 +109,7 @@ export function ConfirmCategoryDelete({
                         }))
                 }
                 value={transferCategory}
+                focused={true}
                 inputProps={{
                   placeholder: 'Select category...',
                 }}

packages/desktop-client/src/components/modals/ConfirmTransactionDelete.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { useResponsive } from '../../ResponsiveProvider';
 import { styles } from '../../style';
 import { Button } from '../common/Button';
+import { InitialFocus } from '../common/InitialFocus';
 import { Modal } from '../common/Modal';
 import { Paragraph } from '../common/Paragraph';
 import { View } from '../common/View';
@@ -43,16 +44,18 @@ export function ConfirmTransactionDelete({
           >
             Cancel
           </Button>
-          <Button
-            type="primary"
-            style={narrowButtonStyle}
-            onClick={() => {
-              onConfirm();
-              modalProps.onClose();
-            }}
-          >
-            Delete
-          </Button>
+          <InitialFocus>
+            <Button
+              type="primary"
+              style={narrowButtonStyle}
+              onClick={() => {
+                onConfirm();
+                modalProps.onClose();
+              }}
+            >
+              Delete
+            </Button>
+          </InitialFocus>
         </View>
       </View>
     </Modal>

packages/desktop-client/src/components/modals/ConfirmTransactionEdit.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 
 import { Block } from '../common/Block';
 import { Button } from '../common/Button';
+import { InitialFocus } from '../common/InitialFocus';
 import { Modal } from '../common/Modal';
 import { View } from '../common/View';
 import { type CommonModalProps } from '../Modals';
@@ -82,15 +83,17 @@ export function ConfirmTransactionEdit({
               >
                 Cancel
               </Button>
-              <Button
-                type="primary"
-                onClick={() => {
-                  modalProps.onClose();
-                  onConfirm();
-                }}
-              >
-                Confirm
-              </Button>
+              <InitialFocus>
+                <Button
+                  type="primary"
+                  onClick={() => {
+                    modalProps.onClose();
+                    onConfirm();
+                  }}
+                >
+                  Confirm
+                </Button>
+              </InitialFocus>
             </View>
           </View>
         </View>

packages/desktop-client/src/components/modals/ConfirmUnlinkAccount.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import { Button } from '../common/Button';
+import { InitialFocus } from '../common/InitialFocus';
 import { Modal } from '../common/Modal';
 import { Paragraph } from '../common/Paragraph';
 import { View } from '../common/View';
@@ -39,15 +40,17 @@ export function ConfirmUnlinkAccount({
             <Button style={{ marginRight: 10 }} onClick={modalProps.onClose}>
               Cancel
             </Button>
-            <Button
-              type="primary"
-              onClick={() => {
-                onUnlink();
-                modalProps.onClose();
-              }}
-            >
-              Unlink
-            </Button>
+            <InitialFocus>
+              <Button
+                type="primary"
+                onClick={() => {
+                  onUnlink();
+                  modalProps.onClose();
+                }}
+              >
+                Unlink
+              </Button>
+            </InitialFocus>
           </View>
         </View>
       )}

packages/desktop-client/src/components/modals/CreateAccountModal.tsx

@@ -12,6 +12,7 @@ import { type SyncServerStatus } from '../../hooks/useSyncServerStatus';
 import { SvgDotsHorizontalTriple } from '../../icons/v1';
 import { theme } from '../../style';
 import { Button, ButtonWithLoading } from '../common/Button';
+import { InitialFocus } from '../common/InitialFocus';
 import { Link } from '../common/Link';
 import { Menu } from '../common/Menu';
 import { Modal } from '../common/Modal';
@@ -183,17 +184,19 @@ export function CreateAccountModal({
         <View style={{ maxWidth: 500, gap: 30, color: theme.pageText }}>
           {upgradingAccountId == null && (
             <View style={{ gap: 10 }}>
-              <Button
-                type="primary"
-                style={{
-                  padding: '10px 0',
-                  fontSize: 15,
-                  fontWeight: 600,
-                }}
-                onClick={onCreateLocalAccount}
-              >
-                Create local account
-              </Button>
+              <InitialFocus>
+                <Button
+                  type="primary"
+                  style={{
+                    padding: '10px 0',
+                    fontSize: 15,
+                    fontWeight: 600,
+                  }}
+                  onClick={onCreateLocalAccount}
+                >
+                  Create local account
+                </Button>
+              </InitialFocus>
               <View style={{ lineHeight: '1.4em', fontSize: 15 }}>
                 <Text>
                   <strong>Create a local account</strong> if you want to add

packages/desktop-client/src/components/modals/GoCardlessExternalMsg.tsx

@@ -214,6 +214,7 @@ export function GoCardlessExternalMsg({
         <View style={{ flexDirection: 'row', gap: 10, alignItems: 'center' }}>
           <Button
             type="primary"
+            autoFocus
             style={{
               padding: '10px 0',
               fontSize: 15,
@@ -272,6 +273,7 @@ export function GoCardlessExternalMsg({
           ) : success ? (
             <Button
               type="primary"
+              autoFocus
               style={{
                 padding: '10px 0',
                 fontSize: 15,
@@ -289,7 +291,7 @@ export function GoCardlessExternalMsg({
               <Paragraph style={{ color: theme.errorText }}>
                 GoCardless integration has not yet been configured.
               </Paragraph>
-              <Button type="primary" onClick={onGoCardlessInit}>
+              <Button type="primary" autoFocus onClick={onGoCardlessInit}>
                 Configure GoCardless integration
               </Button>
             </>

packages/desktop-client/src/components/modals/GoCardlessInitialise.tsx

@@ -5,6 +5,7 @@ import { send } from 'loot-core/src/platform/client/fetch';
 
 import { Error } from '../alerts';
 import { ButtonWithLoading } from '../common/Button';
+import { InitialFocus } from '../common/InitialFocus';
 import { Input } from '../common/Input';
 import { Link } from '../common/Link';
 import { Modal, ModalButtons } from '../common/Modal';
@@ -70,15 +71,17 @@ export const GoCardlessInitialise = ({
 
         <FormField>
           <FormLabel title="Secret ID:" htmlFor="secret-id-field" />
-          <Input
-            id="secret-id-field"
-            type="password"
-            value={secretId}
-            onChangeValue={value => {
-              setSecretId(value);
-              setIsValid(true);
-            }}
-          />
+          <InitialFocus>
+            <Input
+              id="secret-id-field"
+              type="password"
+              value={secretId}
+              onChangeValue={value => {
+                setSecretId(value);
+                setIsValid(true);
+              }}
+            />
+          </InitialFocus>
         </FormField>
 
         <FormField>

packages/desktop-client/src/components/modals/ImportTransactions.jsx

@@ -1672,6 +1672,7 @@ export function ImportTransactions({ modalProps, options }) {
         >
           <ButtonWithLoading
             type="primary"
+            autoFocus
             disabled={
               transactions?.filter(trans => !trans.isMatchedTransaction)
                 .length === 0

packages/desktop-client/src/components/modals/MergeUnusedPayees.jsx

@@ -158,6 +158,7 @@ export function MergeUnusedPayees({ modalProps, payeeIds, targetPayeeId }) {
             <ModalButtons style={{ marginTop: 20 }} focusButton>
               <Button
                 type="primary"
+                autoFocus
                 isSubmit={false}
                 style={{ marginRight: 10 }}
                 onClick={onMerge}

packages/desktop-client/src/components/modals/SimpleFinInitialise.tsx

@@ -80,6 +80,7 @@ export const SimpleFinInitialise = ({
       <ModalButtons>
         <ButtonWithLoading
           type="primary"
+          autoFocus
           loading={isLoading}
           onClick={onSubmit}
         >

packages/desktop-client/src/components/reports/SaveReportDelete.tsx

@@ -21,7 +21,7 @@ export function SaveReportDelete({
     <>
       <View style={{ align: 'center' }}>
         <Text style={{ color: theme.errorText, marginBottom: 5 }}>
-          Do you want to delete report:
+          Are you sure you want to delete report:
         </Text>
         <View>{name}</View>
       </View>
@@ -33,12 +33,10 @@ export function SaveReportDelete({
         style={{ marginTop: 15 }}
       >
         <View style={{ flex: 1 }} />
-        <Button type="primary" onClick={onDelete}>
+        <Button type="primary" autoFocus onClick={onDelete}>
           Yes
         </Button>
-        <Button type="primary" onClick={onClose}>
-          No
-        </Button>
+        <Button onClick={onClose}>No</Button>
       </Stack>
     </>
   );

packages/desktop-client/src/components/schedules/PostsOfflineNotification.jsx

@@ -69,7 +69,7 @@ export function PostsOfflineNotification({ modalProps, actions }) {
         spacing={2}
       >
         <Button onPress={actions.popModal}>Decide later</Button>
-        <Button variant="primary" onPress={onPost}>
+        <Button variant="primary" autoFocus onPress={onPost}>
           Post transactions
         </Button>
       </Stack>

packages/desktop-client/src/components/schedules/ScheduleDetails.jsx

@@ -16,6 +16,7 @@ import { theme } from '../../style';
 import { AccountAutocomplete } from '../autocomplete/AccountAutocomplete';
 import { PayeeAutocomplete } from '../autocomplete/PayeeAutocomplete';
 import { Button } from '../common/Button2';
+import { InitialFocus } from '../common/InitialFocus';
 import { Modal } from '../common/Modal';
 import { Stack } from '../common/Stack';
 import { Text } from '../common/Text';
@@ -456,15 +457,17 @@ export function ScheduleDetails({ modalProps, actions, id, transaction }) {
       <Stack direction="row" style={{ marginTop: 10 }}>
         <FormField style={{ flex: 1 }}>
           <FormLabel title="Schedule Name" htmlFor="name-field" />
-          <GenericInput
-            field="string"
-            type="string"
-            value={state.fields.name}
-            multi={false}
-            onChange={e => {
-              dispatch({ type: 'set-field', field: 'name', value: e });
-            }}
-          />
+          <InitialFocus>
+            <GenericInput
+              field="string"
+              type="string"
+              value={state.fields.name}
+              multi={false}
+              onChange={e => {
+                dispatch({ type: 'set-field', field: 'name', value: e });
+              }}
+            />
+          </InitialFocus>
         </FormField>
       </Stack>
       <Stack direction="row" style={{ marginTop: 20 }}>