fix(a11y): add accessible names and hide decorative icons in LangflowCounts (#13731)

* fix(a11y): add accessible names and hide decorative icons in LangflowCounts

* [autofix.ci] apply automated fixes

---------

Co-authored-by: Olayinka Adelakun <olayinkaadelakun@mac.war.can.ibm.com>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

Author: 3 people

src/frontend/src/components/core/appHeaderComponent/components/__tests__/langflow-counts.a11y.test.tsx

@@ -0,0 +1,75 @@
+import { render, screen } from "@testing-library/react";
+import { LangflowCounts } from "../langflow-counts";
+
+jest.mock("@/stores/darkStore", () => ({
+  useDarkStore: (
+    selector: (s: { stars: number; discordCount: number }) => unknown,
+  ) => selector({ stars: 1234, discordCount: 5678 }),
+}));
+
+jest.mock("react-i18next", () => ({
+  useTranslation: () => ({
+    t: (key: string) => {
+      const map: Record<string, string> = {
+        "header.goToGithub": "Go to GitHub repo",
+        "header.goToDiscord": "Go to Discord server",
+      };
+      return map[key] ?? key;
+    },
+  }),
+}));
+
+jest.mock("@/components/common/shadTooltipComponent", () => ({
+  __esModule: true,
+  default: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+}));
+
+jest.mock("@/utils/utils", () => ({
+  formatNumber: (n: number) => String(n),
+  cn: (...classes: (string | undefined | null | false)[]) =>
+    classes.filter(Boolean).join(" "),
+}));
+
+jest.mock("@/shared/components/caseComponent", () => ({
+  Case: ({
+    condition,
+    children,
+  }: {
+    condition: boolean;
+    children: React.ReactNode;
+  }) => (condition ? <>{children}</> : null),
+}));
+
+describe("LangflowCounts accessibility", () => {
+  beforeEach(() => {
+    render(<LangflowCounts />);
+  });
+
+  it("should_expose_github_button_with_accessible_name", () => {
+    expect(
+      screen.getByRole("button", { name: /go to github repo/i }),
+    ).toBeInTheDocument();
+  });
+
+  it("should_expose_discord_button_with_accessible_name", () => {
+    expect(
+      screen.getByRole("button", { name: /go to discord server/i }),
+    ).toBeInTheDocument();
+  });
+
+  it("should_hide_github_icon_from_assistive_technology", () => {
+    const githubButton = screen.getByRole("button", {
+      name: /go to github repo/i,
+    });
+    const svg = githubButton.querySelector("svg");
+    expect(svg).toHaveAttribute("aria-hidden", "true");
+  });
+
+  it("should_hide_discord_icon_from_assistive_technology", () => {
+    const discordButton = screen.getByRole("button", {
+      name: /go to discord server/i,
+    });
+    const svg = discordButton.querySelector("svg");
+    expect(svg).toHaveAttribute("aria-hidden", "true");
+  });
+});

src/frontend/src/components/core/appHeaderComponent/components/langflow-counts.tsx

@@ -27,10 +27,11 @@ export const LangflowCounts = () => {
           onClick={() => window.open(GITHUB_URL, "_blank")}
           className="hit-area-hover flex items-center gap-2 rounded-md p-1 text-muted-foreground"
         >
+          <span className="sr-only">{t("header.goToGithub")}</span>
           <div className="relative items-center rounded-md px-2 py-1 flex">
-            <FaGithub className="h-4 w-4" />
+            <FaGithub aria-hidden="true" className="h-4 w-4" />
             <Case condition={Boolean(formattedStars) && formattedStars !== "0"}>
-              <span className="text-xs font-semibold pl-2">
+              <span className="text-xs font-semibold pl-2" aria-hidden="true">
                 {formattedStars}
               </span>
             </Case>
@@ -48,14 +49,15 @@ export const LangflowCounts = () => {
           onClick={() => window.open(DISCORD_URL, "_blank")}
           className="hit-area-hover flex items-center gap-2 rounded-md p-1 text-muted-foreground"
         >
+          <span className="sr-only">{t("header.goToDiscord")}</span>
           <div className="relative items-center rounded-md px-2 py-1 flex">
-            <FaDiscord className="h-4 w-4" />
+            <FaDiscord aria-hidden="true" className="h-4 w-4" />
             <Case
               condition={
                 Boolean(formattedDiscordCount) && formattedDiscordCount !== "0"
               }
             >
-              <span className="text-xs font-semibold pl-2">
+              <span className="text-xs font-semibold pl-2" aria-hidden="true">
                 {formattedDiscordCount}
               </span>
             </Case>