refactor: enhance accessibility and structure of login and signup pages

- Removed deprecated admin route from a11y_routes.json.
- Updated LoginPage to include aria-labelledby for better accessibility.
- Added a test for naming the login form region in LoginPage accessibility tests.
- Refactored SignUpPage to improve link structure and accessibility.
- Introduced mobile viewport tests for login and signup pages in a11y tests.

Author: deon-sanchez

scripts/a11y/a11y_routes.json

@@ -124,11 +124,6 @@
     }
   ],
   "gated": [
-    {
-      "path": "/admin",
-      "surface": "Admin page",
-      "currentBehavior": "Redirects to /flows for current user/session. Scan with an admin user."
-    },
     {
       "path": "/login",
       "surface": "Login page",

src/frontend/src/pages/LoginPage/__tests__/LoginPage.a11y.test.tsx

@@ -137,6 +137,14 @@ describe("LoginPage accessibility", () => {
     ).toBeInTheDocument();
   });
 
+  it("names_the_login_form_region", () => {
+    renderLoginPage();
+
+    expect(
+      screen.getByRole("region", { name: /sign in to langflow/i }),
+    ).toBeInTheDocument();
+  });
+
   it("adds_actionable_suggestion_to_server_login_errors", () => {
     mockLoginMutate.mockImplementation((_user, options) => {
       options.onError({

src/frontend/src/pages/LoginPage/index.tsx

@@ -122,7 +122,13 @@ export default function LoginPage(): JSX.Element {
               <CustomLoginBrandTitle />
             </h1>
           </div>
-          <section className="w-full rounded-xl border border-border bg-card p-8 shadow-2xl shadow-black/10 dark:shadow-black/40 sm:p-10">
+          <section
+            aria-labelledby="login-form-title"
+            className="w-full rounded-xl border border-border bg-card p-8 shadow-2xl shadow-black/10 dark:shadow-black/40 sm:p-10"
+          >
+            <h2 id="login-form-title" className="sr-only">
+              {t("auth.loginTitle")}
+            </h2>
             <div className="flex flex-col gap-5">
               <CustomLoginFormGate>
                 <Form.Field name="username" className="pb-3">

src/frontend/src/pages/SignUpPage/__tests__/SignUpPage.a11y.test.tsx

@@ -102,6 +102,16 @@ describe("SignUpPage accessibility", () => {
     ).toBeInTheDocument();
   });
 
+  it("renders_sign_in_navigation_as_one_link", () => {
+    renderSignUpPage();
+
+    const signInLink = screen.getByRole("link", {
+      name: /already have an account.*sign in/i,
+    });
+    expect(signInLink).toHaveAttribute("href", "/login");
+    expect(signInLink.querySelector("button")).not.toBeInTheDocument();
+  });
+
   it("announces_actionable_password_mismatch_suggestion_after_confirm_blur", () => {
     const { container } = renderSignUpPage();
 

src/frontend/src/pages/SignUpPage/index.tsx

@@ -309,23 +309,23 @@ export default function SignUp(): JSX.Element {
                 </Button>
               </Form.Submit>
 
-              <CustomLink className="block w-full" to="/login">
-                <ShadTooltip
-                  content={`${t("auth.haveAccount")} ${t("auth.signInLink")}`}
-                  styleClasses="z-50"
+              <ShadTooltip
+                content={`${t("auth.haveAccount")} ${t("auth.signInLink")}`}
+                styleClasses="z-50"
+              >
+                <Button
+                  asChild
+                  className="h-11 w-full overflow-hidden rounded-lg"
+                  variant="outline"
                 >
-                  <Button
-                    className="h-11 w-full overflow-hidden rounded-lg"
-                    variant="outline"
-                    type="button"
-                  >
+                  <CustomLink to="/login">
                     <span className="truncate">
                       {t("auth.haveAccount")}&nbsp;
                       <b>{t("auth.signInLink")}</b>
                     </span>
-                  </Button>
-                </ShadTooltip>
-              </CustomLink>
+                  </CustomLink>
+                </Button>
+              </ShadTooltip>
             </div>
           </section>
         </div>

src/frontend/tests/a11y/auth-pages.a11y.spec.ts

@@ -74,6 +74,20 @@ async function driveLoginEmpty(page: LangflowPage) {
   await expect(page.getByRole("button", { name: /sign in/i })).toBeVisible();
 }
 
+async function expectPageToReflow(page: LangflowPage) {
+  const dimensions = await page.evaluate(() => ({
+    clientWidth: document.documentElement.clientWidth,
+    scrollWidth: document.documentElement.scrollWidth,
+  }));
+  expect(dimensions.scrollWidth).toBeLessThanOrEqual(dimensions.clientWidth);
+}
+
+async function driveLoginMobile(page: LangflowPage) {
+  await page.setViewportSize({ width: 320, height: 800 });
+  await driveLoginEmpty(page);
+  await expectPageToReflow(page);
+}
+
 async function driveLoginValidation(page: LangflowPage) {
   await disableAutoLogin(page);
   await page.goto("/login");
@@ -107,6 +121,12 @@ async function driveSignupEmpty(page: LangflowPage) {
   await expect(page.getByRole("button", { name: /sign up/i })).toBeVisible();
 }
 
+async function driveSignupMobile(page: LangflowPage) {
+  await page.setViewportSize({ width: 320, height: 800 });
+  await driveSignupEmpty(page);
+  await expectPageToReflow(page);
+}
+
 async function driveSignupMismatch(page: LangflowPage) {
   await disableAutoLogin(page);
   await page.goto("/signup");
@@ -163,9 +183,11 @@ const AUTH_STATES: Array<{
   drive: (page: LangflowPage) => Promise<void>;
 }> = [
   { label: "auth-login-empty", drive: driveLoginEmpty },
+  { label: "auth-login-mobile", drive: driveLoginMobile },
   { label: "auth-login-validation", drive: driveLoginValidation },
   { label: "auth-login-error-toast", drive: driveLoginErrorToast },
   { label: "auth-signup-empty", drive: driveSignupEmpty },
+  { label: "auth-signup-mobile", drive: driveSignupMobile },
   { label: "auth-signup-mismatch", drive: driveSignupMismatch },
   { label: "auth-signup-error-toast", drive: driveSignupErrorToast },
   { label: "auth-admin-login-empty", drive: driveAdminLoginEmpty },
@@ -192,7 +214,7 @@ test.describe("auth page accessibility", () => {
     for (const state of AUTH_STATES) {
       test(
         `scans ${state.label} (${theme.name})`,
-        { tag: ["@release"] },
+        { tag: ["@release", "@workspace"] },
         async ({ page }) => {
           await theme.force(page);
           await state.drive(page);