Repository: gpbl/react-day-picker
Pull request #2183 (2024-06-03 00:47:25)

fix: accessibility improvements


Patch:
diff --git a/examples/AccessibleDatePicker.tsx b/examples/AccessibleDatePicker.tsx
new file mode 100644
index 000000000..1f911972c
--- /dev/null
+++ b/examples/AccessibleDatePicker.tsx
@@ -0,0 +1,33 @@
+import React, { useState } from "react";
+
+import { format } from "date-fns";
+import { DayPicker } from "react-day-picker";
+
+export function AccessibleDatePicker() {
+  const [meetingDate, setMeetingDate] = useState<Date | undefined>(undefined);
+  return (
+    <div role="group" aria-labelledby="meeting-date">
+      <h2 id="meeting-date">Meeting Date</h2>
+      <DayPicker
+        mode="single"
+        onSelect={setMeetingDate}
+        selected={meetingDate}
+        labels={{
+          labelCaption: () => "Select a date for the meeting",
+          labelDay: (date, modifiers) => {
+            return modifiers.selected
+              ? `Selected Meeting Date: ${format(date, "PPP")}`
+              : "";
+          }
+        }}
+        footer={
+          <p aria-live="polite">
+            {meetingDate
+              ? `Meeting date is set to ${format(meetingDate, "PPPP")}`
+              : "Please pick a date for the meeting."}
+          </p>
+        }
+      />
+    </div>
+  );
+}
diff --git a/examples/ContainerAttributes.tsx b/examples/ContainerAttributes.tsx
index 1f3b62c1b..2e844d720 100644
--- a/examples/ContainerAttributes.tsx
+++ b/examples/ContainerAttributes.tsx
@@ -2,11 +2,6 @@ import React from "react";
 
 import { DayPicker } from "react-day-picker";
 
