react-day-picker 9.4.0 → 9.4.1

package/examples/__snapshots__/StylingCssModules.test.tsx.snap

@@ -68,7 +68,9 @@ exports[`should match the snapshot 1`] = `
           class="rdp-month_grid"
           role="grid"
         >
-          <thead>
+          <thead
+            aria-hidden="true"
+          >
             <tr
               class="rdp-weekdays"
             >
@@ -130,25 +132,17 @@ exports[`should match the snapshot 1`] = `
               class="rdp-week"
             >
               <td
-                aria-hidden="true"
                 class="rdp-day rdp-hidden rdp-outside"
                 data-day="2021-10-31"
                 data-hidden="true"
                 data-month="2021-10"
                 data-outside="true"
-              >
-                <button
-                  aria-label="Sunday, October 31st, 2021"
-                  class="rdp-day_button"
-                  tabindex="-1"
-                  type="button"
-                >
-                  31
-                </button>
-              </td>
+                role="gridcell"
+              />
               <td
                 class="rdp-day"
                 data-day="2021-11-01"
+                role="gridcell"
               >
                 <button
                   aria-label="Monday, November 1st, 2021"
@@ -162,6 +156,7 @@ exports[`should match the snapshot 1`] = `
               <td
                 class="rdp-day"
                 data-day="2021-11-02"
+                role="gridcell"
               >
                 <button
                   aria-label="Tuesday, November 2nd, 2021"
@@ -175,6 +170,7 @@ exports[`should match the snapshot 1`] = `
               <td
                 class="rdp-day"
                 data-day="2021-11-03"
+                role="gridcell"
               >
                 <button
                   aria-label="Wednesday, November 3rd, 2021"
@@ -188,6 +184,7 @@ exports[`should match the snapshot 1`] = `
               <td
                 class="rdp-day"
                 data-day="2021-11-04"
+                role="gridcell"
               >
                 <button
                   aria-label="Thursday, November 4th, 2021"
@@ -201,6 +198,7 @@ exports[`should match the snapshot 1`] = `
               <td
                 class="rdp-day"
                 data-day="2021-11-05"
+                role="gridcell"
               >
                 <button
                   aria-label="Friday, November 5th, 2021"
@@ -214,6 +212,7 @@ exports[`should match the snapshot 1`] = `
               <td
                 class="rdp-day"
                 data-day="2021-11-06"
+                role="gridcell"
               >
                 <button
                   aria-label="Saturday, November 6th, 2021"
@@ -231,6 +230,7 @@ exports[`should match the snapshot 1`] = `
               <td
                 class="rdp-day"
                 data-day="2021-11-07"
+                role="gridcell"
               >
                 <button
                   aria-label="Sunday, November 7th, 2021"
@@ -244,6 +244,7 @@ exports[`should match the snapshot 1`] = `
               <td
                 class="rdp-day"
                 data-day="2021-11-08"
+                role="gridcell"
               >
                 <button
                   aria-label="Monday, November 8th, 2021"
@@ -257,6 +258,7 @@ exports[`should match the snapshot 1`] = `
               <td
                 class="rdp-day"
                 data-day="2021-11-09"
+                role="gridcell"
               >
                 <button
                   aria-label="Tuesday, November 9th, 2021"
@@ -270,6 +272,7 @@ exports[`should match the snapshot 1`] = `
               <td
                 class="rdp-day"
                 data-day="2021-11-10"
+                role="gridcell"
               >
                 <button
                   aria-label="Wednesday, November 10th, 2021"
@@ -283,6 +286,7 @@ exports[`should match the snapshot 1`] = `
               <td
                 class="rdp-day"
                 data-day="2021-11-11"
+                role="gridcell"
               >
                 <button
                   aria-label="Thursday, November 11th, 2021"
@@ -296,6 +300,7 @@ exports[`should match the snapshot 1`] = `
               <td
                 class="rdp-day"
                 data-day="2021-11-12"
+                role="gridcell"
               >
                 <button
                   aria-label="Friday, November 12th, 2021"
@@ -309,6 +314,7 @@ exports[`should match the snapshot 1`] = `
               <td
                 class="rdp-day"
                 data-day="2021-11-13"
+                role="gridcell"
               >
                 <button
                   aria-label="Saturday, November 13th, 2021"
