From dc6c1383e43bbbf4408b5cf2f6daec678e5e5c7e Mon Sep 17 00:00:00 2001
From: RachelElysia <71795832+RachelElysia@users.noreply.github.com>
Date: Wed, 16 Oct 2024 11:24:27 -0400
Subject: [PATCH] Fleet UI: Update login tab order (#22930)

---
 .../components/forms/LoginForm/LoginForm.tsx  | 27 +++++++++++--------
 .../components/forms/LoginForm/_styles.scss   | 13 +++++++++
 2 files changed, 29 insertions(+), 11 deletions(-)

diff --git a/frontend/components/forms/LoginForm/LoginForm.tsx b/frontend/components/forms/LoginForm/LoginForm.tsx
index 11073bf0f5..6d2cab8d90 100644
--- a/frontend/components/forms/LoginForm/LoginForm.tsx
+++ b/frontend/components/forms/LoginForm/LoginForm.tsx
@@ -141,18 +141,23 @@ const LoginForm = ({
         value={formData.password}
         onChange={onInputChange("password")}
       />
-      <div className={`${baseClass}__forgot-wrap`}>
-        <Link
-          className={`${baseClass}__forgot-link`}
-          to={paths.FORGOT_PASSWORD}
-        >
-          Forgot password?
-        </Link>
+      {/* Actions displayed using CSS column-reverse to preserve tab order */}
+      <div className={`${baseClass}__actions`}>
+        <div className={`${baseClass}__login-actions`}>
+          <Button className={`login-btn button button--brand`} type="submit">
+            Login
+          </Button>
+          {ssoEnabled && renderSingleSignOnButton()}
+        </div>
+        <div className={`${baseClass}__forgot-wrap`}>
+          <Link
+            className={`${baseClass}__forgot-link`}
+            to={paths.FORGOT_PASSWORD}
+          >
+            Forgot password?
+          </Link>
+        </div>
       </div>
-      <Button className={`login-btn button button--brand`} type="submit">
-        Login
-      </Button>
-      {ssoEnabled && renderSingleSignOnButton()}
     </form>
   );
 };
diff --git a/frontend/components/forms/LoginForm/_styles.scss b/frontend/components/forms/LoginForm/_styles.scss
index 5c3c8cc8d3..bc6f9da1e6 100644
--- a/frontend/components/forms/LoginForm/_styles.scss
+++ b/frontend/components/forms/LoginForm/_styles.scss
@@ -39,4 +39,17 @@
   &__sso-legend {
     vertical-align: middle;
   }
+
+  &__actions {
+    display: flex;
+    flex-direction: column-reverse;
+    gap: $pad-large;
+  }
+
+  &__login-actions {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: $pad-large;
+  }
 }