edewit · Nov 9, 2026 · Nov 6, 2026
@@ -21,6 +21,7 @@ edit=Edit
 otp-display-name=Authenticator application
 selectALocale=Select a locale
 signOut=Sign out
+options=Options
 linkedEmpty=No linked providers
 directMembership=Direct membership
 accept=Accept

@@ -27,6 +27,17 @@ test.describe("Mobile nav", () => {
     await expect(page.getByTestId("password/credential-list")).toBeVisible();
   });
 
+  test("names the masthead options toggle", async ({ page }) => {
+    await using testBed = await createTestBed();
+
+    await page.setViewportSize(MOBILE_VIEWPORT);
+    await login(page, testBed.realm);
+
+    await expect(page.getByTestId("options-kebab-toggle")).toHaveAccessibleName(
+      "Options",
+    );
+  });
+
   test("leaves the persistent nav open on desktop viewports", async ({
     page,
   }) => {

@@ -1672,6 +1672,7 @@ authData=Authorization data
 realmInfo=Realm info
 chooseAPolicyType=Choose a policy type
 signOut=Sign out
+options=Options
 deleteExecutorError=Could not delete executor\: {{error}}
 userProfileError=Could not update user profile settings\: {{error}}
 validatorDialogColNames.colName=Role name

@@ -106,6 +106,12 @@ test.describe.serial("Masthead tests", () => {
       await assertIsMobileView(page);
     });
 
+    test("Mobile menu toggle has an accessible name", async ({ page }) => {
+      await expect(
+        page.getByTestId("options-kebab-toggle"),
+      ).toHaveAccessibleName("Options");
+    });
+
     test("Enable/disable help mode in mobile view", async ({ page }) => {
       await assertIsMobileView(page);
       await toggleUsernameDropdown(page);

@@ -11,12 +11,14 @@ type KeycloakDropdownProps = Omit<DropdownProps, "toggle"> & {
   "data-testid"?: string;
   isKebab?: boolean;
   title?: ReactNode;
+  toggleLabel?: string;
   dropDownItems: ReactNode[];
 };
 
 export const KeycloakDropdown = ({
   isKebab = false,
   title,
+  toggleLabel,
   dropDownItems,
   ...rest
 }: KeycloakDropdownProps) => {
@@ -32,6 +34,7 @@ export const KeycloakDropdown = ({
       toggle={(ref) => (
         <MenuToggle
           data-testid={`${rest["data-testid"]}-toggle`}
+          aria-label={toggleLabel}
           ref={ref}
            => setOpen(!open)}
           isExpanded={open}

@@ -141,6 +141,7 @@ const KeycloakMasthead = ({
               <KeycloakDropdown
                 data-testid="options-kebab"
                 isKebab
+                toggleLabel={t("options")}
                 dropDownItems={[
                   ...(kebabDropdownItems || dropdownItems),
                   extraItems,