From 9f80e791cba281cb5be272d5d30c00eee722d3fe Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Thu, 7 Sep 2023 22:20:30 +0800
Subject: [PATCH] Fix auto focus and tab index on login + add link forms

---
 packages/web/components/elements/CloseButton.tsx          | 1 +
 .../web/components/templates/auth/EmailForgotPassword.tsx | 1 +
 packages/web/components/templates/auth/EmailLogin.tsx     | 6 +++---
 packages/web/components/templates/auth/EmailSignup.tsx    | 1 +
 .../web/components/templates/homeFeed/AddLinkModal.tsx    | 8 ++++++--
 5 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/packages/web/components/elements/CloseButton.tsx b/packages/web/components/elements/CloseButton.tsx
index 439019de6..aaf31a852 100644
--- a/packages/web/components/elements/CloseButton.tsx
+++ b/packages/web/components/elements/CloseButton.tsx
@@ -28,6 +28,7 @@ export function CloseButton(props: CloseButtonProps): JSX.Element {
       onMouseOut={() => setHover(false)}
     >
       <Button
+        tabIndex={-1}
         css={{
           cursor: 'pointer',
           marginLeft: 'auto',
diff --git a/packages/web/components/templates/auth/EmailForgotPassword.tsx b/packages/web/components/templates/auth/EmailForgotPassword.tsx
index f4152e7bd..36a853c56 100644
--- a/packages/web/components/templates/auth/EmailForgotPassword.tsx
+++ b/packages/web/components/templates/auth/EmailForgotPassword.tsx
@@ -53,6 +53,7 @@ export function EmailForgotPassword(): JSX.Element {
               name="email"
               value={email}
               placeholder="Email"
+              autoFocus={true}
               css={{ bg: 'white', color: 'black' }}
               onChange={(e) => {
                 e.preventDefault()
diff --git a/packages/web/components/templates/auth/EmailLogin.tsx b/packages/web/components/templates/auth/EmailLogin.tsx
index 5ec6a407f..a7c31950b 100644
--- a/packages/web/components/templates/auth/EmailLogin.tsx
+++ b/packages/web/components/templates/auth/EmailLogin.tsx
@@ -14,9 +14,8 @@ export function EmailLogin(): JSX.Element {
   const router = useRouter()
   const [email, setEmail] = useState<string | undefined>(undefined)
   const [password, setPassword] = useState<string | undefined>(undefined)
-  const [errorMessage, setErrorMessage] = useState<string | undefined>(
-    undefined
-  )
+  const [errorMessage, setErrorMessage] =
+    useState<string | undefined>(undefined)
 
   useEffect(() => {
     if (!router.isReady) return
@@ -51,6 +50,7 @@ export function EmailLogin(): JSX.Element {
           <SpanBox css={{ width: '100%' }}>
             <FormLabel>Email</FormLabel>
             <BorderedFormInput
+              autoFocus={true}
               key="email"
               type="email"
               name="email"
diff --git a/packages/web/components/templates/auth/EmailSignup.tsx b/packages/web/components/templates/auth/EmailSignup.tsx
index 7913d2575..d3becc8ec 100644
--- a/packages/web/components/templates/auth/EmailSignup.tsx
+++ b/packages/web/components/templates/auth/EmailSignup.tsx
@@ -69,6 +69,7 @@ export function EmailSignup(): JSX.Element {
           <SpanBox css={{ width: '100%' }}>
             <FormLabel className="required">Email</FormLabel>
             <BorderedFormInput
+              autoFocus={true}
               key="email"
               type="email"
               name="email"
diff --git a/packages/web/components/templates/homeFeed/AddLinkModal.tsx b/packages/web/components/templates/homeFeed/AddLinkModal.tsx
index bb50485c9..34b51eb08 100644
--- a/packages/web/components/templates/homeFeed/AddLinkModal.tsx
+++ b/packages/web/components/templates/homeFeed/AddLinkModal.tsx
@@ -16,7 +16,11 @@ import {
 
 type AddLinkModalProps = {
   onOpenChange: (open: boolean) => void
-  handleLinkSubmission: (link: string, timezone: string, locale:string) => Promise<void>,
+  handleLinkSubmission: (
+    link: string,
+    timezone: string,
+    locale: string
+  ) => Promise<void>
 }
 
 export function AddLinkModal(props: AddLinkModalProps): JSX.Element {
@@ -73,7 +77,7 @@ export function AddLinkModal(props: AddLinkModalProps): JSX.Element {
               <FormInput
                 type="url"
                 value={link}
-                autoFocus
+                autoFocus={true}
                 placeholder="https://example.com"
                 onChange={(event) => setLink(event.target.value)}
                 css={{