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")} /> -
- -
{/* Actions displayed using CSS column-reverse to preserve tab order */} -
- - {ssoEnabled && renderSingleSignOnButton()} +
+
+ + {ssoEnabled && renderSingleSignOnButton()} +
+
); 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; }