From 3106ed5690b5b8284d599f1ca6ab189fe4f31bdf Mon Sep 17 00:00:00 2001
From: Giampaolo Bellavite <io@gpbl.dev>
Date: Sun, 14 Jul 2024 09:17:42 -0500
Subject: [PATCH] fix(accessibility): update labels, add more tests

---
 examples/DropdownMultipleMonths.test.tsx        |  6 ++++--
 examples/__snapshots__/Range.test.tsx.snap      | 12 ++++++------
 .../StylingCssModules.test.tsx.snap             |  6 +++---
 src/DayPicker.tsx                               |  7 +++++--
 src/labels/labelDayButton.test.ts               | 17 +++++++++++++++++
 src/labels/labelGrid.test.ts                    |  7 +++++++
 src/labels/labelGridcell.test.ts                |  7 +++++++
 src/labels/labelMonthDropdown.test.ts           |  2 +-
 src/labels/labelMonthDropdown.ts                |  2 +-
 src/labels/labelNav.test.ts                     |  5 +++++
 src/labels/labelNext.test.ts                    |  2 +-
 src/labels/labelNext.ts                         |  2 +-
 src/labels/labelPrevious.test.ts                |  2 +-
 src/labels/labelPrevious.ts                     |  2 +-
 src/labels/labelYearDropdown.test.ts            |  2 +-
 src/labels/labelYearDropdown.ts                 |  2 +-
 test/elements.ts                                | 14 ++++++++------
 17 files changed, 70 insertions(+), 27 deletions(-)
 create mode 100644 src/labels/labelGrid.test.ts
 create mode 100644 src/labels/labelGridcell.test.ts
 create mode 100644 src/labels/labelNav.test.ts

diff --git a/examples/DropdownMultipleMonths.test.tsx b/examples/DropdownMultipleMonths.test.tsx
index d9fb2e4586..f8bd58df63 100644
--- a/examples/DropdownMultipleMonths.test.tsx
+++ b/examples/DropdownMultipleMonths.test.tsx
@@ -1,5 +1,7 @@
 import React from "react";
 
+import { labelMonthDropdown } from "react-day-picker";
+
 import { grid } from "@/test/elements";
 import { screen, render } from "@/test/render";
 import { user } from "@/test/user";
