From 35e6aad35b5c6a5fa3c79dd052a7f9279afbf591 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Tue, 14 Oct 2025 15:03:45 -0400
Subject: [PATCH 1/9] updates chevron button labels

---
 .../DatePickerMenuHeader.tsx                  | 89 +++++++++++++------
 1 file changed, 62 insertions(+), 27 deletions(-)

diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/DatePickerMenuHeader.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/DatePickerMenuHeader.tsx
index adccbffd94..2a8a4e78d1 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/DatePickerMenuHeader.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/DatePickerMenuHeader.tsx
@@ -1,9 +1,14 @@
 import React, { forwardRef, MouseEventHandler } from 'react';
 
-import { isSameUTCMonth, setUTCMonth } from '@leafygreen-ui/date-utils';
+import {
+  getMonthName,
+  isSameUTCMonth,
+  setUTCMonth,
+} from '@leafygreen-ui/date-utils';
 import { SupportedLocales } from '@leafygreen-ui/date-utils';
-import Icon from '@leafygreen-ui/icon';
-import IconButton from '@leafygreen-ui/icon-button';
+import { Icon } from '@leafygreen-ui/icon';
+import { IconButton } from '@leafygreen-ui/icon-button';
+import { isDefined } from '@leafygreen-ui/lib';
 
 import { useSharedDatePickerContext } from '../../../shared/context';
 import { useDatePickerContext } from '../../DatePickerContext';
@@ -42,6 +47,12 @@ export const DatePickerMenuHeader = forwardRef<
 
   const isIsoFormat = locale === SupportedLocales.ISO_8601;
 
+  const formatMonth = (date: Date) => {
+    const monthName = getMonthName(date.getUTCMonth(), locale);
+    const year = date.getUTCFullYear().toString();
+    return `${monthName.long} ${year}`;
+  };
+
   /**
    * If the month is not in range and is not the last valid month
    * e.g.
@@ -63,6 +74,48 @@ export const DatePickerMenuHeader = forwardRef<
     return !isDateInRange && !isOnLastValidMonth;
   };
 
+  /**
+   * Given a direction (left/right), computes the nearest valid adjacent month
+   *
+   * @example
+   * max: new Date(Date.UTC(2038, Month.January, 19));
+   * current month date: new Date(Date.UTC(2038, Month.March, 19));
+   * `left` chevron will change the month back to January 2038
+   *
+   * @example
+   * min: new Date(Date.UTC(1970, Month.January, 1));
+   * current month date: new Date(Date.UTC(1969, Month.November, 19));
+   * "right" chevron will change the month back to January 1970
+   */
+  const getNewMonth = (dir: 'left' | 'right'): Date => {
+    if (isMonthInvalid(dir)) {
+      const closestValidDate = dir === 'left' ? max : min;
+      const newMonthIndex = closestValidDate.getUTCMonth();
+      const newMonth = setUTCMonth(closestValidDate, newMonthIndex);
+      return newMonth;
+    } else {
+      const increment = dir === 'left' ? -1 : 1;
+      const newMonthIndex = month.getUTCMonth() + increment;
+      const newMonth = setUTCMonth(month, newMonthIndex);
+      return newMonth;
+    }
+  };
+
+  const getChevronButtonLabel = (dir: 'left' | 'right') => {
+    const dirLabel = dir === 'left' ? 'Previous' : 'Next';
+    const isNewMonthInvalid = isMonthInvalid(dir);
+    const newMonth = getNewMonth(dir);
+    const newMonthString = formatMonth(newMonth);
+    return [
+      dirLabel,
+      isNewMonthInvalid ? 'valid ' : undefined,
+      'month',
+      `(${newMonthString})`,
+    ]
+      .filter(isDefined)
+      .join(' ');
+  };
+
   /**
    * Calls the `updateMonth` helper with the appropriate month when a Chevron is clicked
    */
