From 280bcd2bbdbf16ca3e6ef63d21582aecf99e917a Mon Sep 17 00:00:00 2001
From: kai392 <chengjunkai4@gmail.com>
Date: Fri, 31 Jul 2026 16:53:51 +0800
Subject: [PATCH] fix(ui-kit): expose PaginationEllipsis More pages outside
 aria-hidden

Move aria-hidden from the ellipsis wrapper onto the decorative icon so
the sr-only label stays in the accessibility tree.

Closes #10052

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../src/components/pagination.test.tsx        | 28 +++++++++++++++++++
 .../src/components/pagination.tsx             |  3 +-
 2 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/packages/loopover-ui-kit/src/components/pagination.test.tsx b/packages/loopover-ui-kit/src/components/pagination.test.tsx
index 85df673256..4ee7899fb6 100644
--- a/packages/loopover-ui-kit/src/components/pagination.test.tsx
+++ b/packages/loopover-ui-kit/src/components/pagination.test.tsx
@@ -2,6 +2,7 @@ import { render, screen } from "@testing-library/react";
 import { describe, expect, it } from "vitest";
 
 import {
+  PaginationEllipsis,
   PaginationLink,
   PaginationNext,
   PaginationPrevious,
@@ -47,3 +48,30 @@ describe("PaginationLink aria-disabled styling (#8307)", () => {
     expect(link.getAttribute("aria-current")).toBe("page");
   });
 });
+
+// #10052: aria-hidden on the outer wrapper removed the sr-only "More pages" label from the a11y tree.
+// Scope aria-hidden to the decorative icon only — same pattern as TypingIndicator.
+describe("PaginationEllipsis sr-only label not inside aria-hidden (#10052)", () => {
+  it("exposes \"More pages\" with no aria-hidden ancestor; icon is aria-hidden", () => {
+    const { container } = render(<PaginationEllipsis />);
+    const label = screen.getByText("More pages");
+    expect(label.closest("[aria-hidden='true'], [aria-hidden='']")).toBeNull();
+    const icon = container.querySelector("svg");
+    expect(icon).not.toBeNull();
+    expect(icon!.getAttribute("aria-hidden")).toBe("true");
+  });
+
+  it("merges caller className through cn (mx-2 + h-9)", () => {
+    const { container } = render(<PaginationEllipsis className="mx-2" />);
+    const outer = container.firstElementChild as HTMLElement;
+    expect(outer.tagName).toBe("SPAN");
+    expect(outer.className).toContain("mx-2");
+    expect(outer.className).toContain("h-9");
+  });
+
+  it("lets an explicit aria-hidden prop win on the outer span", () => {
+    const { container } = render(<PaginationEllipsis aria-hidden />);
+    const outer = container.firstElementChild as HTMLElement;
+    expect(outer.getAttribute("aria-hidden")).toBe("true");
+  });
+});
diff --git a/packages/loopover-ui-kit/src/components/pagination.tsx b/packages/loopover-ui-kit/src/components/pagination.tsx
index 4255db33ac..dfbb3652ed 100644
--- a/packages/loopover-ui-kit/src/components/pagination.tsx
+++ b/packages/loopover-ui-kit/src/components/pagination.tsx
@@ -99,11 +99,10 @@ const PaginationEllipsis = ({
   ...props
 }: React.ComponentProps<"span">) => (
   <span
-    aria-hidden
     className={cn("flex h-9 w-9 items-center justify-center", className)}
     {...props}
   >
-    <MoreHorizontal className="h-4 w-4" />
+    <MoreHorizontal className="h-4 w-4" aria-hidden />
     <span className="sr-only">More pages</span>
   </span>
 );