fix(a11y): name collapsed sidebar controls and credential fields

Collapsed sidebar buttons carried no accessible name, so screen readers
announced them as unlabelled. Access Key inputs now declare their
autocomplete intent instead of letting password managers guess.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Author: Vonng

web-app/src/screens/Console/Account/AddServiceAccountScreen.tsx

@@ -179,6 +179,7 @@ const AddServiceAccount = () => {
                 label={"Access Key"}
                 id={"accessKey"}
                 name={"accessKey"}
+                autoComplete="section-service-account username"
                 placeholder={"Enter Access Key"}
                 onChange={(e) => {
                   setAccessKey(e.target.value);
@@ -191,6 +192,7 @@ const AddServiceAccount = () => {
                 id={"secretKey"}
                 name={"secretKey"}
                 type={"password"}
+                autoComplete="section-service-account new-password"
                 placeholder={"Enter Secret Key"}
                 onChange={(e) => {
                   setSecretKey(e.target.value);

web-app/src/screens/Console/Menu/MenuWrapper.tsx

@@ -14,7 +14,7 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-import React from "react";
+import React, { useLayoutEffect } from "react";
 import { useSelector } from "react-redux";
 import {
   Box,
@@ -45,6 +45,33 @@ const MenuWrapper = () => {
 
   const allowedMenuItems = validRoutes(features);
 
+  useLayoutEffect(() => {
+    const menuToggle = document.querySelector<HTMLElement>(
+      ".menuBox .menuHeaderContainer",
+    );
+    if (!menuToggle) {
+      return;
+    }
+
+    const toggleLabel = sidebarOpen ? "Collapse menu" : "Expand menu";
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        menuToggle.click();
+      }
+    };
+
+    menuToggle.setAttribute("role", "button");
+    menuToggle.setAttribute("tabindex", "0");
+    menuToggle.setAttribute("aria-label", toggleLabel);
+    menuToggle.setAttribute("aria-expanded", String(sidebarOpen));
+    menuToggle.addEventListener("keydown", handleKeyDown);
+
+    return () => {
+      menuToggle.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [sidebarOpen]);
+
   return (
     <Menu
       isOpen={sidebarOpen}
@@ -65,6 +92,10 @@ const MenuWrapper = () => {
         "& .menuHeaderContainer": {
           position: "relative",
         },
+        "& .menuHeaderContainer:focus-visible": {
+          outline: "2px solid rgba(88, 141, 192, 0.85)",
+          outlineOffset: -2,
+        },
         "& .menuLogoContainer > svg": {
           display: "block",
           visibility: "hidden",
@@ -125,6 +156,19 @@ const MenuWrapper = () => {
           transform: "translateX(-10px)",
           transition: "opacity 0.08s ease, transform 0.12s ease",
         },
+        "&.collapsed .labelContainer": {
+          display: "block",
+          position: "absolute",
+          width: 1,
+          height: 1,
+          padding: 0,
+          margin: -1,
+          overflow: "hidden",
+          clip: "rect(0, 0, 0, 0)",
+          clipPath: "inset(50%)",
+          whiteSpace: "nowrap",
+          border: 0,
+        },
       }}
       callPathAction={(path) => {
         navigate(path);

web-app/src/screens/Console/Users/AddUserServiceAccountScreen.tsx

@@ -191,6 +191,7 @@ const AddServiceAccount = () => {
                 label={"Access Key"}
                 id={"accessKey"}
                 name={"accessKey"}
+                autoComplete="section-service-account username"
                 placeholder={"Enter Access Key"}
                 onChange={(e) => {
                   setAccessKey(e.target.value);
@@ -203,6 +204,7 @@ const AddServiceAccount = () => {
                 id={"secretKey"}
                 name={"secretKey"}
                 type={"password"}
+                autoComplete="section-service-account new-password"
                 placeholder={"Enter Secret Key"}
                 onChange={(e) => {
                   setSecretKey(e.target.value);

web-app/tests/permissions-3/admin.ts

@@ -16,6 +16,7 @@
 
 import * as roles from "../utils/roles";
 import * as elements from "../utils/elements-menu";
+import { Selector } from "testcafe";
 import {
   bucketsElement,
   dashboardElement,
@@ -74,3 +75,22 @@ test("All sidebar items exist", async (t) => {
     .expect(licenseExists)
     .ok();
 });
+
+test("Create Access Key forms identify new credentials", async (t) => {
+  const accessKeyInput = Selector("#accessKey");
+  const secretKeyInput = Selector("#secretKey");
+
+  for (const path of [
+    "/access-keys/new-account",
+    "/identity/users/new-user-sa/minioadmin",
+  ]) {
+    await t
+      .navigateTo(`http://localhost:9090${path}`)
+      .expect(accessKeyInput.getAttribute("autocomplete"))
+      .eql("section-service-account username")
+      .expect(secretKeyInput.getAttribute("autocomplete"))
+      .eql("section-service-account new-password")
+      .expect(secretKeyInput.getAttribute("type"))
+      .eql("password");
+  }
+});

web-app/tests/permissions-3/menuAccessibility.ts

@@ -0,0 +1,105 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2026 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+import { ClientFunction, Selector } from "testcafe";
+import * as roles from "../utils/roles";
+
+const menu = Selector(".menuBox");
+const menuToggle = Selector(".menuBox .menuHeaderContainer");
+
+const unnamedMenuControls = ClientFunction(() =>
+  Array.from(
+    document.querySelectorAll<HTMLElement>(
+      '.menuBox button, .menuBox a, .menuBox [role="button"]',
+    ),
+  )
+    .filter((control) => {
+      const style = window.getComputedStyle(control);
+      return style.display !== "none" && style.visibility !== "hidden";
+    })
+    .filter((control) => {
+      if (
+        control.getAttribute("aria-label")?.trim() ||
+        control.getAttribute("aria-labelledby")?.trim()
+      ) {
+        return false;
+      }
+
+      return !control.innerText.trim();
+    })
+    .map((control) => control.id || control.className),
+);
+
+const blurFocusedElement = ClientFunction(() => {
+  (document.activeElement as HTMLElement | null)?.blur();
+});
+
+const focusedOutlineStyle = ClientFunction(
+  () => window.getComputedStyle(document.activeElement!).outlineStyle,
+);
+const focusedElementClass = ClientFunction(
+  () => (document.activeElement as HTMLElement | null)?.className,
+);
+const focusedElementId = ClientFunction(
+  () => (document.activeElement as HTMLElement | null)?.id,
+);
+
+fixture("Sidebar accessibility")
+  .page("http://localhost:9090")
+  .beforeEach(async (t) => {
+    await t.useRole(roles.admin).resizeWindow(1280, 800);
+    if (await menu.hasClass("collapsed")) {
+      await t.click(menuToggle);
+    }
+  })
+  .afterEach(async (t) => {
+    await t.resizeWindow(1280, 800);
+  });
+
+test("navigation controls remain named when the sidebar collapses", async (t) => {
+  await t
+    .expect(menu.hasClass("collapsed"))
+    .notOk()
+    .expect(menuToggle.getAttribute("aria-label"))
+    .eql("Collapse menu")
+    .expect(menuToggle.getAttribute("aria-expanded"))
+    .eql("true")
+    .expect(unnamedMenuControls())
+    .eql([]);
+
+  await blurFocusedElement();
+  await t
+    .pressKey("tab")
+    .expect(focusedElementClass())
+    .contains("menuHeaderContainer")
+    .expect(focusedOutlineStyle())
+    .notEql("none")
+    .pressKey("tab")
+    .expect(focusedElementId())
+    .eql("menu-create-bucket")
+    .pressKey("shift+tab")
+    .pressKey("enter")
+    .expect(menu.hasClass("collapsed"))
+    .ok()
+    .expect(menuToggle.getAttribute("aria-label"))
+    .eql("Expand menu")
+    .expect(menuToggle.getAttribute("aria-expanded"))
+    .eql("false")
+    .expect(unnamedMenuControls())
+    .eql([]);
+
+  await t
+    .pressKey("space")
+    .expect(menu.hasClass("collapsed"))
+    .notOk()
+    .resizeWindow(390, 844)
+    .expect(menu.hasClass("collapsed"))
+    .ok("Sidebar should collapse at the mobile breakpoint", { timeout: 2000 })
+    .expect(unnamedMenuControls())
+    .eql([]);
+});