Fix auto focus and tab index on login + add link forms

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',

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()

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"

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"

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={{