@@ -19,7 +21,7 @@ describe("when choosing a month from the first dropdown", () => {
   const monthName = "January";
   beforeEach(async () => {
     const firstDropDown = screen.getAllByRole("combobox", {
-      name: "Month:"
+      name: labelMonthDropdown()
     })[0];
     await user.selectOptions(firstDropDown, monthName);
   });
@@ -32,7 +34,7 @@ describe("when choosing a month from the third dropdown", () => {
   const newMonthName = "October";
   beforeEach(async () => {
     const thirdDropDown = screen.getAllByRole("combobox", {
-      name: "Month:"
+      name: labelMonthDropdown()
     })[2];
     await user.selectOptions(thirdDropDown, newMonthName);
   });
diff --git a/examples/__snapshots__/Range.test.tsx.snap b/examples/__snapshots__/Range.test.tsx.snap
index 8757be7a96..037832efb7 100644
--- a/examples/__snapshots__/Range.test.tsx.snap
+++ b/examples/__snapshots__/Range.test.tsx.snap
@@ -14,11 +14,11 @@ exports[`should match the snapshot 1`] = `
       <nav
         aria-label=""
         class="rdp-nav"
-        role="toolbar"
+        role="navigation"
       >
         <button
           aria-controls="test"
-          aria-label="Previous Month"
+          aria-label="Go to the Previous Month"
           class="rdp-button_previous"
           type="button"
         >
@@ -35,7 +35,7 @@ exports[`should match the snapshot 1`] = `
         </button>
         <button
           aria-controls="test"
-          aria-label="Next Month"
+          aria-label="Go to the Next Month"
           class="rdp-button_next"
           type="button"
         >
@@ -656,11 +656,11 @@ exports[`when a day in the range is clicked when the day is clicked again when a
       <nav
         aria-label=""
         class="rdp-nav"
-        role="toolbar"
+        role="navigation"
       >
         <button
           aria-controls="test"
-          aria-label="Previous Month"
+          aria-label="Go to the Previous Month"
           class="rdp-button_previous"
           type="button"
         >
@@ -677,7 +677,7 @@ exports[`when a day in the range is clicked when the day is clicked again when a
         </button>
         <button
           aria-controls="test"
-          aria-label="Next Month"
+          aria-label="Go to the Next Month"
           class="rdp-button_next"
           type="button"
         >
diff --git a/examples/__snapshots__/StylingCssModules.test.tsx.snap b/examples/__snapshots__/StylingCssModules.test.tsx.snap
index 9c37fdeb38..43c3287157 100644
--- a/examples/__snapshots__/StylingCssModules.test.tsx.snap
+++ b/examples/__snapshots__/StylingCssModules.test.tsx.snap
@@ -15,11 +15,11 @@ exports[`should match the snapshot 1`] = `
       <nav
         aria-label=""
         class="rdp-nav"
-        role="toolbar"
+        role="navigation"
       >
         <button
           aria-controls=":r0:"
-          aria-label="Previous Month"
+          aria-label="Go to the Previous Month"
           class="rdp-button_previous"
           type="button"
         >
@@ -36,7 +36,7 @@ exports[`should match the snapshot 1`] = `
         </button>
         <button
           aria-controls=":r0:"
-          aria-label="Next Month"
+          aria-label="Go to the Next Month"
           class="rdp-button_next"
           type="button"
         >
diff --git a/src/DayPicker.tsx b/src/DayPicker.tsx
index a461d73569..e6205436a1 100644
--- a/src/DayPicker.tsx
+++ b/src/DayPicker.tsx
@@ -282,7 +282,10 @@ export function DayPicker(props: DayPickerProps) {
 
   const dataAttributes = useMemo(() => getDataAttributes(props), [props]);
 
-  const contextValue = { ...calendar, ...selection, ...modifiers };
+  const contextValue = useMemo(
+    () => ({ ...calendar, ...selection, ...modifiers }),
+    [calendar, modifiers, selection]
+  );
 
   return (
     <dayPickerContext.Provider value={contextValue}>
@@ -305,7 +308,7 @@ export function DayPicker(props: DayPickerProps) {
         >
           {!props.hideNavigation && (
             <components.Nav
-              role="toolbar"
+              role="navigation"
               className={classNames[UI.Nav]}
               style={styles?.[UI.Nav]}
               aria-label={labelNav()}
diff --git a/src/labels/labelDayButton.test.ts b/src/labels/labelDayButton.test.ts
index 70970101fc..0fbca03728 100644
--- a/src/labels/labelDayButton.test.ts
+++ b/src/labels/labelDayButton.test.ts
@@ -17,6 +17,23 @@ const dayModifiers: Modifiers = {
   selected: false,
   today: false
 };
+
+describe("when the day is selected", () => {
+  test("return the label", () => {
+    expect(labelDayButton(day, { ...dayModifiers, selected: true })).toEqual(
+      "Monday, November 21st, 2022, selected"
+    );
+  });
+});
+
+describe("when the day is today", () => {
+  test("return the label", () => {
+    expect(labelDayButton(day, { ...dayModifiers, today: true })).toEqual(
+      "Today, Monday, November 21st, 2022"
+    );
+  });
+});
+
 test("should return the localized label", () => {
   expect(labelDayButton(day, dayModifiers, { locale: es })).toEqual(
     "lunes, 21 de noviembre de 2022"
diff --git a/src/labels/labelGrid.test.ts b/src/labels/labelGrid.test.ts
new file mode 100644
index 0000000000..4c25d41e38
--- /dev/null
+++ b/src/labels/labelGrid.test.ts
@@ -0,0 +1,7 @@
+import { labelGrid } from "./labelGrid";
+
+const day = new Date(2022, 10, 21);
+
+test("return the label", () => {
+  expect(labelGrid(day)).toEqual("November 2022");
+});
diff --git a/src/labels/labelGridcell.test.ts b/src/labels/labelGridcell.test.ts
new file mode 100644
index 0000000000..f202c405c7
--- /dev/null
+++ b/src/labels/labelGridcell.test.ts
@@ -0,0 +1,7 @@
+import { labelGridcell } from "./labelGridcell";
+
+const day = new Date(2022, 10, 21);
+
+test("return the label", () => {
+  expect(labelGridcell(day)).toEqual("Monday, November 21st, 2022");
+});
diff --git a/src/labels/labelMonthDropdown.test.ts b/src/labels/labelMonthDropdown.test.ts
index 1366705966..b6d34dc84d 100644
--- a/src/labels/labelMonthDropdown.test.ts
+++ b/src/labels/labelMonthDropdown.test.ts
@@ -1,5 +1,5 @@
 import { labelMonthDropdown } from "./labelMonthDropdown";
 
 test("should return the label", () => {
-  expect(labelMonthDropdown({})).toEqual("Month: ");
+  expect(labelMonthDropdown({})).toEqual("Choose the Month");
 });
diff --git a/src/labels/labelMonthDropdown.ts b/src/labels/labelMonthDropdown.ts
index e27165f453..326ebf11e4 100644
--- a/src/labels/labelMonthDropdown.ts
+++ b/src/labels/labelMonthDropdown.ts
@@ -7,5 +7,5 @@ import type { LabelOptions } from "../lib/dateLib.js";
  * @see http://daypicker.dev/next/docs/translation#aria-labels
  */
 export function labelMonthDropdown(options?: LabelOptions) {
-  return "Month: ";
+  return "Choose the Month";
 }
diff --git a/src/labels/labelNav.test.ts b/src/labels/labelNav.test.ts
new file mode 100644
index 0000000000..e03de84fca
--- /dev/null
+++ b/src/labels/labelNav.test.ts
@@ -0,0 +1,5 @@
+import { labelNav } from "./labelNav";
+
+test("should return the label", () => {
+  expect(labelNav()).toEqual("");
+});
diff --git a/src/labels/labelNext.test.ts b/src/labels/labelNext.test.ts
index b8e189da08..0f5096186a 100644
--- a/src/labels/labelNext.test.ts
+++ b/src/labels/labelNext.test.ts
@@ -1,5 +1,5 @@
 import { labelNext } from "./labelNext";
 
 test("should return the label", () => {
-  expect(labelNext(new Date(), {})).toEqual("Next Month");
+  expect(labelNext(new Date(), {})).toEqual("Go to the Next Month");
 });
diff --git a/src/labels/labelNext.ts b/src/labels/labelNext.ts
index 0dd078af4b..7913137705 100644
--- a/src/labels/labelNext.ts
+++ b/src/labels/labelNext.ts
@@ -11,5 +11,5 @@ export function labelNext(
   month: Date | undefined,
   options?: LabelOptions
 ) {
-  return "Next Month";
+  return "Go to the Next Month";
 }
diff --git a/src/labels/labelPrevious.test.ts b/src/labels/labelPrevious.test.ts
index 49030d8c75..8f33a4660a 100644
--- a/src/labels/labelPrevious.test.ts
+++ b/src/labels/labelPrevious.test.ts
@@ -1,5 +1,5 @@
 import { labelPrevious } from "./labelPrevious";
 
 test("should return the label", () => {
-  expect(labelPrevious(new Date(), {})).toEqual("Previous Month");
+  expect(labelPrevious(new Date(), {})).toEqual("Go to the Previous Month");
 });
diff --git a/src/labels/labelPrevious.ts b/src/labels/labelPrevious.ts
index 3d5f247915..67ed94212a 100644
--- a/src/labels/labelPrevious.ts
+++ b/src/labels/labelPrevious.ts
@@ -11,5 +11,5 @@ export function labelPrevious(
   month: Date | undefined,
   options?: LabelOptions
 ) {
-  return "Previous Month";
+  return "Go to the Previous Month";
 }
diff --git a/src/labels/labelYearDropdown.test.ts b/src/labels/labelYearDropdown.test.ts
index 17b61bd5ef..6e3e29c312 100644
--- a/src/labels/labelYearDropdown.test.ts
+++ b/src/labels/labelYearDropdown.test.ts
@@ -1,5 +1,5 @@
 import { labelYearDropdown } from "./labelYearDropdown";
 
 test("should return the label", () => {
-  expect(labelYearDropdown()).toEqual("Year: ");
+  expect(labelYearDropdown()).toEqual("Choose the Year");
 });
diff --git a/src/labels/labelYearDropdown.ts b/src/labels/labelYearDropdown.ts
index 2e807e5b04..27b4c9df7f 100644
--- a/src/labels/labelYearDropdown.ts
+++ b/src/labels/labelYearDropdown.ts
@@ -7,5 +7,5 @@ import type { LabelOptions } from "../lib/dateLib.js";
  * @see http://daypicker.dev/next/docs/translation#aria-labels
  */
 export function labelYearDropdown(options?: LabelOptions) {
-  return "Year: ";
+  return "Choose the Year";
 }
diff --git a/test/elements.ts b/test/elements.ts
index 88c1e46d3f..438fcae704 100644
--- a/test/elements.ts
+++ b/test/elements.ts
@@ -3,7 +3,9 @@ import {
   DayFlag,
   SelectionState,
   labelDayButton,
-  labelGridcell
+  labelGridcell,
+  labelMonthDropdown,
+  labelYearDropdown
 } from "react-day-picker";
 
 /** Return the application element from the screen. */
@@ -14,14 +16,14 @@ export function app() {
 /** Return the previous button element from the screen. */
 export function previousButton() {
   return screen.getByRole("button", {
-    name: "Previous Month"
+    name: "Go to the Previous Month"
   });
 }
 
 /** Return the next button element from the screen. */
 export function nextButton() {
   return screen.getByRole("button", {
-    name: "Next Month"
+    name: "Go to the Next Month"
   });
 }
 
@@ -45,7 +47,7 @@ export function grid(name?: ByRoleOptions["name"]) {
 
 /** Return the parent element of the next button from the screen. */
 export function nav() {
-  return nextButton().parentElement;
+  return screen.getByRole("navigation");
 }
 
 /**
@@ -100,12 +102,12 @@ export function rowheader(name?: ByRoleOptions["name"]) {
 
 /** Return the year dropdown element from the screen. */
 export function yearDropdown() {
-  return screen.getByRole("combobox", { name: "Year:" });
+  return screen.getByRole("combobox", { name: labelYearDropdown() });
 }
 
 /** Return the month dropdown. */
 export function monthDropdown() {
-  return screen.getByRole("combobox", { name: "Month:" });
+  return screen.getByRole("combobox", { name: labelMonthDropdown() });
 }
 
 /** Return the currently focused element. */