fix(a11y): fix aria-allowed-attr, invalid sidebar list structure, and session filter label mismatch on flow editor

Author: Olayinka Adelakun

src/frontend/src/components/core/appHeaderComponent/components/FlowMenu/__tests__/FlowMenu.spec.tsx

@@ -42,7 +42,7 @@ jest.mock("@/customization/hooks/use-custom-navigate", () => ({
 }));
 jest.mock("@/stores/flowsManagerStore", () => ({
   __esModule: true,
-  default: (sel) =>
+  default: (sel: (s: object) => unknown) =>
     sel({
       autoSaving: false,
       saveLoading: false,
@@ -51,11 +51,12 @@ jest.mock("@/stores/flowsManagerStore", () => ({
 }));
 jest.mock("@/stores/alertStore", () => ({
   __esModule: true,
-  default: (sel) => sel({ setSuccessData: jest.fn() }),
+  default: (sel: (s: object) => unknown) =>
+    sel({ setSuccessData: jest.fn() }),
 }));
 jest.mock("@/stores/flowStore", () => ({
   __esModule: true,
-  default: (sel) =>
+  default: jest.fn((sel: (s: object) => unknown) =>
     sel({
       onFlowPage: true,
       isBuilding: false,
@@ -68,19 +69,44 @@ jest.mock("@/stores/flowStore", () => ({
         locked: false,
       },
     }),
+  ),
 }));
 jest.mock("@/stores/shortcuts", () => ({
   __esModule: true,
-  useShortcutsStore: (sel) => sel({ changesSave: "mod+s" }),
+  useShortcutsStore: (sel: (s: object) => unknown) =>
+    sel({ changesSave: "mod+s" }),
 }));
 
 // Avoid pulling utils that depend on darkStore
 jest.mock("@/utils/utils", () => ({
   __esModule: true,
-  cn: (...args) => args.filter(Boolean).join(" "),
+  cn: (...args: unknown[]) => (args.filter(Boolean) as string[]).join(" "),
   getNumberFromString: () => 0,
 }));
 
+jest.mock("@/components/ui/popover", () => ({
+  Popover: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+  PopoverAnchor: ({ children }: { children: React.ReactNode }) => (
+    <>{children}</>
+  ),
+  PopoverTrigger: ({ children }: { children: React.ReactNode }) => (
+    <>{children}</>
+  ),
+  PopoverContent: ({
+    children,
+    "aria-label": ariaLabel,
+  }: {
+    children: React.ReactNode;
+    "aria-label"?: string;
+  }) => (
+    <div data-testid="popover-content" aria-label={ariaLabel}>
+      {children}
+    </div>
+  ),
+}));
+
+import React from "react";
+
 // styleUtils imports lucide dynamic icons; stub to avoid resolution
 jest.mock("lucide-react/dynamicIconImports", () => ({}), { virtual: true });
 
@@ -101,4 +127,64 @@ describe("FlowMenu MenuBar", () => {
     fireEvent.click(screen.getByTestId("save-flow-button"));
     expect(mockSave).toHaveBeenCalled();
   });
+
+  describe("Accessibility — aria labels", () => {
+    const flowStoreMock = jest.requireMock("@/stores/flowStore");
+
+    afterEach(() => {
+      flowStoreMock.default.mockReset();
+      flowStoreMock.default.mockImplementation((sel: (s: object) => unknown) =>
+        sel({
+          onFlowPage: true,
+          isBuilding: false,
+          currentFlow: {
+            id: "1",
+            name: "Flow",
+            folder_id: "f1",
+            icon: "Workflow",
+            gradient: "0",
+            locked: false,
+          },
+        }),
+      );
+    });
+
+    it("menu_bar_display is a button element for keyboard and screen reader access", () => {
+      render(<MenuBar />);
+      const trigger = screen.getByTestId("menu_bar_display");
+      expect(trigger.tagName).toBe("BUTTON");
+    });
+
+    it("menu_bar_display button has aria-label matching the flow name", () => {
+      render(<MenuBar />);
+      const trigger = screen.getByTestId("menu_bar_display");
+      expect(trigger).toHaveAttribute("aria-label", "Flow");
+    });
+
+    it("menu_bar_display aria-label falls back to untitled flow when name is absent", () => {
+      flowStoreMock.default.mockImplementation((sel: (s: object) => unknown) =>
+        sel({
+          onFlowPage: true,
+          isBuilding: false,
+          currentFlow: {
+            id: "1",
+            name: undefined,
+            folder_id: "f1",
+            icon: "Workflow",
+            gradient: "0",
+            locked: false,
+          },
+        }),
+      );
+      render(<MenuBar />);
+      const trigger = screen.getByTestId("menu_bar_display");
+      expect(trigger).toHaveAttribute("aria-label", "Untitled Flow");
+    });
+
+    it("popover content has an aria-label of 'Flow settings' for screen readers", () => {
+      render(<MenuBar />);
+      const content = screen.getByTestId("popover-content");
+      expect(content).toHaveAttribute("aria-label", "Flow settings");
+    });
+  });
 });

src/frontend/src/components/core/appHeaderComponent/components/FlowMenu/index.tsx

@@ -130,9 +130,11 @@ export const MenuBar = memo((): JSX.Element => {
             />
           </div>
           <PopoverTrigger asChild>
-            <div
+            <button
+              type="button"
               className="group relative -mr-5 flex shrink-0 cursor-pointer items-center gap-2 text-sm sm:whitespace-normal"
               data-testid="menu_bar_display"
+              aria-label={currentFlowName || t("flow.untitledFlow")}
             >
               <span
                 ref={measureRef}
@@ -150,7 +152,7 @@ export const MenuBar = memo((): JSX.Element => {
                     "sm:group-hover:translate-x-0 sm:group-hover:opacity-100",
                 )}
               />
-            </div>
+            </button>
           </PopoverTrigger>
           <div className={"ml-5 hidden shrink-0 items-center sm:flex"}>
             {!autoSaving && (
@@ -195,6 +197,7 @@ export const MenuBar = memo((): JSX.Element => {
         className="flex w-96 flex-col gap-4 p-4"
         align="center"
         sideOffset={15}
+        aria-label={t("flow.flowSettings")}
       >
         <FlowSettingsComponent
           close={() => setOpenSettings(false)}

src/frontend/src/locales/en.json

@@ -58,6 +58,7 @@
   "stepper.nextStep": "Next Step",
   "stepper.back": "Back",
   "stepper.needHelp": "Need Help?",
+  "flow.flowSettings": "Flow settings",
   "flow.menu.editDetails": "Edit details",
   "flow.menu.export": "Export",
   "flow.menu.duplicate": "Duplicate",

src/frontend/src/pages/FlowPage/components/MemoriesMainContent/components/MemoryDetails.tsx

@@ -106,7 +106,7 @@ export function MemoryDetails({
                 />
               </button>
             </PopoverTrigger>
-            <PopoverContent align="start" className="w-72 p-4">
+            <PopoverContent align="start" className="w-72 p-4" aria-label={t("memory.configLabel")}>
               <div className="flex flex-col gap-3 text-xs">
                 <div className="flex flex-col gap-0.5">
                   <span className="font-medium text-muted-foreground">

src/frontend/src/pages/FlowPage/components/MemoriesMainContent/components/MemoryDetailsHeader.tsx

@@ -120,8 +120,8 @@ export function MemoryDetailsHeader({
                 <Button
                   variant="outline"
                   size="sm"
-                  aria-label={t("memory.sessionFilter")}
                   className="w-[180px] justify-between rounded-[10px] px-3"
+                  data-testid="session-filter-button"
                 >
                   <span className="truncate">
                     {sessionLabel.length > 20

src/frontend/src/pages/FlowPage/components/MemoriesMainContent/components/__tests__/MemoryDetails.test.tsx

@@ -48,8 +48,16 @@ jest.mock("@/components/ui/popover", () => ({
       {children}
     </div>
   ),
-  PopoverContent: ({ children }: { children: React.ReactNode }) => (
-    <div data-testid="popover-content">{children}</div>
+  PopoverContent: ({
+    children,
+    "aria-label": ariaLabel,
+  }: {
+    children: React.ReactNode;
+    "aria-label"?: string;
+  }) => (
+    <div data-testid="popover-content" aria-label={ariaLabel}>
+      {children}
+    </div>
   ),
 }));
 
@@ -264,6 +272,12 @@ describe("MemoryDetails — Config popover", () => {
     const chevron = screen.getByTestId("icon-ChevronDown");
     expect(chevron.className).not.toContain("rotate-180");
   });
+
+  it("popover content has aria-label 'Config' so screen readers can name the panel", () => {
+    render(<MemoryDetails {...baseProps} />);
+    const content = screen.getByTestId("popover-content");
+    expect(content).toHaveAttribute("aria-label", "Config");
+  });
 });
 
 describe("MemoryDetails — stat cards session filtering", () => {

src/frontend/src/pages/FlowPage/components/MemoriesMainContent/components/__tests__/MemoryDetailsHeader.test.tsx

@@ -190,9 +190,7 @@ describe("MemoryDetailsHeader", () => {
     const props = makeProps({ sessions: ["session-1", "session-2"] });
     render(<MemoryDetailsHeader {...props} />);
 
-    const sessionTrigger = screen.getByRole("button", {
-      name: "Session filter",
-    });
+    const sessionTrigger = screen.getByTestId("session-filter-button");
     expect(sessionTrigger).toBeInTheDocument();
     expect(sessionTrigger).not.toBeDisabled();
   });
@@ -203,9 +201,7 @@ describe("MemoryDetailsHeader", () => {
       hasNextSessionsPage: false,
     });
     render(<MemoryDetailsHeader {...props} />);
-    expect(
-      screen.getByRole("button", { name: "Session filter" }),
-    ).not.toBeDisabled();
+    expect(screen.getByTestId("session-filter-button")).not.toBeDisabled();
   });
 
   it("renders the reload button with correct aria-label", () => {
@@ -468,7 +464,7 @@ describe("MemoryDetailsHeader", () => {
       render(<MemoryDetailsHeader {...props} />);
 
       expect(
-        screen.getByRole("button", { name: "Session filter" }),
+        screen.getByTestId("session-filter-button"),
       ).toHaveTextContent("All Sessions");
     });
 
@@ -477,7 +473,7 @@ describe("MemoryDetailsHeader", () => {
       render(<MemoryDetailsHeader {...props} />);
 
       expect(
-        screen.getByRole("button", { name: "Session filter" }),
+        screen.getByTestId("session-filter-button"),
       ).toHaveTextContent("All Sessions");
     });
 
@@ -486,7 +482,7 @@ describe("MemoryDetailsHeader", () => {
       render(<MemoryDetailsHeader {...props} />);
 
       expect(
-        screen.getByRole("button", { name: "Session filter" }),
+        screen.getByTestId("session-filter-button"),
       ).toHaveTextContent("session-1");
     });
 
@@ -557,7 +553,7 @@ describe("MemoryDetailsHeader", () => {
       });
       render(<MemoryDetailsHeader {...props} />);
 
-      const btn = screen.getByRole("button", { name: "Session filter" });
+      const btn = screen.getByTestId("session-filter-button");
       expect(btn).toHaveTextContent(`${longId.slice(0, 20)}...`);
     });
   });

src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/__tests__/sidebarSegmentedNav.test.tsx

@@ -355,6 +355,46 @@ describe("SidebarSegmentedNav", () => {
     expect(mockUseSidebar.setActiveSection).toHaveBeenCalledWith("mcp");
   });
 
+  it("renders a separator element before the memories nav item", () => {
+    const { container } = render(<SidebarSegmentedNav />);
+    // The separator is a <li role="separator" aria-hidden="true"> injected before memories
+    const separator = container.querySelector('li[role="separator"]');
+    expect(separator).toBeInTheDocument();
+    expect(separator).toHaveAttribute("aria-hidden", "true");
+  });
+
+  it("separator renders only once", () => {
+    const { container } = render(<SidebarSegmentedNav />);
+    const separators = container.querySelectorAll('li[role="separator"]');
+    expect(separators).toHaveLength(1);
+  });
+
+  it("separator appears between versions and memories in the DOM order", () => {
+    const { container } = render(<SidebarSegmentedNav />);
+    const menuItems = container.querySelectorAll(
+      '[data-testid="sidebar-menu-item"], li[role="separator"]',
+    );
+    const nodes = Array.from(menuItems);
+    const separatorIndex = nodes.findIndex(
+      (n) => n.getAttribute("role") === "separator",
+    );
+    const memoriesButton = container.querySelector('[data-testid="sidebar-nav-memories"]');
+    const memoriesItem = memoriesButton?.closest('[data-testid="sidebar-menu-item"]');
+    const memoriesIndex = nodes.indexOf(memoriesItem as Element);
+    // Separator should appear immediately before memories
+    expect(separatorIndex).toBe(memoriesIndex - 1);
+  });
+
+  it("sidebar-menu has no direct div children between it and menu items", () => {
+    const { container } = render(<SidebarSegmentedNav />);
+    const sidebarMenu = container.querySelector('[data-testid="sidebar-menu"]');
+    const directDivChildren = Array.from(sidebarMenu?.children ?? []).filter(
+      (child) => child.tagName === "DIV" && !child.hasAttribute("data-testid"),
+    );
+    // No anonymous wrapper divs — each direct child is either a menu-item or separator
+    expect(directDivChildren).toHaveLength(0);
+  });
+
   it("exports NAV_ITEMS correctly", () => {
     expect(NAV_ITEMS).toHaveLength(6);
     expect(NAV_ITEMS[0]).toEqual({

src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/sidebarSegmentedNav.tsx

@@ -1,7 +1,7 @@
+import { Fragment } from "react";
 import { useTranslation } from "react-i18next";
 import ForwardedIconComponent from "@/components/common/genericIconComponent";
 import ShadTooltip from "@/components/common/shadTooltipComponent";
-import { Separator } from "@/components/ui/separator";
 import {
   SidebarMenu,
   SidebarMenuButton,
@@ -30,9 +30,13 @@ const SidebarSegmentedNav = () => {
     <div className="flex h-full flex-col border-r border-border bg-background">
       <SidebarMenu className="gap-2 py-1">
         {NAV_ITEMS.map((item) => (
-          <div key={item.id}>
+          <Fragment key={item.id}>
             {item.id === "memories" && (
-              <Separator className="mx-auto my-1 w-5" />
+              <li
+                role="separator"
+                aria-hidden="true"
+                className="mx-auto my-1 w-5 border-t border-border"
+              />
             )}
             <SidebarMenuItem className="px-1 pt-1">
               <ShadTooltip content={t(item.tooltip)} side="right">
@@ -75,7 +79,7 @@ const SidebarSegmentedNav = () => {
                 </SidebarMenuButton>
               </ShadTooltip>
             </SidebarMenuItem>
-          </div>
+          </Fragment>
         ))}
       </SidebarMenu>
     </div>