fix(playground): correct sidebar-toggle label, fix inert aria-hidden props, and use shared axe helper in a11y tests

Author: Olayinka Adelakun

src/frontend/src/components/core/appHeaderComponent/components/ThemeButtons/__tests__/ThemeButtons.a11y.test.tsx

@@ -1,5 +1,5 @@
 import { render, screen } from "@testing-library/react";
-import { axe } from "jest-axe";
+import { axe } from "@/utils/a11y-test";
 import { ThemeButtons } from "..";
 
 describe("ThemeButtons accessibility", () => {

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

@@ -67,7 +67,7 @@ export const ThemeButtons = () => {
           strokeWidth={2}
           name="Sun"
           className="w-4"
-          aria-hidden="true"
+          ariaHidden
         />
       </Button>
 
@@ -88,7 +88,7 @@ export const ThemeButtons = () => {
           strokeWidth={2}
           name="Moon"
           className="w-4"
-          aria-hidden="true"
+          ariaHidden
         />
       </Button>
 
@@ -109,7 +109,7 @@ export const ThemeButtons = () => {
           name="Monitor"
           className="w-4"
           strokeWidth={2}
-          aria-hidden="true"
+          ariaHidden
         />
       </Button>
     </div>

src/frontend/src/components/ui/__tests__/textAnimation.a11y.test.tsx

@@ -1,5 +1,5 @@
 import { render, screen } from "@testing-library/react";
-import { axe } from "jest-axe";
+import { axe } from "@/utils/a11y-test";
 import { TextEffectPerChar } from "../textAnimation";
 
 describe("TextEffectPerChar accessibility", () => {

src/frontend/src/modals/IOModal/__tests__/playground-modal.a11y.test.tsx

@@ -1,6 +1,6 @@
 import { fireEvent, render, screen } from "@testing-library/react";
-import { axe } from "jest-axe";
 import { TooltipProvider } from "@/components/ui/tooltip";
+import { axe } from "@/utils/a11y-test";
 import IOModal from "../playground-modal";
 
 // This suite only asserts the accessible-name fixes on IOModal's own icon
@@ -234,6 +234,19 @@ describe("IOModal (playground) accessibility", () => {
     expect(openVariantLogo).toHaveAttribute("aria-hidden", "true");
   });
 
+  it("flips the toggle's aria-label to 'Show sidebar' once collapsed", () => {
+    renderPlayground();
+
+    fireEvent.click(screen.getByRole("button", { name: "Hide sidebar" }));
+
+    expect(
+      screen.queryByRole("button", { name: "Hide sidebar" }),
+    ).not.toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: "Show sidebar" }),
+    ).toBeInTheDocument();
+  });
+
   it("names the collapsed-sidebar 'Built with Langflow' button and hides its icon", () => {
     renderPlayground();
 

src/frontend/src/modals/IOModal/components/IOFieldView/components/session-selector.tsx

@@ -160,23 +160,15 @@ export default function SessionSelector({
                 aria-label={t("chat.cancelRename")}
                 className="hover:text-status-red-hover ml-2 text-status-red"
               >
-                <IconComponent
-                  name="X"
-                  className="h-4 w-4"
-                  aria-hidden="true"
-                />
+                <IconComponent name="X" className="h-4 w-4" ariaHidden />
               </button>
               <button
                 onClick={handleConfirm}
                 data-confirm="true"
                 aria-label={t("chat.confirmRename")}
                 className="ml-2 text-accent-emerald-foreground hover:text-accent-emerald-foreground/80"
               >
-                <IconComponent
-                  name="Check"
-                  className="h-4 w-4"
-                  aria-hidden="true"
-                />
+                <IconComponent name="Check" className="h-4 w-4" ariaHidden />
               </button>
             </div>
           ) : (
@@ -231,7 +223,7 @@ export default function SessionSelector({
               <IconComponent
                 name="MoreHorizontal"
                 className="h-4 w-4"
-                aria-hidden="true"
+                ariaHidden
               />
             </SelectTrigger>
           </ShadTooltip>

src/frontend/src/modals/IOModal/playground-modal.tsx

@@ -396,18 +396,26 @@ export default function IOModal({
                   <ShadTooltip
                     styleClasses="z-50"
                     side="right"
-                    content={t("modal.io.hideSidebar")}
+                    content={
+                      sidebarOpen
+                        ? t("modal.io.hideSidebar")
+                        : t("modal.io.showSidebar")
+                    }
                   >
                     <Button
                       variant="ghost"
                       className="flex h-8 w-8 items-center justify-center !p-0"
                       onClick={() => setSidebarOpen(!sidebarOpen)}
-                      aria-label={t("modal.io.hideSidebar")}
+                      aria-label={
+                        sidebarOpen
+                          ? t("modal.io.hideSidebar")
+                          : t("modal.io.showSidebar")
+                      }
                     >
                       <IconComponent
                         name={sidebarOpen ? "PanelLeftClose" : "PanelLeftOpen"}
                         className="h-[18px] w-[18px] text-ring"
-                        aria-hidden="true"
+                        ariaHidden
                       />
                     </Button>
                   </ShadTooltip>