a11y: improve screen reader and VoiceOver support (#2609)

gpbl · Nov 30, 2024 · 3d994aa · 3d994aa
1 parent 37cc0ca
commit 3d994aa
Show file tree

Hide file tree

Showing 15 changed files with 199 additions and 239 deletions.
diff --git a/examples/FixedWeeks.test.tsx b/examples/FixedWeeks.test.tsx
@@ -14,5 +14,5 @@ beforeEach(() => {
 });
 
 test("should render 7 rows", () => {
-  expect(screen.getAllByRole("row")).toHaveLength(7);
+  expect(screen.getAllByRole("row", { hidden: true })).toHaveLength(7);
 });
diff --git a/examples/Input.test.tsx b/examples/Input.test.tsx
@@ -13,7 +13,7 @@ function textbox() {
 }
 
 function gridcells() {
-  return screen.queryAllByRole("cell") as HTMLTableCellElement[];
+  return screen.queryAllByRole("gridcell") as HTMLTableCellElement[];
 }
 
 function selectedCells() {

diff --git a/examples/ModifiersHidden.test.tsx b/examples/ModifiersHidden.test.tsx
@@ -18,6 +18,6 @@ afterAll(() => jest.useRealTimers());
 test.each(days)("the day %s should be hidden", (day) => {
   render(<ModifiersHidden />);
   expect(
-    screen.queryByRole("cell", { name: `${day.getDate()}` })
+    screen.queryByRole("gridcell", { name: `${day.getDate()}` })
   ).not.toBeInTheDocument();
 });
diff --git a/examples/Range.test.tsx b/examples/Range.test.tsx
@@ -69,7 +69,7 @@ describe("when a day in the range is clicked", () => {
 });
 
 function getAllSelected() {
-  const gridcells = screen.getAllByRole("cell");
+  const gridcells = screen.getAllByRole("gridcell");
 
   return Array.from(gridcells).filter(
     (gridcell) => gridcell.getAttribute("aria-selected") === "true"

diff --git a/examples/TestCase2511.test.tsx b/examples/TestCase2511.test.tsx
@@ -9,6 +9,8 @@ beforeEach(async () => {
 });
 
 test("first weekday is Monday", () => {
-  const weekdaysElements = screen.queryAllByRole("columnheader");
+  const weekdaysElements = screen.queryAllByRole("columnheader", {
+    hidden: true
+  });
   expect(weekdaysElements[0]).toHaveAccessibleName("Monday");
 });
diff --git a/examples/TestCase2585.test.tsx b/examples/TestCase2585.test.tsx
@@ -7,5 +7,7 @@ import { TestCase2585 } from "./TestCase2585";
 render(<TestCase2585 />);
 
 test("should render 42*12 days", () => {
-  expect(screen.getAllByRole("cell")).toHaveLength(42 * 12);
+  expect(screen.getAllByRole("gridcell", { hidden: true })).toHaveLength(
+    42 * 12
+  );
 });
diff --git a/examples/WeeknumberCustom.test.tsx b/examples/WeeknumberCustom.test.tsx
@@ -9,5 +9,9 @@ beforeEach(() => {
 });
 
 test("should display the 1st week (even if December)", () => {
-  expect(screen.getByRole("rowheader", { name: `W1` })).toBeInTheDocument();
+  expect(
+    screen.getByRole("rowheader", {
+      name: (name, el) => name === "W1"
+    })
+  ).toBeInTheDocument();
 });