@@ -326,6 +332,7 @@ exports[`should match the snapshot 1`] = `
               <td
                 class="rdp-day"
                 data-day="2021-11-14"
+                role="gridcell"
               >
                 <button
                   aria-label="Sunday, November 14th, 2021"
@@ -339,6 +346,7 @@ exports[`should match the snapshot 1`] = `
               <td
                 class="rdp-day"
                 data-day="2021-11-15"
+                role="gridcell"
               >
                 <button
                   aria-label="Monday, November 15th, 2021"
@@ -352,6 +360,7 @@ exports[`should match the snapshot 1`] = `
               <td
                 class="rdp-day"
                 data-day="2021-11-16"
+                role="gridcell"
               >
                 <button
                   aria-label="Tuesday, November 16th, 2021"
@@ -365,6 +374,7 @@ exports[`should match the snapshot 1`] = `
               <td
                 class="rdp-day"
                 data-day="2021-11-17"
+                role="gridcell"
               >
                 <button
                   aria-label="Wednesday, November 17th, 2021"
@@ -378,6 +388,7 @@ exports[`should match the snapshot 1`] = `
               <td
                 class="rdp-day"
                 data-day="2021-11-18"
+                role="gridcell"
               >
                 <button
                   aria-label="Thursday, November 18th, 2021"
@@ -391,6 +402,7 @@ exports[`should match the snapshot 1`] = `
               <td
                 class="rdp-day"
                 data-day="2021-11-19"
+                role="gridcell"
               >
                 <button
                   aria-label="Friday, November 19th, 2021"
@@ -404,6 +416,7 @@ exports[`should match the snapshot 1`] = `
               <td
                 class="rdp-day"
                 data-day="2021-11-20"
+                role="gridcell"
               >
                 <button
                   aria-label="Saturday, November 20th, 2021"
@@ -421,6 +434,7 @@ exports[`should match the snapshot 1`] = `
               <td
                 class="rdp-day"
                 data-day="2021-11-21"
+                role="gridcell"
               >
                 <button
                   aria-label="Sunday, November 21st, 2021"
@@ -434,6 +448,7 @@ exports[`should match the snapshot 1`] = `
               <td
                 class="rdp-day"
                 data-day="2021-11-22"
+                role="gridcell"
               >
                 <button
                   aria-label="Monday, November 22nd, 2021"
@@ -447,6 +462,7 @@ exports[`should match the snapshot 1`] = `
               <td
                 class="rdp-day"
                 data-day="2021-11-23"
+                role="gridcell"
               >
                 <button
                   aria-label="Tuesday, November 23rd, 2021"
@@ -460,6 +476,7 @@ exports[`should match the snapshot 1`] = `
               <td
                 class="rdp-day"
                 data-day="2021-11-24"
+                role="gridcell"
               >
                 <button
                   aria-label="Wednesday, November 24th, 2021"
@@ -474,6 +491,7 @@ exports[`should match the snapshot 1`] = `
                 class="rdp-day rdp-today"
                 data-day="2021-11-25"
                 data-today="true"
+                role="gridcell"
               >
                 <button
                   aria-label="Today, Thursday, November 25th, 2021"
@@ -487,6 +505,7 @@ exports[`should match the snapshot 1`] = `
               <td
                 class="rdp-day"
                 data-day="2021-11-26"
+                role="gridcell"
               >
                 <button
                   aria-label="Friday, November 26th, 2021"
@@ -500,6 +519,7 @@ exports[`should match the snapshot 1`] = `
               <td
                 class="rdp-day"
                 data-day="2021-11-27"
+                role="gridcell"
               >
                 <button
                   aria-label="Saturday, November 27th, 2021"
@@ -517,6 +537,7 @@ exports[`should match the snapshot 1`] = `
               <td
                 class="rdp-day"
                 data-day="2021-11-28"
+                role="gridcell"
               >
                 <button
                   aria-label="Sunday, November 28th, 2021"
@@ -530,6 +551,7 @@ exports[`should match the snapshot 1`] = `
               <td
                 class="rdp-day"
                 data-day="2021-11-29"
+                role="gridcell"
               >
                 <button
                   aria-label="Monday, November 29th, 2021"
