fix(datepicker): add weekday to calendar aria-labels (#22141)

heloiselui · web-flow · commit afb89eb62227 · 2026-04-30T07:46:29.000Z
* fix(react): add weekday to date picker aria-labels and added tests

* fix(wc): add weekday to date picker aria-labels and added tests
diff --git a/packages/react/src/components/DatePicker/DatePicker-test.js b/packages/react/src/components/DatePicker/DatePicker-test.js
@@ -653,6 +653,28 @@ describe('Single date picker', () => {
     expect(screen.getByRole('application')).toBeInTheDocument();
   });
 
+  it('should include the weekday in the calendar day aria-label', async () => {
+    render(
+      <DatePicker
+        onChange={() => {}}
+        datePickerType="single"
+        value="04/15/2026">
+        <DatePickerInput
+          id="date-picker-input-id-start"
+          placeholder="mm/dd/yyyy"
+          labelText="Start date"
+          data-testid="input"
+        />
+      </DatePicker>
+    );
+
+    await userEvent.click(screen.getByTestId('input'));
+
+    expect(
+      screen.getByLabelText('Wednesday, April 15, 2026')
+    ).toBeInTheDocument();
+  });
+
   it('should update the calendar classnames when open', async () => {
     render(
       <DatePicker
@@ -806,7 +828,7 @@ describe('Single date picker', () => {
 
     // eslint-disable-next-line testing-library/no-node-access
     const belowMinDate = document.querySelector(
-      '[aria-label="November 26, 2023"]'
+      '[aria-label="Sunday, November 26, 2023"]'
     );
     await userEvent.click(belowMinDate);
 
@@ -1689,7 +1711,7 @@ describe('Date picker with minDate and maxDate', () => {
     await userEvent.click(screen.getByTestId('input'));
 
     const disabledDate = document.querySelector(
-      '[aria-label="January 2, 2018"]'
+      '[aria-label="Tuesday, January 2, 2018"]'
     );
 
     expect(disabledDate).toHaveClass('flatpickr-disabled');
@@ -1744,7 +1766,7 @@ describe('Date picker with minDate and maxDate', () => {
     );
     // eslint-disable-next-line testing-library/no-node-access
     const belowMinDate = document.querySelector(
-      '[aria-label="December 31, 2017"]'
+      '[aria-label="Sunday, December 31, 2017"]'
     );
     await userEvent.click(screen.getByTestId('input-min-max'));
     await userEvent.click(belowMinDate);
@@ -1772,7 +1794,7 @@ describe('Date picker with minDate and maxDate', () => {
 
     // eslint-disable-next-line testing-library/no-node-access
     const aboveMaxDate = document.querySelector(
-      '[aria-label="January 4, 2018"]'
+      '[aria-label="Thursday, January 4, 2018"]'
     );
 
     await userEvent.click(screen.getByTestId('input-min-max-2'));
diff --git a/packages/react/src/components/DatePicker/DatePicker.tsx b/packages/react/src/components/DatePicker/DatePicker.tsx
@@ -54,6 +54,7 @@ function initializeWeekdayShorthand() {
 }
 
 const forEach = Array.prototype.forEach;
+const defaultAriaDateFormat = 'l, F j, Y';
 
 /**
  * @param {number} monthNumber The month number.
@@ -603,6 +604,7 @@ const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>((props, ref) => {
       inline: inline ?? false,
       onClose: onCalendarClose,
       disableMobile: true,
+      ariaDateFormat: defaultAriaDateFormat,
       defaultDate: value,
       closeOnSelect: closeOnSelect,
       mode: datePickerType,
diff --git a/packages/web-components/src/components/date-picker/__tests__/date-picker-test.js b/packages/web-components/src/components/date-picker/__tests__/date-picker-test.js
@@ -126,6 +126,25 @@ describe('cds-date-picker', () => {
       expect(el).to.exist;
     });
 
+    it('should include the weekday in the calendar day aria-label', async () => {
+      const el = await fixture(html`
+        <cds-date-picker value="2026-04-15">
+          <cds-date-picker-input
+            kind="single"
+            label-text="Date"
+            placeholder="mm/dd/yyyy">
+          </cds-date-picker-input>
+        </cds-date-picker>
+      `);
+      await el.updateComplete;
+
+      const day = el.calendar?.calendarContainer?.querySelector(
+        '[aria-label="Wednesday, April 15, 2026"]'
+      );
+
+      expect(day).to.exist;
+    });
+
     it('should handle value changes', async () => {
       const el = await fixture(html`
         <cds-date-picker value="2024-01-15">
diff --git a/packages/web-components/src/components/date-picker/date-picker.ts b/packages/web-components/src/components/date-picker/date-picker.ts
@@ -202,6 +202,8 @@ class CDSDatePicker extends HostListenerMixin(FormMixin(LitElement)) {
       : enabledRange.split('/');
     return {
       allowInput: this.allowInput,
+      ariaDateFormat: (this.constructor as typeof CDSDatePicker)
+        .defaultAriaDateFormat,
       closeOnSelect: this.closeOnSelect,
       dateFormat:
         this.dateFormat ??
@@ -663,6 +665,11 @@ class CDSDatePicker extends HostListenerMixin(FormMixin(LitElement)) {
    */
   static classNoBorder = 'no-border';
 
+  /**
+   * The default aria date format.
+   */
+  static defaultAriaDateFormat = 'l, F j, Y';
+
   /**
    * The default date format.
    */