-/**
- * Pass selected HTML attributes and `data-` attributes to the root element.
- *
- * @exampleTitle Container Attributes
- */
 export function ContainerAttributes() {
   return (
     <DayPicker
diff --git a/examples/index.ts b/examples/index.ts
index dbed4aad5..085aebc04 100644
--- a/examples/index.ts
+++ b/examples/index.ts
@@ -1,3 +1,4 @@
+export * from "./AccessibleDatePicker";
 export * from "./ContainerAttributes";
 export * from "./Controlled";
 export * from "./CssModules";
diff --git a/src/components/Calendar.tsx b/src/components/Calendar.tsx
index b716d5ffd..9ae962609 100644
--- a/src/components/Calendar.tsx
+++ b/src/components/Calendar.tsx
@@ -71,11 +71,11 @@ export function Calendar() {
       {...dataAttributes}
     >
       <Months className={classNames[UI.Months]} style={styles?.[UI.Months]}>
+        {!hideNavigation && <Nav />}
         {calendar.months.map((month, i) => (
           <Month aria-labelledby={id} key={i} index={i} month={month} />
         ))}
       </Months>
-      {!hideNavigation && <Nav />}
       {footer && (
         <Footer className={classNames[UI.Footer]} style={styles?.[UI.Footer]}>
           {footer}
diff --git a/src/components/Day.tsx b/src/components/Day.tsx
index 17a912bd7..a99d2eef2 100644
--- a/src/components/Day.tsx
+++ b/src/components/Day.tsx
@@ -27,6 +27,7 @@ export function Day(props: {
     | "aria-colindex"
     | "aria-disabled"
     | "aria-hidden"
+    | "aria-label"
     | "aria-selected"
     | "onClick"
     | "onBlur"
diff --git a/src/components/DayDate.tsx b/src/components/DayDate.tsx
index 2759d645f..28c0b1605 100644
--- a/src/components/DayDate.tsx
+++ b/src/components/DayDate.tsx
@@ -19,7 +19,7 @@ export function DayDate(props: {
   modifiers: DayModifiers;
   /** The HTML attributes for the root element. */
   rootProps: {
-    className?: string;
+    className: string;
     style?: React.CSSProperties;
   };
 }) {
diff --git a/src/components/DayWrapper.tsx b/src/components/DayWrapper.tsx
index 9ec2c52a5..222601c16 100644
--- a/src/components/DayWrapper.tsx
+++ b/src/components/DayWrapper.tsx
@@ -41,6 +41,7 @@ export function DayWrapper(props: {
     components,
     dir,
     formatters: { formatDay },
+    labels: { labelDay },
     locale,
     modifiersClassNames = {},
     modifiersStyles = {},
@@ -219,6 +220,8 @@ export function DayWrapper(props: {
     style,
     tabIndex: isFocused || isAutoFocusTarget ? 0 : -1,
     ["aria-colindex"]: props["aria-colindex"],
+    ["aria-label"]:
+      labelDay(props.day.date, modifiers, { locale }) ?? undefined,
     ["aria-disabled"]: modifiers.disabled || undefined,
     ["aria-hidden"]: modifiers.hidden || undefined,
     ["aria-selected"]: modifiers.selected || undefined,
diff --git a/src/components/MonthCaption.tsx b/src/components/MonthCaption.tsx
index b49f43c8f..5804b60e7 100644
--- a/src/components/MonthCaption.tsx
+++ b/src/components/MonthCaption.tsx
@@ -26,6 +26,7 @@ export function MonthCaption(props: {
     classNames,
     captionLayout,
     formatters: { formatCaption },
+    labels: { labelCaption },
     locale,
     styles
   } = useProps();
@@ -52,6 +53,7 @@ export function MonthCaption(props: {
           className={classNames[UI.CaptionLabel]}
           role="status"
           aria-live="polite"
+          aria-label={labelCaption(props.month.date, { locale }) ?? undefined}
         >
           {formatCaption(props.month.date, { locale })}
         </span>
diff --git a/src/labels/index.ts b/src/labels/index.ts
index 9dcc75dae..36b8435a6 100644
--- a/src/labels/index.ts
+++ b/src/labels/index.ts
@@ -1,4 +1,5 @@
 export * from "./labelDay";
+export * from "./labelCaption";
 export * from "./labelMonthDropdown";
 export * from "./labelNext";
 export * from "./labelPrevious";
diff --git a/src/labels/labelCaption.ts b/src/labels/labelCaption.ts
new file mode 100644
index 000000000..70e38889f
--- /dev/null
+++ b/src/labels/labelCaption.ts
@@ -0,0 +1,14 @@
+import { format } from "date-fns/format";
+
+/**
+ * Return an ARIA label for the month caption. The label is used in an aria-live
+ * region and will be announced wnen the month changes. from the caption.
+ *
+ * @group Labels
+ */
+export function labelCaption(
+  date: Date,
+  options: Parameters<typeof format>[2]
+) {
+  return "";
+}
diff --git a/src/labels/labelDay.ts b/src/labels/labelDay.ts
index a7ab1aab1..19a709ed5 100644
--- a/src/labels/labelDay.ts
+++ b/src/labels/labelDay.ts
@@ -3,7 +3,11 @@ import { format } from "date-fns/format";
 import type { DayModifiers } from "../types";
 
 /**
- * Return the default ARIA label for the day button.
+ * Return an ARIA label for the day button. By default, it returns an empty
+ * label since the screen readers will announce the date from the grid cell.
+ *
+ * Use this function to provide a custom label for the day gridcell, e.g. for
+ * announcing that is selected or booked.
  *
  * @group Labels
  */
@@ -12,5 +16,5 @@ export function labelDay(
   modifiers: DayModifiers,
   options: Parameters<typeof format>[2]
 ) {
-  return format(date, "do MMMM (EEEE)", options);
+  return "";
 }
diff --git a/src/style.css b/src/style.css
index e886900dd..b7a82b1e5 100644
--- a/src/style.css
+++ b/src/style.css
@@ -199,6 +199,7 @@
 }
 
 .rdp-months {
+  position: relative;
   display: flex;
   flex-wrap: wrap;
   gap: var(--rdp-months-gap);
diff --git a/src/style.module.css b/src/style.module.css
index ba9b481fd..60ed2b38f 100644
--- a/src/style.module.css
+++ b/src/style.module.css
@@ -199,6 +199,7 @@
 }
 
 .months {
+  position: relative;
   display: flex;
   flex-wrap: wrap;
   gap: var(--rdp-months-gap);
diff --git a/src/types.ts b/src/types.ts
index 544e6f9f6..8d7cd5a8e 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -31,6 +31,7 @@ import {
 } from "./formatters";
 import {
   labelDay,
+  labelCaption,
   labelMonthDropdown,
   labelNext,
   labelPrevious,
@@ -434,6 +435,8 @@ export type Formatters = {
 
 /** Map of functions to translate ARIA labels for the relative elements. */
 export type Labels = {
+  /** Return the label for the month dropdown. */
+  labelCaption: typeof labelCaption;
   /** Return the label for the month dropdown. */
   labelMonthDropdown: typeof labelMonthDropdown;
   /** Return the label for the year dropdown. */
diff --git a/website/docs/using-daypicker/accessibility.mdx b/website/docs/using-daypicker/accessibility.mdx
index 04a4b3d96..dd9850e0e 100644
--- a/website/docs/using-daypicker/accessibility.mdx
+++ b/website/docs/using-daypicker/accessibility.mdx
@@ -8,12 +8,61 @@ DayPicker is designed to adhere to the [ARIA Authoring Practices Guide](https://
 
 Depending on your design, you may need to add new accessibility features. For instance, when working with [Input Fields](../advanced-guides/input-fields), there could be some restrictions depending on the level of accessibility you aim to achieve. Stay updated with the best practices by following the [ARIA Patterns](https://www.w3.org/WAI/ARIA/apg/patterns/).
 
-## ARIA Labels Translation
+## Accessibility Tips
 
-When translating the date picker to another language, it's necessary to update the ARIA labels to match the new language. Refer to [Localization](../using-daypicker/localization#aria-labels) for more information.
+- Test your date picker with a screen reader.
+- In your UI, implement an `aria-live` region to announce when a selection is made.
+- Use the `role` prop to define the ARIA role of the date picker.
+- Use the [`labels`](../api/interfaces/PropsBase.md#labels) prop to customize the ARIA labels.
+
+### Example
+
+An accessible date picker with a live region that announces the selected date.
+
+```tsx title="./AccessibleDatePicker.tsx"
+import React, { useState } from "react";
+
+import { format } from "date-fns";
+import { DayPicker } from "react-day-picker";
+
+export function AccessibleDatePicker() {
+  const [meetingDate, setMeetingDate] = useState<Date | undefined>(undefined);
+  return (
+    <div role="group" aria-labelledby="meeting-date">
+      <h2 id="meeting-date">Meeting Date</h2>
+      <DayPicker
+        mode="single"
+        onSelect={setMeetingDate}
+        selected={meetingDate}
+        labels={{
+          labelCaption: () => "Select a date for the meeting",
+          labelDay: (date, modifiers) => {
+            return modifiers.selected
+              ? `Selected Meeting Date: ${format(date, "PPP")}`
+              : "";
+          }
+        }}
+        footer={
+          <p aria-live="polite">
+            {meetingDate
+              ? `Meeting date is set to ${format(meetingDate, "PPPP")}`
+              : "Please pick a date for the meeting."}
+          </p>
+        }
+      />
+    </div>
+  );
+}
+```
+
+<BrowserWindow>
+  <Examples.AccessibleDatePicker />
+</BrowserWindow>
 
 ## Keyboard Navigation
 
+DayPicker supports keyboard navigation to make it easier for users to navigate the calendar. The following keys are supported:
+
 | Keys                         | Function                            |
 | ---------------------------- | ----------------------------------- |
 | <kbd>Arrow Top</kbd>         | Move focus to the previous week     |
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
index 77311e10c..7f07d989e 100644
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@@ -71,8 +71,10 @@ html[data-theme="dark"] {
 }
 
 html[data-theme="dark"] {
-  --rdp-background-color: var(--ifm-color-primary-darkest);
-  --rdp-selected-color: var(--ifm-color-content);
+  --rdp-accent-color: var(--ifm-color-primary);
+  --rdp-accent-background-color: #073845;
+  --rdp-range_end-color: black;
+  --rdp-range_start-color: black;
 }
 
 html[data-theme="dark"] {


Test patch:
diff --git a/examples/FocusRecursive.test.tsx b/examples/FocusRecursive.test.tsx
index e9060d6f5..3a844369e 100644
--- a/examples/FocusRecursive.test.tsx
+++ b/examples/FocusRecursive.test.tsx
@@ -13,6 +13,8 @@ jest.useFakeTimers().setSystemTime(today);
 test("the first selected day should have focus", async () => {
   render(<FocusRecursive />).container;
   await act(() => user.tab());
+  await act(() => user.tab());
+  await act(() => user.tab());
   await act(() => user.type(activeElement(), "{arrowdown}"));
   await act(() => user.type(activeElement(), "{arrowdown}"));
   await act(() => user.type(activeElement(), "{arrowdown}"));
diff --git a/examples/__snapshots__/Range.test.tsx.snap b/examples/__snapshots__/Range.test.tsx.snap
index 10e6fcb0c..f156b06fe 100644
--- a/examples/__snapshots__/Range.test.tsx.snap
+++ b/examples/__snapshots__/Range.test.tsx.snap
@@ -9,6 +9,47 @@ exports[`should match the snapshot 1`] = `
     <div
       class="rdp-months"
     >
+      <div
+        class="rdp-nav"
+        role="toolbar"
+      >
+        <button
+          aria-controls="test"
+          aria-label="Previous Month"
+          class="rdp-button_previous"
+          name="previous-month"
+          type="button"
+        >
+          <svg
+            class="rdp-chevron"
+            height="24"
+            viewBox="0 0 24 24"
+            width="24"
+          >
+            <polygon
+              points="15 17.23 9.43 11.5 15 5.76 13.28 4 6 11.5 13.28 19"
+            />
+          </svg>
+        </button>
+        <button
+          aria-controls="test"
+          aria-label="Next Month"
+          class="rdp-button_next"
+          name="next-month"
+          type="button"
+        >
+          <svg
+            class="rdp-chevron"
+            height="24"
+            viewBox="0 0 24 24"
+            width="24"
+          >
+            <polygon
+              points="8 18.23 13.57 12.5 8 6.76 9.72 5 17 12.5 9.72 20"
+            />
+          </svg>
+        </button>
+      </div>
       <div
         class="rdp-month_wrapper"
       >
@@ -17,6 +58,7 @@ exports[`should match the snapshot 1`] = `
           id="test-caption-0"
         >
           <span
+            aria-label=""
             aria-live="polite"
             class="rdp-caption_label"
             role="status"
@@ -104,6 +146,7 @@ exports[`should match the snapshot 1`] = `
             >
               <div
                 aria-colindex="1"
+                aria-label=""
                 class="rdp-day rdp-focusable"
                 role="gridcell"
                 tabindex="-1"
@@ -116,6 +159,7 @@ exports[`should match the snapshot 1`] = `
               </div>
               <div
                 aria-colindex="2"
+                aria-label=""
                 class="rdp-day rdp-focusable"
                 role="gridcell"
                 tabindex="-1"
@@ -128,6 +172,7 @@ exports[`should match the snapshot 1`] = `
               </div>
               <div
                 aria-colindex="3"
+                aria-label=""
                 class="rdp-day rdp-focusable"
                 role="gridcell"
                 tabindex="-1"
@@ -140,6 +185,7 @@ exports[`should match the snapshot 1`] = `
               </div>
               <div
                 aria-colindex="4"
+                aria-label=""
                 class="rdp-day rdp-focusable"
                 role="gridcell"
                 tabindex="-1"
@@ -152,6 +198,7 @@ exports[`should match the snapshot 1`] = `
               </div>
               <div
                 aria-colindex="5"
+                aria-label=""
                 class="rdp-day rdp-focusable"
                 role="gridcell"
                 tabindex="-1"
@@ -164,6 +211,7 @@ exports[`should match the snapshot 1`] = `
               </div>
               <div
                 aria-colindex="6"
+                aria-label=""
                 class="rdp-day rdp-focusable"
                 role="gridcell"
                 tabindex="-1"
@@ -176,6 +224,7 @@ exports[`should match the snapshot 1`] = `
               </div>
               <div
                 aria-colindex="7"
+                aria-label=""
                 class="rdp-day rdp-focusable"
                 role="gridcell"
                 tabindex="-1"
@@ -194,6 +243,7 @@ exports[`should match the snapshot 1`] = `
             >
               <div
                 aria-colindex="1"
+                aria-label=""
                 class="rdp-day rdp-focusable"
                 role="gridcell"
                 tabindex="-1"
@@ -206,6 +256,7 @@ exports[`should match the snapshot 1`] = `
               </div>
               <div
                 aria-colindex="2"
+                aria-label=""
                 class="rdp-day rdp-focusable"
                 role="gridcell"
                 tabindex="-1"
@@ -218,6 +269,7 @@ exports[`should match the snapshot 1`] = `
               </div>
               <div
                 aria-colindex="3"
+                aria-label=""
                 class="rdp-day rdp-focusable"
                 role="gridcell"
                 tabindex="-1"
@@ -230,6 +282,7 @@ exports[`should match the snapshot 1`] = `
               </div>
               <div
                 aria-colindex="4"
+                aria-label=""
                 class="rdp-day rdp-focusable"
                 role="gridcell"
                 tabindex="-1"
@@ -242,6 +295,7 @@ exports[`should match the snapshot 1`] = `
               </div>
               <div
                 aria-colindex="5"
+                aria-label=""
                 class="rdp-day rdp-focusable"
                 role="gridcell"
                 tabindex="-1"
@@ -254,6 +308,7 @@ exports[`should match the snapshot 1`] = `
               </div>
               <div
                 aria-colindex="6"
+                aria-label=""
                 class="rdp-day rdp-focusable"
                 role="gridcell"
                 tabindex="-1"
@@ -266,6 +321,7 @@ exports[`should match the snapshot 1`] = `
               </div>
               <div
                 aria-colindex="7"
+                aria-label=""
                 class="rdp-day rdp-focusable"
                 role="gridcell"
                 tabindex="-1"
@@ -284,6 +340,7 @@ exports[`should match the snapshot 1`] = `
             >
               <div
                 aria-colindex="1"
+                aria-label=""
                 aria-selected="true"
                 class="rdp-day rdp-focusable rdp-range_start rdp-selected"
                 role="gridcell"
@@ -297,6 +354,7 @@ exports[`should match the snapshot 1`] = `
               </div>
               <div
                 aria-colindex="2"
+                aria-label=""
                 aria-selected="true"
                 class="rdp-day rdp-focusable rdp-range_middle rdp-selected"
                 role="gridcell"
@@ -310,6 +368,7 @@ exports[`should match the snapshot 1`] = `
               </div>
               <div
                 aria-colindex="3"
+                aria-label=""
                 aria-selected="true"
                 class="rdp-day rdp-focusable rdp-range_middle rdp-selected"
                 role="gridcell"
@@ -323,6 +382,7 @@ exports[`should match the snapshot 1`] = `
               </div>
               <div
                 aria-colindex="4"
+                aria-label=""
                 aria-selected="true"
                 class="rdp-day rdp-focusable rdp-range_middle rdp-selected"
                 role="gridcell"
@@ -336,6 +396,7 @@ exports[`should match the snapshot 1`] = `
               </div>
               <div
                 aria-colindex="5"
+                aria-label=""
                 aria-selected="true"
                 class="rdp-day rdp-focusable rdp-range_end rdp-selected"
                 role="gridcell"
@@ -349,6 +410,7 @@ exports[`should match the snapshot 1`] = `
               </div>
               <div
                 aria-colindex="6"
+                aria-label=""
                 class="rdp-day rdp-focusable"
                 role="gridcell"
                 tabindex="-1"
@@ -361,6 +423,7 @@ exports[`should match the snapshot 1`] = `
               </div>
               <div
                 aria-colindex="7"
+                aria-label=""
                 class="rdp-day rdp-focusable"
                 role="gridcell"
                 tabindex="-1"
@@ -379,6 +442,7 @@ exports[`should match the snapshot 1`] = `
             >
               <div
                 aria-colindex="1"
+                aria-label=""
                 class="rdp-day rdp-focusable"
                 role="gridcell"
                 tabindex="-1"
@@ -391,6 +455,7 @@ exports[`should match the snapshot 1`] = `
               </div>
               <div
                 aria-colindex="2"
+                aria-label=""
                 class="rdp-day rdp-focusable"
                 role="gridcell"
                 tabindex="-1"
@@ -403,6 +468,7 @@ exports[`should match the snapshot 1`] = `
               </div>
               <div
                 aria-colindex="3"
+                aria-label=""
                 class="rdp-day rdp-focusable"
                 role="gridcell"
                 tabindex="-1"
@@ -415,6 +481,7 @@ exports[`should match the snapshot 1`] = `
               </div>
               <div
                 aria-colindex="4"
+                aria-label=""
                 class="rdp-day rdp-focusable"
                 role="gridcell"
                 tabindex="-1"
@@ -427,6 +494,7 @@ exports[`should match the snapshot 1`] = `
               </div>
               <div
                 aria-colindex="5"
+                aria-label=""
                 class="rdp-day rdp-focusable"
                 role="gridcell"
                 tabindex="-1"
@@ -439,6 +507,7 @@ exports[`should match the snapshot 1`] = `
               </div>
               <div
                 aria-colindex="6"
+                aria-label=""
                 class="rdp-day rdp-focusable"
                 role="gridcell"
                 tabindex="-1"
@@ -451,6 +520,7 @@ exports[`should match the snapshot 1`] = `
               </div>
               <div
                 aria-colindex="7"
+                aria-label=""
                 class="rdp-day rdp-focusable"
                 role="gridcell"
                 tabindex="-1"
@@ -469,6 +539,7 @@ exports[`should match the snapshot 1`] = `
             >
               <div
                 aria-colindex="1"
+                aria-label=""
                 class="rdp-day rdp-focusable"
                 role="gridcell"
                 tabindex="-1"
@@ -481,6 +552,7 @@ exports[`should match the snapshot 1`] = `
               </div>
               <div
                 aria-colindex="2"
+                aria-label=""
                 class="rdp-day rdp-focusable"
                 role="gridcell"
                 tabindex="-1"
@@ -494,6 +566,7 @@ exports[`should match the snapshot 1`] = `
               <div
                 aria-colindex="3"
                 aria-hidden="true"
+                aria-label=""
                 class="rdp-day rdp-hidden rdp-outside"
                 role="gridcell"
                 tabindex="-1"
@@ -507,6 +580,7 @@ exports[`should match the snapshot 1`] = `
               <div
                 aria-colindex="4"
                 aria-hidden="true"
+                aria-label=""
                 class="rdp-day rdp-hidden rdp-outside"
                 role="gridcell"
                 tabindex="-1"
@@ -520,6 +594,7 @@ exports[`should match the snapshot 1`] = `
               <div
                 aria-colindex="5"
                 aria-hidden="true"
+                aria-label=""
                 class="rdp-day rdp-hidden rdp-outside"
                 role="gridcell"
                 tabindex="-1"
@@ -533,6 +608,7 @@ exports[`should match the snapshot 1`] = `
               <div
                 aria-colindex="6"
                 aria-hidden="true"
+                aria-label=""
                 class="rdp-day rdp-hidden rdp-outside"
                 role="gridcell"
                 tabindex="-1"
@@ -546,6 +622,7 @@ exports[`should match the snapshot 1`] = `
               <div
                 aria-colindex="7"
                 aria-hidden="true"
+                aria-label=""
                 class="rdp-day rdp-hidden rdp-outside"
                 role="gridcell"
                 tabindex="-1"
@@ -561,47 +638,6 @@ exports[`should match the snapshot 1`] = `
         </div>
       </div>
     </div>
-    <div
-      class="rdp-nav"
-      role="toolbar"
-    >
-      <button
-        aria-controls="test"
-        aria-label="Previous Month"
-        class="rdp-button_previous"
-        name="previous-month"
-        type="button"
-      >
-        <svg
-          class="rdp-chevron"
-          height="24"
-          viewBox="0 0 24 24"
-          width="24"
-        >
-          <polygon
-            points="15 17.23 9.43 11.5 15 5.76 13.28 4 6 11.5 13.28 19"
-          />
-        </svg>
-      </button>
-      <button
-        aria-controls="test"
-        aria-label="Next Month"
-        class="rdp-button_next"
-        name="next-month"
-        type="button"
-      >
-        <svg
-          class="rdp-chevron"
-          height="24"
-          viewBox="0 0 24 24"
-          width="24"
-        >
-          <polygon
-            points="8 18.23 13.57 12.5 8 6.76 9.72 5 17 12.5 9.72 20"
-          />
-        </svg>
-      </button>
-    </div>
     <div
       class="rdp-footer"
     >
@@ -624,6 +660,47 @@ exports[`when a day in the range is clicked when the day is clicked again when a
     <div
       class="rdp-months"
     >
+      <div
+        class="rdp-nav"
+        role="toolbar"
+      >
+        <button
+          aria-controls="test"
+          aria-label="Previous Month"
+          class="rdp-button_previous"
+          name="previous-month"
+          type="button"
+        >
+          <svg
+            class="rdp-chevron"
+            height="24"
+            viewBox="0 0 24 24"
+            width="24"
+          >
+            <polygon
+              points="15 17.23 9.43 11.5 15 5.76 13.28 4 6 11.5 13.28 19"
+            />
+          </svg>
+        </button>
+        <button
+          aria-controls="test"
+          aria-label="Next Month"
+          class="rdp-button_next"
+          name="next-month"
+          type="button"
+        >
+          <svg
+            class="rdp-chevron"
+            height="24"
+            viewBox="0 0 24 24"
+            width="24"
+          >
+            <polygon
+              points="8 18.23 13.57 12.5 8 6.76 9.72 5 17 12.5 9.72 20"
+            />
+          </svg>
+        </button>
+      </div>
       <div
         class="rdp-month_wrapper"
       >
@@ -632,6 +709,7 @@ exports[`when a day in the range is clicked when the day is clicked again when a
           id="test-caption-0"
         >
           <span
+            aria-label=""
             aria-live="polite"
             class="rdp-caption_label"
             role="status"
@@ -719,6 +797,7 @@ exports[`when a day in the range is clicked when the day is clicked again when a
             >
               <div
                 aria-colindex="1"
+                aria-label=""
                 class="rdp-day rdp-focusable"
                 role="gridcell"
                 tabindex="-1"
@@ -731,6 +810,7 @@ exports[`when a day in the range is clicked when the day is clicked again when a
               </div>
               <div
                 aria-colindex="2"
+                aria-label=""
                 class="rdp-day rdp-focusable"
                 role="gridcell"
                 tabindex="-1"
@@ -743,6 +823,7 @@ exports[`when a day in the range is clicked when the day is clicked again when a
               </div>
               <div
                 aria-colindex="3"
+                aria-label=""
                 class="rdp-day rdp-focusable"
                 role="gridcell"
                 tabindex="-1"
@@ -755,6 +836,7 @@ exports[`when a day in the range is clicked when the day is clicked again when a
               </div>
               <div
                 aria-colindex="4"
+                aria-label=""
                 class="rdp-day rdp-focusable"
                 role="gridcell"
                 tabindex="-1"
@@ -767,6 +849,7 @@ exports[`when a day in the range is clicked when the day is clicked again when a
               </div>
               <div
                 aria-colindex="5"
+                aria-label=""
                 class="rdp-day rdp-focusable"
                 role="gridcell"
                 tabindex="-1"
@@ -779,6 +862,7 @@ exports[`when a day in the range is clicked when the day is clicked again when a
               </div>
               <div
                 aria-colindex="6"
+                aria-label=""
                 class="rdp-day rdp-focusable"
                 role="gridcell"
                 tabindex="-1"
@@ -791,6 +875,7 @@ exports[`when a day in the range is clicked when the day is clicked again when a
               </div>
               <div
                 aria-colindex="7"
+                aria-label=""
                 class="rdp-day rdp-focusable"
                 role="gridcell"
                 tabindex="-1"
@@ -809,6 +894,7 @@ exports[`when a day in the range is clicked when the day is clicked again when a
             >
               <div
                 aria-colindex="1"
+                aria-label=""
                 class="rdp-day rdp-focusable"
                 role="gridcell"
                 tabindex="-1"
@@ -821,6 +907,7 @@ exports[`when a day in the range is clicked when the day is clicked again when a
               </div>
               <div
                 aria-colindex="2"
+                aria-label=""
                 class="rdp-day rdp-focusable"
                 role="gridcell"
                 tabindex="-1"
@@ -833,6 +920,7 @@ exports[`when a day in the range is clicked when the day is clicked again when a
               </div>
               <div
                 aria-colindex="3"
+                aria-label=""
                 class="rdp-day rdp-focusable"
                 role="gridcell"
                 tabindex="-1"
@@ -845,6 +933,7 @@ exports[`when a day in the range is clicked when the day is clicked again when a
               </div>
               <div
                 aria-colindex="4"
+                aria-label=""
                 class="rdp-day rdp-focusable"
                 role="gridcell"
                 tabindex="-1"
@@ -857,6 +946,7 @@ exports[`when a day in the range is clicked when the day is clicked again when a
               </div>
               <div
                 aria-colindex="5"
+                aria-label=""
                 class="rdp-day rdp-focusable"
                 role="gridcell"
                 tabindex="-1"
@@ -869,6 +959,7 @@ exports[`when a day in the range is clicked when the day is clicked again when a
               </div>
               <div
                 aria-colindex="6"
+                aria-label=""
                 class="rdp-day rdp-focusable"
                 role="gridcell"
                 tabindex="-1"
@@ -881,6 +972,7 @@ exports[`when a day in the range is clicked when the day is clicked again when a
               </div>
               <div
                 aria-colindex="7"
+                aria-label=""
                 class="rdp-day rdp-focusable"
                 role="gridcell"
                 tabindex="-1"
@@ -899,6 +991,7 @@ exports[`when a day in the range is clicked when the day is clicked again when a
             >
               <div
                 aria-colindex="1"
+                aria-label=""
                 class="rdp-day rdp-focusable"
                 role="gridcell"
                 tabindex="-1"
@@ -911,6 +1004,7 @@ exports[`when a day in the range is clicked when the day is clicked again when a
               </div>
               <div
                 aria-colindex="2"
+                aria-label=""
                 class="rdp-day rdp-focusable"
                 role="gridcell"
                 tabindex="-1"
@@ -923,6 +1017,7 @@ exports[`when a day in the range is clicked when the day is clicked again when a
               </div>
               <div
                 aria-colindex="3"
+                aria-label=""
                 class="rdp-day rdp-focusable rdp-focused"
                 role="gridcell"
                 tabindex="0"
@@ -935,6 +1030,7 @@ exports[`when a day in the range is clicked when the day is clicked again when a
               </div>
               <div
                 aria-colindex="4"
+                aria-label=""
                 class="rdp-day rdp-focusable"
                 role="gridcell"
                 tabindex="-1"
@@ -947,6 +1043,7 @@ exports[`when a day in the range is clicked when the day is clicked again when a
               </div>
               <div
                 aria-colindex="5"
+                aria-label=""
                 class="rdp-day rdp-focusable"
                 role="gridcell"
                 tabindex="-1"
@@ -959,6 +1056,7 @@ exports[`when a day in the range is clicked when the day is clicked again when a
               </div>
               <div
                 aria-colindex="6"
+                aria-label=""
                 class="rdp-day rdp-focusable"
                 role="gridcell"
                 tabindex="-1"
@@ -971,6 +1069,7 @@ exports[`when a day in the range is clicked when the day is clicked again when a
               </div>
               <div
                 aria-colindex="7"
+                aria-label=""
                 class="rdp-day rdp-focusable"
                 role="gridcell"
                 tabindex="-1"
@@ -989,6 +1088,7 @@ exports[`when a day in the range is clicked when the day is clicked again when a
             >
               <div
                 aria-colindex="1"
+                aria-label=""
                 class="rdp-day rdp-focusable"
                 role="gridcell"
                 tabindex="-1"
@@ -1001,6 +1101,7 @@ exports[`when a day in the range is clicked when the day is clicked again when a
               </div>
               <div
                 aria-colindex="2"
+                aria-label=""
                 class="rdp-day rdp-focusable"
                 role="gridcell"
                 tabindex="-1"
@@ -1013,6 +1114,7 @@ exports[`when a day in the range is clicked when the day is clicked again when a
               </div>
               <div
                 aria-colindex="3"
+                aria-label=""
                 class="rdp-day rdp-focusable"
                 role="gridcell"
                 tabindex="-1"
@@ -1025,6 +1127,7 @@ exports[`when a day in the range is clicked when the day is clicked again when a
               </div>
               <div
                 aria-colindex="4"
+                aria-label=""
                 class="rdp-day rdp-focusable"
                 role="gridcell"
                 tabindex="-1"
@@ -1037,6 +1140,7 @@ exports[`when a day in the range is clicked when the day is clicked again when a
               </div>
               <div
                 aria-colindex="5"
+                aria-label=""
                 class="rdp-day rdp-focusable"
                 role="gridcell"
                 tabindex="-1"
@@ -1049,6 +1153,7 @@ exports[`when a day in the range is clicked when the day is clicked again when a
               </div>
               <div
                 aria-colindex="6"
+                aria-label=""
                 class="rdp-day rdp-focusable"
                 role="gridcell"
                 tabindex="-1"
@@ -1061,6 +1166,7 @@ exports[`when a day in the range is clicked when the day is clicked again when a
               </div>
               <div
                 aria-colindex="7"
+                aria-label=""
                 class="rdp-day rdp-focusable"
                 role="gridcell"
                 tabindex="-1"
@@ -1079,6 +1185,7 @@ exports[`when a day in the range is clicked when the day is clicked again when a
             >
               <div
                 aria-colindex="1"
+                aria-label=""
                 class="rdp-day rdp-focusable"
                 role="gridcell"
                 tabindex="-1"
@@ -1091,6 +1198,7 @@ exports[`when a day in the range is clicked when the day is clicked again when a
               </div>
               <div
                 aria-colindex="2"
+                aria-label=""
                 class="rdp-day rdp-focusable"
                 role="gridcell"
                 tabindex="-1"
@@ -1104,6 +1212,7 @@ exports[`when a day in the range is clicked when the day is clicked again when a
               <div
                 aria-colindex="3"
                 aria-hidden="true"
+                aria-label=""
                 class="rdp-day rdp-hidden rdp-outside"
                 role="gridcell"
                 tabindex="-1"
@@ -1117,6 +1226,7 @@ exports[`when a day in the range is clicked when the day is clicked again when a
               <div
                 aria-colindex="4"
                 aria-hidden="true"
+                aria-label=""
                 class="rdp-day rdp-hidden rdp-outside"
                 role="gridcell"
                 tabindex="-1"
@@ -1130,6 +1240,7 @@ exports[`when a day in the range is clicked when the day is clicked again when a
               <div
                 aria-colindex="5"
                 aria-hidden="true"
+                aria-label=""
                 class="rdp-day rdp-hidden rdp-outside"
                 role="gridcell"
                 tabindex="-1"
@@ -1143,6 +1254,7 @@ exports[`when a day in the range is clicked when the day is clicked again when a
               <div
                 aria-colindex="6"
                 aria-hidden="true"
+                aria-label=""
                 class="rdp-day rdp-hidden rdp-outside"
                 role="gridcell"
                 tabindex="-1"
@@ -1156,6 +1268,7 @@ exports[`when a day in the range is clicked when the day is clicked again when a
               <div
                 aria-colindex="7"
                 aria-hidden="true"
+                aria-label=""
                 class="rdp-day rdp-hidden rdp-outside"
                 role="gridcell"
                 tabindex="-1"
@@ -1171,47 +1284,6 @@ exports[`when a day in the range is clicked when the day is clicked again when a
         </div>
       </div>
     </div>
-    <div
-      class="rdp-nav"
-      role="toolbar"
-    >
-      <button
-        aria-controls="test"
-        aria-label="Previous Month"
-        class="rdp-button_previous"
-        name="previous-month"
-        type="button"
-      >
-        <svg
-          class="rdp-chevron"
-          height="24"
-          viewBox="0 0 24 24"
-          width="24"
-        >
-          <polygon
-            points="15 17.23 9.43 11.5 15 5.76 13.28 4 6 11.5 13.28 19"
-          />
-        </svg>
-      </button>
-      <button
-        aria-controls="test"
-        aria-label="Next Month"
-        class="rdp-button_next"
-        name="next-month"
-        type="button"
-      >
-        <svg
-          class="rdp-chevron"
-          height="24"
-          viewBox="0 0 24 24"
-          width="24"
-        >
-          <polygon
-            points="8 18.23 13.57 12.5 8 6.76 9.72 5 17 12.5 9.72 20"
-          />
-        </svg>
-      </button>
-    </div>
     <div
       class="rdp-footer"
     >
diff --git a/examples/__snapshots__/StylingCssModules.test.tsx.snap b/examples/__snapshots__/StylingCssModules.test.tsx.snap
index bb318ce9f..6ca852caf 100644
--- a/examples/__snapshots__/StylingCssModules.test.tsx.snap
+++ b/examples/__snapshots__/StylingCssModules.test.tsx.snap
@@ -11,6 +11,47 @@ exports[`should match the snapshot 1`] = `
     <div
       class="rdp-months"
     >
+      <div
+        class="rdp-nav"
+        role="toolbar"
+      >
+        <button
+          aria-controls=":r0:"
+          aria-label="Previous Month"
+          class="rdp-button_previous"
+          name="previous-month"
+          type="button"
+        >
+          <svg
+            class="rdp-chevron"
+            height="24"
+            viewBox="0 0 24 24"
+            width="24"
+          >
+            <polygon
+              points="15 17.23 9.43 11.5 15 5.76 13.28 4 6 11.5 13.28 19"
+            />
+          </svg>
+        </button>
+        <button
+          aria-controls=":r0:"
+          aria-label="Next Month"
+          class="rdp-button_next"
+          name="next-month"
+          type="button"
+        >
+          <svg
+            class="rdp-chevron"
+            height="24"
+            viewBox="0 0 24 24"
+            width="24"
+          >
+            <polygon
+              points="8 18.23 13.57 12.5 8 6.76 9.72 5 17 12.5 9.72 20"
+            />
+          </svg>
+        </button>
+      </div>
       <div
         class="rdp-month_wrapper"
       >
@@ -19,6 +60,7 @@ exports[`should match the snapshot 1`] = `
           id=":r0:-caption-0"
         >
           <span
+            aria-label=""
             aria-live="polite"
             class="rdp-caption_label"
             role="status"
@@ -107,6 +149,7 @@ exports[`should match the snapshot 1`] = `
               <div
                 aria-colindex="1"
                 aria-hidden="true"
+                aria-label=""
                 class="rdp-day rdp-hidden rdp-outside"
                 role="gridcell"
                 tabindex="-1"
@@ -119,6 +162,7 @@ exports[`should match the snapshot 1`] = `
               </div>
               <div
                 aria-colindex="2"
+                aria-label=""
                 class="rdp-day"
                 role="gridcell"
                 tabindex="-1"
@@ -131,6 +175,7 @@ exports[`should match the snapshot 1`] = `
               </div>
               <div
                 aria-colindex="3"
+                aria-label=""
                 class="rdp-day"
                 role="gridcell"
                 tabindex="-1"
@@ -143,6 +188,7 @@ exports[`should match the snapshot 1`] = `
               </div>
               <div
                 aria-colindex="4"
+                aria-label=""
                 class="rdp-day"
                 role="gridcell"
                 tabindex="-1"
@@ -155,6 +201,7 @@ exports[`should match the snapshot 1`] = `
               </div>
               <div
                 aria-colindex="5"
+                aria-label=""
                 class="rdp-day"
                 role="gridcell"
                 tabindex="-1"
@@ -167,6 +214,7 @@ exports[`should match the snapshot 1`] = `
               </div>
               <div
                 aria-colindex="6"
+                aria-label=""
                 class="rdp-day"
                 role="gridcell"
                 tabindex="-1"
@@ -179,6 +227,7 @@ exports[`should match the snapshot 1`] = `
               </div>
               <div
                 aria-colindex="7"
+                aria-label=""
                 class="rdp-day"
                 role="gridcell"
                 tabindex="-1"
@@ -197,6 +246,7 @@ exports[`should match the snapshot 1`] = `
             >
               <div
                 aria-colindex="1"
+                aria-label=""
                 class="rdp-day"
                 role="gridcell"
                 tabindex="-1"
@@ -209,6 +259,7 @@ exports[`should match the snapshot 1`] = `
               </div>
               <div
                 aria-colindex="2"
+                aria-label=""
                 class="rdp-day"
                 role="gridcell"
                 tabindex="-1"
@@ -221,6 +272,7 @@ exports[`should match the snapshot 1`] = `
               </div>
               <div
                 aria-colindex="3"
+                aria-label=""
                 class="rdp-day"
                 role="gridcell"
                 tabindex="-1"
@@ -233,6 +285,7 @@ exports[`should match the snapshot 1`] = `
               </div>
               <div
                 aria-colindex="4"
+                aria-label=""
                 class="rdp-day"
                 role="gridcell"
                 tabindex="-1"
@@ -245,6 +298,7 @@ exports[`should match the snapshot 1`] = `
               </div>
               <div
                 aria-colindex="5"
+                aria-label=""
                 class="rdp-day"
                 role="gridcell"
                 tabindex="-1"
@@ -257,6 +311,7 @@ exports[`should match the snapshot 1`] = `
               </div>
               <div
                 aria-colindex="6"
+                aria-label=""
                 class="rdp-day"
                 role="gridcell"
                 tabindex="-1"
@@ -269,6 +324,7 @@ exports[`should match the snapshot 1`] = `
               </div>
               <div
                 aria-colindex="7"
+                aria-label=""
                 class="rdp-day"
                 role="gridcell"
                 tabindex="-1"
@@ -287,6 +343,7 @@ exports[`should match the snapshot 1`] = `
             >
               <div
                 aria-colindex="1"
+                aria-label=""
                 class="rdp-day"
                 role="gridcell"
                 tabindex="-1"
@@ -299,6 +356,7 @@ exports[`should match the snapshot 1`] = `
               </div>
               <div
                 aria-colindex="2"
+                aria-label=""
                 class="rdp-day"
                 role="gridcell"
                 tabindex="-1"
@@ -311,6 +369,7 @@ exports[`should match the snapshot 1`] = `
               </div>
               <div
                 aria-colindex="3"
+                aria-label=""
                 class="rdp-day"
                 role="gridcell"
                 tabindex="-1"
@@ -323,6 +382,7 @@ exports[`should match the snapshot 1`] = `
               </div>
               <div
                 aria-colindex="4"
+                aria-label=""
                 class="rdp-day"
                 role="gridcell"
                 tabindex="-1"
@@ -335,6 +395,7 @@ exports[`should match the snapshot 1`] = `
               </div>
               <div
                 aria-colindex="5"
+                aria-label=""
                 class="rdp-day"
                 role="gridcell"
                 tabindex="-1"
@@ -347,6 +408,7 @@ exports[`should match the snapshot 1`] = `
               </div>
               <div
                 aria-colindex="6"
+                aria-label=""
                 class="rdp-day"
                 role="gridcell"
                 tabindex="-1"
@@ -359,6 +421,7 @@ exports[`should match the snapshot 1`] = `
               </div>
               <div
                 aria-colindex="7"
+                aria-label=""
                 class="rdp-day"
                 role="gridcell"
                 tabindex="-1"
@@ -377,6 +440,7 @@ exports[`should match the snapshot 1`] = `
             >
               <div
                 aria-colindex="1"
+                aria-label=""
                 class="rdp-day"
                 role="gridcell"
                 tabindex="-1"
@@ -389,6 +453,7 @@ exports[`should match the snapshot 1`] = `
               </div>
               <div
                 aria-colindex="2"
+                aria-label=""
                 class="rdp-day"
                 role="gridcell"
                 tabindex="-1"
@@ -401,6 +466,7 @@ exports[`should match the snapshot 1`] = `
               </div>
               <div
                 aria-colindex="3"
+                aria-label=""
                 class="rdp-day"
                 role="gridcell"
                 tabindex="-1"
@@ -413,6 +479,7 @@ exports[`should match the snapshot 1`] = `
               </div>
               <div
                 aria-colindex="4"
+                aria-label=""
                 class="rdp-day"
                 role="gridcell"
                 tabindex="-1"
@@ -425,6 +492,7 @@ exports[`should match the snapshot 1`] = `
               </div>
               <div
                 aria-colindex="5"
+                aria-label=""
                 class="rdp-day rdp-today"
                 role="gridcell"
                 tabindex="-1"
@@ -437,6 +505,7 @@ exports[`should match the snapshot 1`] = `
               </div>
               <div
                 aria-colindex="6"
+                aria-label=""
                 class="rdp-day"
                 role="gridcell"
                 tabindex="-1"
@@ -449,6 +518,7 @@ exports[`should match the snapshot 1`] = `
               </div>
               <div
                 aria-colindex="7"
+                aria-label=""
                 class="rdp-day"
                 role="gridcell"
                 tabindex="-1"
@@ -467,6 +537,7 @@ exports[`should match the snapshot 1`] = `
             >
               <div
                 aria-colindex="1"
+                aria-label=""
                 class="rdp-day"
                 role="gridcell"
                 tabindex="-1"
@@ -479,6 +550,7 @@ exports[`should match the snapshot 1`] = `
               </div>
               <div
                 aria-colindex="2"
+                aria-label=""
                 class="rdp-day"
                 role="gridcell"
                 tabindex="-1"
@@ -491,6 +563,7 @@ exports[`should match the snapshot 1`] = `
               </div>
               <div
                 aria-colindex="3"
+                aria-label=""
                 class="rdp-day"
                 role="gridcell"
                 tabindex="-1"
@@ -504,6 +577,7 @@ exports[`should match the snapshot 1`] = `
               <div
                 aria-colindex="4"
                 aria-hidden="true"
+                aria-label=""
                 class="rdp-day rdp-hidden rdp-outside"
                 role="gridcell"
                 tabindex="-1"
@@ -517,6 +591,7 @@ exports[`should match the snapshot 1`] = `
               <div
                 aria-colindex="5"
                 aria-hidden="true"
+                aria-label=""
                 class="rdp-day rdp-hidden rdp-outside"
                 role="gridcell"
                 tabindex="-1"
@@ -530,6 +605,7 @@ exports[`should match the snapshot 1`] = `
               <div
                 aria-colindex="6"
                 aria-hidden="true"
+                aria-label=""
                 class="rdp-day rdp-hidden rdp-outside"
                 role="gridcell"
                 tabindex="-1"
@@ -543,6 +619,7 @@ exports[`should match the snapshot 1`] = `
               <div
                 aria-colindex="7"
                 aria-hidden="true"
+                aria-label=""
                 class="rdp-day rdp-hidden rdp-outside"
                 role="gridcell"
                 tabindex="-1"
@@ -558,47 +635,6 @@ exports[`should match the snapshot 1`] = `
         </div>
       </div>
     </div>
-    <div
-      class="rdp-nav"
-      role="toolbar"
-    >
-      <button
-        aria-controls=":r0:"
-        aria-label="Previous Month"
-        class="rdp-button_previous"
-        name="previous-month"
-        type="button"
-      >
-        <svg
-          class="rdp-chevron"
-          height="24"
-          viewBox="0 0 24 24"
-          width="24"
-        >
-          <polygon
-            points="15 17.23 9.43 11.5 15 5.76 13.28 4 6 11.5 13.28 19"
-          />
-        </svg>
-      </button>
-      <button
-        aria-controls=":r0:"
-        aria-label="Next Month"
-        class="rdp-button_next"
-        name="next-month"
-        type="button"
-      >
-        <svg
-          class="rdp-chevron"
-          height="24"
-          viewBox="0 0 24 24"
-          width="24"
-        >
-          <polygon
-            points="8 18.23 13.57 12.5 8 6.76 9.72 5 17 12.5 9.72 20"
-          />
-        </svg>
-      </button>
-    </div>
   </div>
 </div>
 `;
diff --git a/src/labels/labelDay.test.ts b/src/labels/labelDay.test.ts
index b2a472f0b..2d84efffd 100644
--- a/src/labels/labelDay.test.ts
+++ b/src/labels/labelDay.test.ts
@@ -17,8 +17,6 @@ const dayModifiers: DayModifiers = {
   selected: false,
   today: false
 };
-test("should return the day label", () => {
-  expect(labelDay(day, dayModifiers, { locale: es })).toEqual(
-    "21º noviembre (lunes)"
-  );
+test("should return an empty day label", () => {
+  expect(labelDay(day, dayModifiers, { locale: es })).toEqual("");
 });