From 2fd9a3f004326b31f5eff33cf2f3e6d0e470f635 Mon Sep 17 00:00:00 2001
From: jacobshandling <61553566+jacobshandling@users.noreply.github.com>
Date: Fri, 5 Dec 2025 08:53:31 -0800
Subject: [PATCH] Improve login form tabbing (#36736)

**Related issue:** Resolves #36735

Fixed the order of tabbing on the log in page while maintaining update
styling:

![ezgif-2a83bf92c68732c0](https://github.com/user-attachments/assets/f4a6b3ea-0e03-42c4-83da-407bf24eee8b)

- [x] Changes file added for user-visible changes in `changes/`
- [x] QA'd all new/changed functionality manually
---
 changes/36735-improved-login-form-tabbability |  1 +
 .../components/forms/LoginForm/LoginForm.tsx  | 32 +++++++++----------
 .../components/forms/LoginForm/_styles.scss   | 20 +++++++-----
 3 files changed, 29 insertions(+), 24 deletions(-)
 create mode 100644 changes/36735-improved-login-form-tabbability

diff --git a/changes/36735-improved-login-form-tabbability b/changes/36735-improved-login-form-tabbability
new file mode 100644
index 0000000000..8453913ef6
--- /dev/null
+++ b/changes/36735-improved-login-form-tabbability
@@ -0,0 +1 @@
+- Fixed the tab order of elements in the login form
\ No newline at end of file
diff --git a/frontend/components/forms/LoginForm/LoginForm.tsx b/frontend/components/forms/LoginForm/LoginForm.tsx
index 611cd5675a..957f8fd7ee 100644
--- a/frontend/components/forms/LoginForm/LoginForm.tsx
+++ b/frontend/components/forms/LoginForm/LoginForm.tsx
@@ -175,24 +175,24 @@ const LoginForm = ({
           value={formData.password}
           onChange={onInputChange("password")}
         />
-        <div className={`${baseClass}__forgot-link`}>
-          <CustomLink
-            className={`${baseClass}__forgot-link`}
-            url={paths.FORGOT_PASSWORD}
-            text="Forgot password?"
-          />
-        </div>
       </div>
       {/* Actions displayed using CSS column-reverse to preserve tab order */}
-      <div className={`${baseClass}__login-actions`}>
-        <Button
-          className={`${baseClass}__login-btn`}
-          isLoading={isSubmitting}
-          type="submit"
-        >
-          Log in
-        </Button>
-        {ssoEnabled && renderSingleSignOnButton()}
+      <div className={`${baseClass}__actions`}>
+        <div className={`${baseClass}__login-actions`}>
+          <Button
+            className={`${baseClass}__login-btn`}
+            isLoading={isSubmitting}
+            type="submit"
+          >
+            Log in
+          </Button>
+          {ssoEnabled && renderSingleSignOnButton()}
+        </div>
+        <CustomLink
+          className={`${baseClass}__forgot-link`}
+          url={paths.FORGOT_PASSWORD}
+          text="Forgot password?"
+        />
       </div>
     </form>
   );
diff --git a/frontend/components/forms/LoginForm/_styles.scss b/frontend/components/forms/LoginForm/_styles.scss
index c47c18851a..c40f96234e 100644
--- a/frontend/components/forms/LoginForm/_styles.scss
+++ b/frontend/components/forms/LoginForm/_styles.scss
@@ -17,7 +17,7 @@
     vertical-align: middle;
   }
 
-  &__login-actions,
+  &__actions,
   &__form {
     display: flex;
     flex-direction: column;
@@ -26,20 +26,24 @@
 
   // Login button styles
   // Login and SSO button widths will always be equal
-  // Min of 208px with login-button widening if SSO button is wider
-  &__login-actions {
-    max-width: min-content;
+  &__actions {
     align-items: center;
     align-self: center;
+    flex-direction: column-reverse;
   }
 
-  &__login-btn {
-    min-width: 100%;
+  &__login-actions {
+    display: flex;
+    flex-direction: column;
+    gap: $gap-form;
+    width: px-to-rem(228);
+  }
+
+  &__forgot-link {
+    align-self: flex-start;
   }
 
   &__sso-btn.button {
-    min-width: 208px; // Must override form's .button specificity
-    width: max-content;
     border: 1px solid $core-fleet-black;
     white-space: nowrap;
   }