@@ -71,35 +124,16 @@ export const DatePickerMenuHeader = forwardRef<
     e => {
       e.stopPropagation();
       e.preventDefault();
-
-      // e.g.
-      // max: new Date(Date.UTC(2038, Month.January, 19));
-      // current month date: new Date(Date.UTC(2038, Month.March, 19));
-      // left chevron will change the month back to January 2038
-      // e.g.
-      // min: new Date(Date.UTC(1970, Month.January, 1));
-      // current month date: new Date(Date.UTC(1969, Month.November, 19));
-      // right chevron will change the month back to January 1970
-      if (isMonthInvalid(dir)) {
-        const closestValidDate = dir === 'left' ? max : min;
-        const newMonthIndex = closestValidDate.getUTCMonth();
-        const newMonth = setUTCMonth(closestValidDate, newMonthIndex);
-        updateMonth(newMonth);
-      } else {
-        const increment = dir === 'left' ? -1 : 1;
-        const newMonthIndex = month.getUTCMonth() + increment;
-        const newMonth = setUTCMonth(month, newMonthIndex);
-        updateMonth(newMonth);
-      }
+      const newMonth = getNewMonth(dir);
+      updateMonth(newMonth);
     };
 
   return (
     <div ref={fwdRef} className={menuHeaderStyles} {...rest}>
       <IconButton
         ref={refs.chevronButtonRefs.left}
-        aria-label={
-          isMonthInvalid('left') ? 'Previous valid month' : 'Previous month'
-        }
+        data-testid="lg-date_picker-menu-prev_month_button"
+        aria-label={getChevronButtonLabel('left')}
         disabled={shouldChevronBeDisabled('left', month, min)}
         onClick={handleChevronClick('left')}
       >
@@ -120,7 +154,8 @@ export const DatePickerMenuHeader = forwardRef<
       </div>
       <IconButton
         ref={refs.chevronButtonRefs.right}
-        aria-label={isMonthInvalid('right') ? 'Next valid month' : 'Next month'}
+        data-testid="lg-date_picker-menu-next_month_button"
+        aria-label={getChevronButtonLabel('right')}
         disabled={shouldChevronBeDisabled('right', month, max)}
         onClick={handleChevronClick('right')}
       >

From 52382d3bfec9fa8d08db3a214273e5c3cce9eed8 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Tue, 14 Oct 2025 15:04:23 -0400
Subject: [PATCH 2/9] update select labels

---
 .../DatePickerMenuSelectMonth.tsx                  | 14 +++++++++-----
 .../DatePickerMenuSelectYear.tsx                   |  8 +++++---
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuSelect/DatePickerMenuSelectMonth.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuSelect/DatePickerMenuSelectMonth.tsx
index 4732c23b68..8dbd1b9c27 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuSelect/DatePickerMenuSelectMonth.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuSelect/DatePickerMenuSelectMonth.tsx
@@ -1,6 +1,10 @@
 import React, { useCallback } from 'react';
 
-import { getLocaleMonths, setUTCMonth } from '@leafygreen-ui/date-utils';
+import {
+  getLocaleMonths,
+  getMonthName,
+  setUTCMonth,
+} from '@leafygreen-ui/date-utils';
 import { cx } from '@leafygreen-ui/emotion';
 import { Option, Select } from '@leafygreen-ui/select';
 
@@ -40,18 +44,18 @@ export const DatePickerMenuSelectMonth = ({
     updateMonth(newMonth);
   };
 
+  const monthString = getMonthName(month.getUTCMonth(), locale);
+
   return (
     <Select
       {...selectElementProps}
-      aria-label={`Select month - ${
-        monthOptions[month.getUTCMonth()].long
-      } selected`}
+      aria-label={`Select month (${monthString.long} selected)`}
       value={month.getUTCMonth().toString()}
       onChange={handleMonthOnChange}
       className={cx(selectTruncateStyles, selectInputWidthStyles)}
       onEntered={() => setIsSelectOpen(true)}
       onExited={() => setIsSelectOpen(false)}
-      placeholder={monthOptions[month.getUTCMonth()].short}
+      placeholder={monthString.short}
     >
       {monthOptions.map((m, i) => (
         <Option
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuSelect/DatePickerMenuSelectYear.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuSelect/DatePickerMenuSelectYear.tsx
index 1f8583cb9c..f5e9b46eb3 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuSelect/DatePickerMenuSelectYear.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuSelect/DatePickerMenuSelectYear.tsx
@@ -33,16 +33,18 @@ export const DatePickerMenuSelectYear = ({
     updateMonth(newMonth);
   };
 
+  const yearString = month.getUTCFullYear().toString();
+
   return (
     <Select
       {...selectElementProps}
-      aria-label={`Select year - ${month.getUTCFullYear().toString()} selected`}
-      value={month.getUTCFullYear().toString()}
+      aria-label={`Select year (${yearString} selected)`}
+      value={yearString}
       onChange={handleYearOnChange}
       className={cx(selectTruncateStyles, selectInputWidthStyles)}
       onEntered={() => setIsSelectOpen(true)}
       onExited={() => setIsSelectOpen(false)}
-      placeholder={month.getUTCFullYear().toString()}
+      placeholder={yearString}
     >
       {yearOptions.map(y => (
         <Option value={y.toString()} key={y} aria-label={y.toString()}>

From f4e4c7d01164ce9b0d5a32f4d738056e54e64202 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Tue, 14 Oct 2025 15:04:36 -0400
Subject: [PATCH 3/9] update calendar cell label

---
 .../shared/components/Calendar/CalendarCell/CalendarCell.tsx   | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/date-picker/src/shared/components/Calendar/CalendarCell/CalendarCell.tsx b/packages/date-picker/src/shared/components/Calendar/CalendarCell/CalendarCell.tsx
index 4b51979bc9..8f244aae96 100644
--- a/packages/date-picker/src/shared/components/Calendar/CalendarCell/CalendarCell.tsx
+++ b/packages/date-picker/src/shared/components/Calendar/CalendarCell/CalendarCell.tsx
@@ -47,6 +47,7 @@ export const CalendarCell = React.forwardRef<
       isHighlighted,
       className,
       onClick,
+      'aria-label': ariaLabel,
       ...rest
     }: CalendarCellProps,
     fwdRef,
@@ -86,6 +87,7 @@ export const CalendarCell = React.forwardRef<
         role="gridcell"
         data-testid="lg-date_picker-calendar_cell"
         data-highlighted={isHighlighted}
+        aria-label={ariaLabel}
         aria-current={isCurrent}
         aria-selected={isActive}
         aria-disabled={state === CalendarCellState.Disabled}
@@ -109,6 +111,7 @@ export const CalendarCell = React.forwardRef<
       >
         <div className={cx(indicatorBaseStyles, indicatorClassName)}></div>
         <span
+          aria-hidden // hidden, since the `td` announces the value via `aria-label`
           className={cx(cellTextStyles, {
             [cellTextCurrentStyles]: isCurrent,
           })}

From c6b255aab9c1d18c0a9039f722056f6abb8c0aca Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Tue, 14 Oct 2025 15:06:37 -0400
Subject: [PATCH 4/9] Create date-picker-aria.md

---
 .changeset/date-picker-aria.md | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 .changeset/date-picker-aria.md

diff --git a/.changeset/date-picker-aria.md b/.changeset/date-picker-aria.md
new file mode 100644
index 0000000000..8971c0515d
--- /dev/null
+++ b/.changeset/date-picker-aria.md
@@ -0,0 +1,6 @@
+---
+'@leafygreen-ui/date-picker': patch
+---
+
+Updates ARIA labels for DatePicker menu previous/next buttons, and year/month select elements.
+Hides calendar cell text, so screen-readers only read the cell's `aria-value`.

From 0033cf7438ddc56b5dabec8873ea0dbd269df96a Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Tue, 14 Oct 2025 15:06:45 -0400
Subject: [PATCH 5/9] Update DatePickerMenu.spec.tsx

---
 .../DatePickerMenu/DatePickerMenu.spec.tsx    | 22 ++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx
index 47104dc0b0..d619d04801 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx
@@ -123,16 +123,32 @@ describe('packages/date-picker/date-picker-menu', () => {
       expect(grid).toHaveAttribute('aria-label', 'September 2023');
     });
     test('chevrons have aria labels', () => {
-      const { getByLabelText } = renderDatePickerMenu();
-      const leftChevron = getByLabelText('Previous month');
-      const rightChevron = getByLabelText('Next month');
+      const { getByTestId } = renderDatePickerMenu();
+      const leftChevron = getByTestId('lg-date_picker-menu-prev_month_button');
+      const rightChevron = getByTestId('lg-date_picker-menu-next_month_button');
       expect(leftChevron).toBeInTheDocument();
       expect(rightChevron).toBeInTheDocument();
+      expect(leftChevron).toHaveAttribute(
+        'aria-label',
+        expect.stringContaining('Previous month'),
+      );
+      expect(rightChevron).toHaveAttribute(
+        'aria-label',
+        expect.stringContaining('Next month'),
+      );
     });
     test('select menu triggers have aria labels', () => {
       const { monthSelect, yearSelect } = renderDatePickerMenu();
       expect(monthSelect).toBeInTheDocument();
       expect(yearSelect).toBeInTheDocument();
+      expect(monthSelect).toHaveAttribute(
+        'aria-label',
+        expect.stringContaining('Select month'),
+      );
+      expect(yearSelect).toHaveAttribute(
+        'aria-label',
+        expect.stringContaining('Select year'),
+      );
     });
     test('select menus have correct values', () => {
       const { monthSelect, yearSelect } = renderDatePickerMenu();

From 08781c133c593128840ead589a65f4f99c2d9519 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Tue, 14 Oct 2025 15:11:13 -0400
Subject: [PATCH 6/9] Update DatePicker.testutils.tsx

---
 .../src/DatePicker/DatePicker.testutils.tsx        | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/packages/date-picker/src/DatePicker/DatePicker.testutils.tsx b/packages/date-picker/src/DatePicker/DatePicker.testutils.tsx
index 29e99ca5ef..fcabc963f2 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.testutils.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.testutils.tsx
@@ -114,12 +114,14 @@ export const renderDatePicker = (
     const calendarGrid = withinElement(menuContainerEl)?.queryByRole('grid');
     const calendarCells =
       withinElement(menuContainerEl)?.getAllByRole('gridcell');
-    const leftChevron =
-      withinElement(menuContainerEl)?.queryByLabelText('Previous month') ||
-      withinElement(menuContainerEl)?.queryByLabelText('Previous valid month');
-    const rightChevron =
-      withinElement(menuContainerEl)?.queryByLabelText('Next month') ||
-      withinElement(menuContainerEl)?.queryByLabelText('Next valid month');
+
+    // TODO: date-picker test harnesses https://jira.mongodb.org/browse/LG-4176
+    const leftChevron = withinElement(menuContainerEl)?.queryByTestId(
+      'lg-date_picker-menu-prev_month_button',
+    );
+    const rightChevron = withinElement(menuContainerEl)?.queryByTestId(
+      'lg-date_picker-menu-next_month_button',
+    );
     const monthSelect = withinElement(menuContainerEl)?.queryByLabelText(
       'Select month',
       {

From b80de45b78c05317041e8962f2902600ad21889e Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Tue, 14 Oct 2025 15:12:33 -0400
Subject: [PATCH 7/9] Update date-picker-aria.md

---
 .changeset/date-picker-aria.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.changeset/date-picker-aria.md b/.changeset/date-picker-aria.md
index 8971c0515d..b52aaa0883 100644
--- a/.changeset/date-picker-aria.md
+++ b/.changeset/date-picker-aria.md
@@ -2,5 +2,6 @@
 '@leafygreen-ui/date-picker': patch
 ---
 
+[LG-3879](https://jira.mongodb.org/browse/LG-3879)
 Updates ARIA labels for DatePicker menu previous/next buttons, and year/month select elements.
 Hides calendar cell text, so screen-readers only read the cell's `aria-value`.

From 6a5711a5fcc933135865ce239a6013e0a508216b Mon Sep 17 00:00:00 2001
From: Adam Thompson <2414030+TheSonOfThomp@users.noreply.github.com>
Date: Tue, 14 Oct 2025 15:12:55 -0400
Subject: [PATCH 8/9] Apply suggestion from @Copilot

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 .../shared/components/Calendar/CalendarCell/CalendarCell.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/date-picker/src/shared/components/Calendar/CalendarCell/CalendarCell.tsx b/packages/date-picker/src/shared/components/Calendar/CalendarCell/CalendarCell.tsx
index 8f244aae96..c71eb90e58 100644
--- a/packages/date-picker/src/shared/components/Calendar/CalendarCell/CalendarCell.tsx
+++ b/packages/date-picker/src/shared/components/Calendar/CalendarCell/CalendarCell.tsx
@@ -111,7 +111,7 @@ export const CalendarCell = React.forwardRef<
       >
         <div className={cx(indicatorBaseStyles, indicatorClassName)}></div>
         <span
-          aria-hidden // hidden, since the `td` announces the value via `aria-label`
+          aria-hidden={true} // hidden, since the `td` announces the value via `aria-label`
           className={cx(cellTextStyles, {
             [cellTextCurrentStyles]: isCurrent,
           })}

From f203bcfc92cffe042c912d8dbc2161e1736504c1 Mon Sep 17 00:00:00 2001
From: Adam Thompson <2414030+TheSonOfThomp@users.noreply.github.com>
Date: Tue, 14 Oct 2025 15:13:49 -0400
Subject: [PATCH 9/9] Apply suggestion from @TheSonOfThomp

---
 .../DatePickerMenuHeader/DatePickerMenuHeader.tsx               | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/DatePickerMenuHeader.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/DatePickerMenuHeader.tsx
index 2a8a4e78d1..fad629432c 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/DatePickerMenuHeader.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenuHeader/DatePickerMenuHeader.tsx
@@ -108,7 +108,7 @@ export const DatePickerMenuHeader = forwardRef<
     const newMonthString = formatMonth(newMonth);
     return [
       dirLabel,
-      isNewMonthInvalid ? 'valid ' : undefined,
+      isNewMonthInvalid ? 'valid' : undefined,
       'month',
       `(${newMonthString})`,
     ]