@@ -543,6 +565,7 @@ exports[`should match the snapshot 1`] = `
               <td
                 class="rdp-day"
                 data-day="2021-11-30"
+                role="gridcell"
               >
                 <button
                   aria-label="Tuesday, November 30th, 2021"
@@ -554,73 +577,37 @@ exports[`should match the snapshot 1`] = `
                 </button>
               </td>
               <td
-                aria-hidden="true"
                 class="rdp-day rdp-hidden rdp-outside"
                 data-day="2021-12-01"
                 data-hidden="true"
                 data-month="2021-12"
                 data-outside="true"
-              >
-                <button
-                  aria-label="Wednesday, December 1st, 2021"
-                  class="rdp-day_button"
-                  tabindex="-1"
-                  type="button"
-                >
-                  1
-                </button>
-              </td>
+                role="gridcell"
+              />
               <td
-                aria-hidden="true"
                 class="rdp-day rdp-hidden rdp-outside"
                 data-day="2021-12-02"
                 data-hidden="true"
                 data-month="2021-12"
                 data-outside="true"
-              >
-                <button
-                  aria-label="Thursday, December 2nd, 2021"
-                  class="rdp-day_button"
-                  tabindex="-1"
-                  type="button"
-                >
-                  2
-                </button>
-              </td>
+                role="gridcell"
+              />
               <td
-                aria-hidden="true"
                 class="rdp-day rdp-hidden rdp-outside"
                 data-day="2021-12-03"
                 data-hidden="true"
                 data-month="2021-12"
                 data-outside="true"
-              >
-                <button
-                  aria-label="Friday, December 3rd, 2021"
-                  class="rdp-day_button"
-                  tabindex="-1"
-                  type="button"
-                >
-                  3
-                </button>
-              </td>
+                role="gridcell"
+              />
               <td
-                aria-hidden="true"
                 class="rdp-day rdp-hidden rdp-outside"
                 data-day="2021-12-04"
                 data-hidden="true"
                 data-month="2021-12"
                 data-outside="true"
-              >
-                <button
-                  aria-label="Saturday, December 4th, 2021"
-                  class="rdp-day_button"
-                  tabindex="-1"
-                  type="button"
-                >
-                  4
-                </button>
-              </td>
+                role="gridcell"
+              />
             </tr>
           </tbody>
         </table>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-day-picker",
-  "version": "9.4.0",
+  "version": "9.4.1",
   "description": "Customizable Date Picker for React",
   "author": "Giampaolo Bellavite <io@gpbl.dev>",
   "homepage": "https://daypicker.dev",

package/src/DayPicker.test.tsx

