From 13c56abd99a6fff464b89226fd88d40df5a4dbe1 Mon Sep 17 00:00:00 2001
From: Giampaolo Bellavite <io@gpbl.dev>
Date: Sun, 14 Jul 2024 11:10:35 -0500
Subject: [PATCH] fix(accessibility): remove aria-controls

---
 examples/__snapshots__/Range.test.tsx.snap             | 6 ------
 examples/__snapshots__/StylingCssModules.test.tsx.snap | 3 ---
 src/DayPicker.tsx                                      | 8 --------
 3 files changed, 17 deletions(-)

diff --git a/examples/__snapshots__/Range.test.tsx.snap b/examples/__snapshots__/Range.test.tsx.snap
index 037832efb..f2a07d10f 100644
--- a/examples/__snapshots__/Range.test.tsx.snap
+++ b/examples/__snapshots__/Range.test.tsx.snap
@@ -17,7 +17,6 @@ exports[`should match the snapshot 1`] = `
         role="navigation"
       >
         <button
-          aria-controls="test"
           aria-label="Go to the Previous Month"
           class="rdp-button_previous"
           type="button"
@@ -34,7 +33,6 @@ exports[`should match the snapshot 1`] = `
           </svg>
         </button>
         <button
-          aria-controls="test"
           aria-label="Go to the Next Month"
           class="rdp-button_next"
           type="button"
@@ -56,7 +54,6 @@ exports[`should match the snapshot 1`] = `
       >
         <div
           class="rdp-month_caption"
-          id="test-caption-0"
         >
           <span
             aria-live="polite"
@@ -659,7 +656,6 @@ exports[`when a day in the range is clicked when the day is clicked again when a
         role="navigation"
       >
         <button
-          aria-controls="test"
           aria-label="Go to the Previous Month"
           class="rdp-button_previous"
           type="button"
@@ -676,7 +672,6 @@ exports[`when a day in the range is clicked when the day is clicked again when a
           </svg>
         </button>
         <button
-          aria-controls="test"
           aria-label="Go to the Next Month"
           class="rdp-button_next"
           type="button"
@@ -698,7 +693,6 @@ exports[`when a day in the range is clicked when the day is clicked again when a
       >
         <div
           class="rdp-month_caption"
-          id="test-caption-0"
         >
           <span
             aria-live="polite"
diff --git a/examples/__snapshots__/StylingCssModules.test.tsx.snap b/examples/__snapshots__/StylingCssModules.test.tsx.snap
index 43c328715..e98b1bd32 100644
--- a/examples/__snapshots__/StylingCssModules.test.tsx.snap
+++ b/examples/__snapshots__/StylingCssModules.test.tsx.snap
@@ -18,7 +18,6 @@ exports[`should match the snapshot 1`] = `
         role="navigation"
       >
         <button
-          aria-controls=":r0:"
           aria-label="Go to the Previous Month"
           class="rdp-button_previous"
           type="button"
@@ -35,7 +34,6 @@ exports[`should match the snapshot 1`] = `
           </svg>
         </button>
         <button
-          aria-controls=":r0:"
           aria-label="Go to the Next Month"
           class="rdp-button_next"
           type="button"
@@ -57,7 +55,6 @@ exports[`should match the snapshot 1`] = `
       >
         <div
           class="rdp-month_caption"
-          id=":r0:-caption-0"
         >
           <span
             aria-live="polite"
diff --git a/src/DayPicker.tsx b/src/DayPicker.tsx
index e6205436a..c3c4855db 100644
--- a/src/DayPicker.tsx
+++ b/src/DayPicker.tsx
@@ -35,9 +35,6 @@ import { useSelection } from "./useSelection.js";
  * @see http://daypicker.dev
  */
 export function DayPicker(props: DayPickerProps) {
-  const reactId = React.useId();
-  const id = props.id ?? reactId;
-
   const {
     captionLayout,
     dir,
@@ -319,7 +316,6 @@ export function DayPicker(props: DayPickerProps) {
                 tabIndex={calendar.previousMonth ? undefined : -1}
                 disabled={calendar.previousMonth ? undefined : true}
                 aria-label={labelPrevious(previousMonth, labelOptions)}
-                aria-controls={id}
                 onClick={handlePreviousClick}
               >
                 <components.Chevron
@@ -334,7 +330,6 @@ export function DayPicker(props: DayPickerProps) {
                 tabIndex={nextMonth ? undefined : -1}
                 disabled={nextMonth ? undefined : true}
                 aria-label={labelNext(nextMonth, labelOptions)}
-                aria-controls={id}
                 onClick={handleNextClick}
               >
                 <components.Chevron
@@ -346,8 +341,6 @@ export function DayPicker(props: DayPickerProps) {
             </components.Nav>
           )}
           {months.map((calendarMonth, displayIndex) => {
-            const captionId = `${id}-caption-${displayIndex}`;
-
             const handleMonthChange: ChangeEventHandler<HTMLSelectElement> = (
               e
             ) => {
@@ -398,7 +391,6 @@ export function DayPicker(props: DayPickerProps) {
                 <components.MonthCaption
                   className={classNames[UI.MonthCaption]}
                   style={styles?.[UI.MonthCaption]}
-                  id={captionId}
                   calendarMonth={calendarMonth}
                   displayIndex={displayIndex}
                 >