fix(accessibility): update labels, add more tests

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);
   });

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"
         >

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"
         >

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()}

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"

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");
+});

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");
+});

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");
 });

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";
 }

src/labels/labelNav.test.ts

@@ -0,0 +1,5 @@
+import { labelNav } from "./labelNav";
+
+test("should return the label", () => {
+  expect(labelNav()).toEqual("");
+});

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");
 });

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";
 }

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");
 });

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";
 }

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");
 });

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";
 }

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. */