@@ -184,12 +184,16 @@ test("should render the custom components", () => {
 describe("when interactive", () => {
   test("render a valid HTML", () => {
     render(<DayPicker mode="single" />);
-    expect(document.body).toHTMLValidate();
+    expect(document.body).toHTMLValidate({
+      rules: { "no-redundant-role": "off" } // Redundant role is allowed for VoiceOver
+    });
   });
 });
 describe("when not interactive", () => {
   test("render a valid HTML", () => {
     render(<DayPicker />);
-    expect(document.body).toHTMLValidate();
+    expect(document.body).toHTMLValidate({
+      rules: { "no-redundant-role": "off" } // Redundant role is allowed for VoiceOver
+    });
   });
 });

package/src/DayPicker.tsx

@@ -1,10 +1,5 @@
 import React, { useCallback, useMemo } from "react";
-import type {
-  ChangeEventHandler,
-  MouseEvent,
-  FocusEvent,
-  KeyboardEvent
-} from "react";
+import type { MouseEvent, FocusEvent, KeyboardEvent, ChangeEvent } from "react";
 
 import { UI, DayFlag, SelectionState } from "./UI.js";
 import type { CalendarDay } from "./classes/CalendarDay.js";
@@ -227,6 +222,24 @@ export function DayPicker(props: DayPickerProps) {
     [onDayMouseLeave]
   );
 
+  const handleMonthChange = useCallback(
+    (date: Date) => (e: ChangeEvent<HTMLSelectElement>) => {
+      const selectedMonth = Number(e.target.value);
+      const month = dateLib.setMonth(dateLib.startOfMonth(date), selectedMonth);
+      goToMonth(month);
+    },
+    [dateLib, goToMonth]
+  );
+
+  const handleYearChange = useCallback(
+    (date: Date) => (e: ChangeEvent<HTMLSelectElement>) => {
+      const selectedYear = Number(e.target.value);
+      const month = dateLib.setYear(dateLib.startOfMonth(date), selectedYear);
+      goToMonth(month);
+    },
+    [dateLib, goToMonth]
+  );
+
   const { className, style } = useMemo(
     () => ({
       className: [classNames[UI.Root], props.className]
@@ -266,6 +279,8 @@ export function DayPicker(props: DayPickerProps) {
         lang={props.lang}
         nonce={props.nonce}
         title={props.title}
+        role={props.role}
+        aria-label={props["aria-label"]}
         {...dataAttributes}
       >
         <components.Months
@@ -284,29 +299,6 @@ export function DayPicker(props: DayPickerProps) {
             />
           )}
           {months.map((calendarMonth, displayIndex) => {
-            const handleMonthChange: ChangeEventHandler<HTMLSelectElement> = (
-              e
-            ) => {
-              const selectedMonth = Number(
-                (e.target as HTMLSelectElement).value
-              );
-              const month = dateLib.setMonth(
-                dateLib.startOfMonth(calendarMonth.date),
-                selectedMonth
-              );
-              goToMonth(month);
-            };
-
-            const handleYearChange: ChangeEventHandler<HTMLSelectElement> = (
-              e
-            ) => {
-              const month = dateLib.setYear(
-                dateLib.startOfMonth(calendarMonth.date),
-                Number(e.target.value)
-              );
-              goToMonth(month);
-            };
-
             const dropdownMonths = getMonthOptions(
               calendarMonth.date,
               navStart,
@@ -350,7 +342,7 @@ export function DayPicker(props: DayPickerProps) {
                           classNames={classNames}
                           components={components}
                           disabled={Boolean(props.disableNavigation)}
-                          onChange={handleMonthChange}
+                          onChange={handleMonthChange(calendarMonth.date)}
                           options={dropdownMonths}
                           style={styles?.[UI.Dropdown]}
                           value={calendarMonth.date.getMonth()}
@@ -371,7 +363,7 @@ export function DayPicker(props: DayPickerProps) {
                           classNames={classNames}
                           components={components}
                           disabled={Boolean(props.disableNavigation)}
-                          onChange={handleYearChange}
+                          onChange={handleYearChange(calendarMonth.date)}
                           options={dropdownYears}
                           style={styles?.[UI.Dropdown]}
                           value={calendarMonth.date.getFullYear()}
@@ -459,6 +451,7 @@ export function DayPicker(props: DayPickerProps) {
                               })}
                               className={classNames[UI.WeekNumber]}
                               scope="row"
+                              role="rowheader"
                             >
                               {formatWeekNumber(week.weekNumber)}
                             </components.WeekNumber>
@@ -505,14 +498,15 @@ export function DayPicker(props: DayPickerProps) {
                               props.modifiersClassNames
                             );
 
-                            const ariaLabel = !isInteractive
-                              ? labelGridcell(
-                                  date,
-                                  modifiers,
-                                  dateLib.options,
-                                  dateLib
-                                )
-                              : undefined;
+                            const ariaLabel =
+                              !isInteractive && !modifiers.hidden
+                                ? labelGridcell(
+                                    date,
+                                    modifiers,
+                                    dateLib.options,
+                                    dateLib
+                                  )
+                                : undefined;
 
                             return (
                               <components.Day
@@ -521,7 +515,7 @@ export function DayPicker(props: DayPickerProps) {
                                 modifiers={modifiers}
                                 className={className.join(" ")}
                                 style={style}
-                                aria-hidden={modifiers.hidden || undefined}
+                                role="gridcell"
                                 aria-selected={modifiers.selected || undefined}
                                 aria-label={ariaLabel}
                                 data-day={dateLib.format(date, "yyyy-MM-dd")}
@@ -537,7 +531,7 @@ export function DayPicker(props: DayPickerProps) {
                                 data-focused={modifiers.focused || undefined}
                                 data-today={modifiers.today || undefined}
                               >
-                                {isInteractive ? (
+                                {!modifiers.hidden && isInteractive ? (
                                   <components.DayButton
                                     className={classNames[UI.DayButton]}
                                     style={styles?.[UI.DayButton]}
@@ -568,6 +562,7 @@ export function DayPicker(props: DayPickerProps) {
                                     {formatDay(date, dateLib.options, dateLib)}
                                   </components.DayButton>
                                 ) : (
+                                  !modifiers.hidden &&
                                   formatDay(day.date, dateLib.options, dateLib)
                                 )}
                               </components.Day>

package/src/components/Weekdays.tsx

@@ -8,7 +8,7 @@ import React from "react";
  */
 export function Weekdays(props: JSX.IntrinsicElements["tr"]) {
   return (
-    <thead>
+    <thead aria-hidden>
       <tr {...props} />
     </thead>
   );

package/src/style.css

@@ -27,7 +27,6 @@
   --rdp-nav-height: 2.75rem; /* The height of the navigation bar. */
   
   --rdp-range_middle-background-color: var(--rdp-accent-background-color); /* The color of the background for days in the middle of a range. */
-  --rdp-range_middle-foreground-color: white; /* The foregraound color for days in the middle of a range. */
   --rdp-range_middle-color: inherit;/* The color of the range text. */
   
   --rdp-range_start-color: white; /* The color of the range text. */

package/src/style.module.css

@@ -27,7 +27,6 @@
   --rdp-nav-height: 2.75rem; /* The height of the navigation bar. */
   
   --rdp-range_middle-background-color: var(--rdp-accent-background-color); /* The color of the background for days in the middle of a range. */
-  --rdp-range_middle-foreground-color: white; /* The foregraound color for days in the middle of a range. */
   --rdp-range_middle-color: inherit;/* The color of the range text. */
   
   --rdp-range_start-color: white; /* The color of the range text. */

package/src/types/props.ts

@@ -355,6 +355,20 @@ export interface PropsBase {
    * @see https://daypicker.dev/docs/translation#rtl-text-direction
    */
   dir?: HTMLDivElement["dir"];
+  /**
+   * The aria-label attribute to add to the container element.
+   *
+   * @since 9.4.1
+   * @see https://daypicker.dev/guides/accessibility
+   */
+  ["aria-label"]?: string;
+  /**
+   * The role attribute to add to the container element.
+   *
+   * @since 9.4.1
+   * @see https://daypicker.dev/guides/accessibility
+   */
+  role?: "application" | "dialog" | undefined;
   /**
    * A cryptographic nonce ("number used once") which can be used by Content
    * Security Policy for the inline `style` attributes.

package/website/docs/docs/anatomy.mdx

@@ -19,7 +19,7 @@ To better understand the documentation, familiarize yourself with the elements t
 
 The UI elements are mapped to CSS classes. A complete list can be found in the [`UI`](../api/enumerations/UI.md) enum.
 
-<BrowserWindow>
+<BrowserWindow shadow={false}>
   <div style={{ overflow: "auto" }}>
     <a href="/img/anatomy-light.png">
       <img

package/website/docs/docs/styling.mdx

@@ -74,7 +74,7 @@ The following table lists the CSS variables used by DayPicker within the `.rdp-r
 | `--rdp-nav_button-width`                  | The width of the navigation buttons.                                 |
 | `--rdp-nav-height`                        | The height of the navigation bar.                                    |
 | `--rdp-range_middle-background-color`     | The color of the background for days in the middle of a range.       |
-| `--rdp-range_middle-foreground-color`     | The color of the text for days in the middle of a range.             |
+| `--rdp-range_middle-color`                | The color of the text for days in the middle of a range.             |
 | `--rdp-range_start-color`                 | The color of the range text at the start of the range.               |
 | `--rdp-range_start-background`            | Used for the background of the start of the selected range.          |
 | `--rdp-range_start-date-background-color` | The background color of the date at the start of the selected range. |
@@ -117,10 +117,6 @@ export function MyDatePicker() {
 }
 ```
 
-<BrowserWindow>
-  <Examples.CssModules />
-</BrowserWindow>
-
 ## Custom Class Names
 
 Use the `classNames` prop to apply custom class names instead of the default ones. The [`ClassNames`](../api/type-aliases/ClassNames.md) type lists all the class names used by DayPicker.

package/website/docs/docs/time-zone.mdx

@@ -2,7 +2,7 @@
 sidebar_position: 5
 ---
 
-# Time Zone
+# Time Zones
 
 Use the `timeZone` prop to set the time zone for the calendar.