@instructure/ui-calendar 11.7.3-snapshot-39 → 11.7.3-snapshot-41

package/CHANGELOG.md

@@ -3,12 +3,13 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [11.7.3-snapshot-39](https://github.com/instructure/instructure-ui/compare/v11.7.2...v11.7.3-snapshot-39) (2026-05-07)
+## [11.7.3-snapshot-41](https://github.com/instructure/instructure-ui/compare/v11.7.2...v11.7.3-snapshot-41) (2026-05-07)
 
 
 ### Bug Fixes
 
 * **many:** update dependencies, remove lots of Babel plugins, remove Webpack 4 support ([f916fca](https://github.com/instructure/instructure-ui/commit/f916fcafdddcb2d7de401f93e8ff92cfdfa47bba))
+* **ui-date-time-input,ui-date-input,ui-calendar:** set missing aria-selected on calendar days, BREAKING CHANGE: add mandatory prop selectedLabel, change datePickerDialog prop to mandatory ([08abed5](https://github.com/instructure/instructure-ui/commit/08abed5e8c8b29aecab0368e01e8e4ffd0c7fda7))
 
 
 

package/es/Calendar/v1/Day/index.js

@@ -116,6 +116,7 @@ let Day = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class
       interaction,
       isOutsideMonth,
       isSelected,
+      selectedLabel,
       isToday,
       onClick,
       onKeyDown,
@@ -148,7 +149,7 @@ let Day = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class
       children: _jsx("span", {
         css: styles?.day,
         children: _jsx(AccessibleContent, {
-          alt: label,
+          alt: selectedLabel && isSelected ? `${label}, ${selectedLabel}` : label,
           children: callRenderProp(children)
         })
       })

package/es/Calendar/v1/Day/props.js

@@ -22,5 +22,5 @@
  * SOFTWARE.
  */
 
-const allowedProps = ['children', 'date', 'label', 'interaction', 'isSelected', 'isToday', 'isOutsideMonth', 'onClick', 'onKeyDown', 'elementRef', 'as'];
+const allowedProps = ['children', 'date', 'label', 'interaction', 'isSelected', 'selectedLabel', 'isToday', 'isOutsideMonth', 'onClick', 'onKeyDown', 'elementRef', 'as'];
 export { allowedProps };

package/es/Calendar/v1/index.js

@@ -328,8 +328,12 @@ let Calendar = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
       children: row.map((day, i) => _jsx("td", {
         role: role,
         children: role === 'presentation' ? safeCloneElement(day, {
-          'aria-describedby': this._weekdayHeaderIds[i]
-        }) : day
+          'aria-describedby': this._weekdayHeaderIds[i],
+          role: 'option'
+        }) : safeCloneElement(day, {
+          'aria-describedby': this._weekdayHeaderIds[i],
+          role: 'button'
+        })
       }, day.props.date))
     }, `row${row[0].props.date}`));
   }
@@ -376,7 +380,8 @@ let Calendar = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
   }
   renderDefaultdays() {
     const {
-      selectedDate
+      selectedDate,
+      selectedLabel
     } = this.props;
     const {
       visibleMonth,
@@ -416,6 +421,7 @@ let Calendar = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
         isOutsideMonth: !date.isSame(visibleMonth, 'month'),
         label: date.format('D MMMM YYYY') // used by screen readers
         ,
+        selectedLabel: selectedLabel,
         onClick: this.handleDayClick,
         interaction: this.isDisabledDate(date) ? 'disabled' : 'enabled',
         children: date.format('DD')

package/es/Calendar/v1/props.js

@@ -22,5 +22,5 @@
  * SOFTWARE.
  */
 
-const allowedProps = ['as', 'children', 'currentDate', 'disabledDates', 'locale', 'onDateSelected', 'onRequestRenderNextMonth', 'onRequestRenderPrevMonth', 'renderNavigationLabel', 'renderNextMonthButton', 'renderPrevMonthButton', 'renderWeekdayLabels', 'role', 'selectedDate', 'timezone', 'visibleMonth'];
+const allowedProps = ['as', 'children', 'currentDate', 'disabledDates', 'locale', 'onDateSelected', 'onRequestRenderNextMonth', 'onRequestRenderPrevMonth', 'renderNavigationLabel', 'renderNextMonthButton', 'renderPrevMonthButton', 'renderWeekdayLabels', 'role', 'selectedDate', 'selectedLabel', 'timezone', 'visibleMonth'];
 export { allowedProps };

package/es/Calendar/v2/Day/index.js

@@ -115,6 +115,7 @@ let Day = (_dec = withStyleNew(generateStyle), _dec(_class = class Day extends C
       interaction,
       isOutsideMonth,
       isSelected,
+      selectedLabel,
       isToday,
       onClick,
       onKeyDown,
@@ -147,7 +148,7 @@ let Day = (_dec = withStyleNew(generateStyle), _dec(_class = class Day extends C
       children: _jsx("span", {
         css: styles?.day,
         children: _jsx(AccessibleContent, {
-          alt: label,
+          alt: selectedLabel && isSelected ? `${label}, ${selectedLabel}` : label,
           children: callRenderProp(children)
         })
       })

package/es/Calendar/v2/Day/props.js

@@ -22,5 +22,5 @@
  * SOFTWARE.
  */
 
-const allowedProps = ['children', 'date', 'label', 'interaction', 'isSelected', 'isToday', 'isOutsideMonth', 'onClick', 'onKeyDown', 'elementRef', 'as'];
+const allowedProps = ['children', 'date', 'label', 'interaction', 'isSelected', 'selectedLabel', 'isToday', 'isOutsideMonth', 'onClick', 'onKeyDown', 'elementRef', 'as'];
 export { allowedProps };

package/es/Calendar/v2/index.js

@@ -322,13 +322,29 @@ let Calendar = (_dec = withDeterministicId(), _dec2 = withStyleNew(generateStyle
       if (!days[index]) days.push([]);
       days[index].push(day);
       return days; // 7xN 2D array of `Day`s
-    }, []).map(row => _jsx("tr", {
+    }, [])
+    // TODO: Implement proper WAI-ARIA grid pattern for table mode to enable aria-selected on days.
+    // Currently in table mode, days use role="button" which does not support aria-selected
+    // (axe violation), so selection is announced via selectedLabel text only.
+    //
+    // To implement properly (per https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog/):
+    //   1. Add role="grid" to the <table> in table mode (renderBody)
+    //   2. Add role="row" to each <tr>
+    //   3. Set role="gridcell" + aria-selected on each <td> (not on the Day)
+    //   4. Keep Day as role="button" inside the gridcell
+    // This allows aria-selected to live on the <td role="gridcell"> which is spec-correct,
+    // while the Day button remains the interactive element.
+    .map(row => _jsx("tr", {
       role: role,
       children: row.map((day, i) => _jsx("td", {
         role: role,
         children: role === 'presentation' ? safeCloneElement(day, {
-          'aria-describedby': this._weekdayHeaderIds[i]
-        }) : day
+          'aria-describedby': this._weekdayHeaderIds[i],
+          role: 'option'
+        }) : safeCloneElement(day, {
+          'aria-describedby': this._weekdayHeaderIds[i],
+          role: 'button'
+        })
       }, day.props.date))
     }, `row${row[0].props.date}`));
   }
@@ -415,6 +431,7 @@ let Calendar = (_dec = withDeterministicId(), _dec2 = withStyleNew(generateStyle
         isOutsideMonth: !date.isSame(visibleMonth, 'month'),
         label: date.format('D MMMM YYYY') // used by screen readers
         ,
+        selectedLabel: this.props.selectedLabel,
         onClick: this.handleDayClick,
         interaction: this.isDisabledDate(date) ? 'disabled' : 'enabled',
         children: date.format('DD')

package/es/Calendar/v2/props.js

@@ -22,5 +22,5 @@
  * SOFTWARE.
  */
 
-const allowedProps = ['as', 'children', 'currentDate', 'disabledDates', 'locale', 'onDateSelected', 'onRequestRenderNextMonth', 'onRequestRenderPrevMonth', 'renderNavigationLabel', 'renderNextMonthButton', 'renderPrevMonthButton', 'renderWeekdayLabels', 'role', 'selectedDate', 'timezone', 'visibleMonth'];
+const allowedProps = ['as', 'children', 'currentDate', 'disabledDates', 'locale', 'onDateSelected', 'onRequestRenderNextMonth', 'onRequestRenderPrevMonth', 'renderNavigationLabel', 'renderNextMonthButton', 'renderPrevMonthButton', 'renderWeekdayLabels', 'role', 'selectedDate', 'selectedLabel', 'timezone', 'visibleMonth'];
 export { allowedProps };

package/lib/Calendar/v1/Day/index.js

@@ -124,6 +124,7 @@ let Day = exports.Day = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.
       interaction,
       isOutsideMonth,
       isSelected,
+      selectedLabel,
       isToday,
       onClick,
       onKeyDown,
@@ -156,7 +157,7 @@ let Day = exports.Day = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.
       children: (0, _jsxRuntime.jsx)("span", {
         css: styles?.day,
         children: (0, _jsxRuntime.jsx)(_AccessibleContent.AccessibleContent, {
-          alt: label,
+          alt: selectedLabel && isSelected ? `${label}, ${selectedLabel}` : label,
           children: (0, _callRenderProp.callRenderProp)(children)
         })
       })

package/lib/Calendar/v1/Day/props.js

@@ -28,4 +28,4 @@ exports.allowedProps = void 0;
  * SOFTWARE.
  */
 
-const allowedProps = exports.allowedProps = ['children', 'date', 'label', 'interaction', 'isSelected', 'isToday', 'isOutsideMonth', 'onClick', 'onKeyDown', 'elementRef', 'as'];
+const allowedProps = exports.allowedProps = ['children', 'date', 'label', 'interaction', 'isSelected', 'selectedLabel', 'isToday', 'isOutsideMonth', 'onClick', 'onKeyDown', 'elementRef', 'as'];

package/lib/Calendar/v1/index.js

@@ -339,8 +339,12 @@ let Calendar = exports.Calendar = (_dec = (0, _withDeterministicId.withDetermini
       children: row.map((day, i) => (0, _jsxRuntime.jsx)("td", {
         role: role,
         children: role === 'presentation' ? (0, _safeCloneElement.safeCloneElement)(day, {
-          'aria-describedby': this._weekdayHeaderIds[i]
-        }) : day
+          'aria-describedby': this._weekdayHeaderIds[i],
+          role: 'option'
+        }) : (0, _safeCloneElement.safeCloneElement)(day, {
+          'aria-describedby': this._weekdayHeaderIds[i],
+          role: 'button'
+        })
       }, day.props.date))
     }, `row${row[0].props.date}`));
   }
@@ -387,7 +391,8 @@ let Calendar = exports.Calendar = (_dec = (0, _withDeterministicId.withDetermini
   }
   renderDefaultdays() {
     const {
-      selectedDate
+      selectedDate,
+      selectedLabel
     } = this.props;
     const {
       visibleMonth,
@@ -427,6 +432,7 @@ let Calendar = exports.Calendar = (_dec = (0, _withDeterministicId.withDetermini
         isOutsideMonth: !date.isSame(visibleMonth, 'month'),
         label: date.format('D MMMM YYYY') // used by screen readers
         ,
+        selectedLabel: selectedLabel,
         onClick: this.handleDayClick,
         interaction: this.isDisabledDate(date) ? 'disabled' : 'enabled',
         children: date.format('DD')

package/lib/Calendar/v1/props.js

@@ -28,4 +28,4 @@ exports.allowedProps = void 0;
  * SOFTWARE.
  */
 
-const allowedProps = exports.allowedProps = ['as', 'children', 'currentDate', 'disabledDates', 'locale', 'onDateSelected', 'onRequestRenderNextMonth', 'onRequestRenderPrevMonth', 'renderNavigationLabel', 'renderNextMonthButton', 'renderPrevMonthButton', 'renderWeekdayLabels', 'role', 'selectedDate', 'timezone', 'visibleMonth'];
+const allowedProps = exports.allowedProps = ['as', 'children', 'currentDate', 'disabledDates', 'locale', 'onDateSelected', 'onRequestRenderNextMonth', 'onRequestRenderPrevMonth', 'renderNavigationLabel', 'renderNextMonthButton', 'renderPrevMonthButton', 'renderWeekdayLabels', 'role', 'selectedDate', 'selectedLabel', 'timezone', 'visibleMonth'];

package/lib/Calendar/v2/Day/index.js

@@ -123,6 +123,7 @@ let Day = exports.Day = (_dec = (0, _emotion.withStyleNew)(_styles.default), _de
       interaction,
       isOutsideMonth,
       isSelected,
+      selectedLabel,
       isToday,
       onClick,
       onKeyDown,
@@ -155,7 +156,7 @@ let Day = exports.Day = (_dec = (0, _emotion.withStyleNew)(_styles.default), _de
       children: (0, _jsxRuntime.jsx)("span", {
         css: styles?.day,
         children: (0, _jsxRuntime.jsx)(_AccessibleContent.AccessibleContent, {
-          alt: label,
+          alt: selectedLabel && isSelected ? `${label}, ${selectedLabel}` : label,
           children: (0, _callRenderProp.callRenderProp)(children)
         })
       })

package/lib/Calendar/v2/Day/props.js

@@ -28,4 +28,4 @@ exports.allowedProps = void 0;
  * SOFTWARE.
  */
 
-const allowedProps = exports.allowedProps = ['children', 'date', 'label', 'interaction', 'isSelected', 'isToday', 'isOutsideMonth', 'onClick', 'onKeyDown', 'elementRef', 'as'];
+const allowedProps = exports.allowedProps = ['children', 'date', 'label', 'interaction', 'isSelected', 'selectedLabel', 'isToday', 'isOutsideMonth', 'onClick', 'onKeyDown', 'elementRef', 'as'];

package/lib/Calendar/v2/index.js

@@ -332,13 +332,29 @@ let Calendar = exports.Calendar = (_dec = (0, _withDeterministicId.withDetermini
       if (!days[index]) days.push([]);
       days[index].push(day);
       return days; // 7xN 2D array of `Day`s
-    }, []).map(row => (0, _jsxRuntime.jsx)("tr", {
+    }, [])
+    // TODO: Implement proper WAI-ARIA grid pattern for table mode to enable aria-selected on days.
+    // Currently in table mode, days use role="button" which does not support aria-selected
+    // (axe violation), so selection is announced via selectedLabel text only.
+    //
+    // To implement properly (per https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog/):
+    //   1. Add role="grid" to the <table> in table mode (renderBody)
+    //   2. Add role="row" to each <tr>
+    //   3. Set role="gridcell" + aria-selected on each <td> (not on the Day)
+    //   4. Keep Day as role="button" inside the gridcell
+    // This allows aria-selected to live on the <td role="gridcell"> which is spec-correct,
+    // while the Day button remains the interactive element.
+    .map(row => (0, _jsxRuntime.jsx)("tr", {
       role: role,
       children: row.map((day, i) => (0, _jsxRuntime.jsx)("td", {
         role: role,
         children: role === 'presentation' ? (0, _safeCloneElement.safeCloneElement)(day, {
-          'aria-describedby': this._weekdayHeaderIds[i]
-        }) : day
+          'aria-describedby': this._weekdayHeaderIds[i],
+          role: 'option'
+        }) : (0, _safeCloneElement.safeCloneElement)(day, {
+          'aria-describedby': this._weekdayHeaderIds[i],
+          role: 'button'
+        })
       }, day.props.date))
     }, `row${row[0].props.date}`));
   }
@@ -425,6 +441,7 @@ let Calendar = exports.Calendar = (_dec = (0, _withDeterministicId.withDetermini
         isOutsideMonth: !date.isSame(visibleMonth, 'month'),
         label: date.format('D MMMM YYYY') // used by screen readers
         ,
+        selectedLabel: this.props.selectedLabel,
         onClick: this.handleDayClick,
         interaction: this.isDisabledDate(date) ? 'disabled' : 'enabled',
         children: date.format('DD')

package/lib/Calendar/v2/props.js

@@ -28,4 +28,4 @@ exports.allowedProps = void 0;
  * SOFTWARE.
  */
 
-const allowedProps = exports.allowedProps = ['as', 'children', 'currentDate', 'disabledDates', 'locale', 'onDateSelected', 'onRequestRenderNextMonth', 'onRequestRenderPrevMonth', 'renderNavigationLabel', 'renderNextMonthButton', 'renderPrevMonthButton', 'renderWeekdayLabels', 'role', 'selectedDate', 'timezone', 'visibleMonth'];
+const allowedProps = exports.allowedProps = ['as', 'children', 'currentDate', 'disabledDates', 'locale', 'onDateSelected', 'onRequestRenderNextMonth', 'onRequestRenderPrevMonth', 'renderNavigationLabel', 'renderNextMonthButton', 'renderPrevMonthButton', 'renderWeekdayLabels', 'role', 'selectedDate', 'selectedLabel', 'timezone', 'visibleMonth'];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-calendar",
-  "version": "11.7.3-snapshot-39",
+  "version": "11.7.3-snapshot-41",
   "description": "A calendar component.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -15,27 +15,27 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.29.2",
-    "@instructure/console": "11.7.3-snapshot-39",
-    "@instructure/emotion": "11.7.3-snapshot-39",
-    "@instructure/shared-types": "11.7.3-snapshot-39",
-    "@instructure/ui-a11y-content": "11.7.3-snapshot-39",
-    "@instructure/ui-buttons": "11.7.3-snapshot-39",
-    "@instructure/ui-i18n": "11.7.3-snapshot-39",
-    "@instructure/ui-react-utils": "11.7.3-snapshot-39",
-    "@instructure/ui-simple-select": "11.7.3-snapshot-39",
-    "@instructure/ui-themes": "11.7.3-snapshot-39",
-    "@instructure/ui-utils": "11.7.3-snapshot-39",
-    "@instructure/ui-view": "11.7.3-snapshot-39",
-    "@instructure/uid": "11.7.3-snapshot-39",
-    "@instructure/ui-icons": "11.7.3-snapshot-39"
+    "@instructure/console": "11.7.3-snapshot-41",
+    "@instructure/shared-types": "11.7.3-snapshot-41",
+    "@instructure/emotion": "11.7.3-snapshot-41",
+    "@instructure/ui-buttons": "11.7.3-snapshot-41",
+    "@instructure/ui-a11y-content": "11.7.3-snapshot-41",
+    "@instructure/ui-icons": "11.7.3-snapshot-41",
+    "@instructure/ui-simple-select": "11.7.3-snapshot-41",
+    "@instructure/ui-i18n": "11.7.3-snapshot-41",
+    "@instructure/ui-themes": "11.7.3-snapshot-41",
+    "@instructure/ui-react-utils": "11.7.3-snapshot-41",
+    "@instructure/ui-view": "11.7.3-snapshot-41",
+    "@instructure/ui-utils": "11.7.3-snapshot-41",
+    "@instructure/uid": "11.7.3-snapshot-41"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "@testing-library/user-event": "^14.6.1",
     "vitest": "^3.2.2",
-    "@instructure/ui-color-utils": "11.7.3-snapshot-39",
-    "@instructure/ui-babel-preset": "11.7.3-snapshot-39"
+    "@instructure/ui-babel-preset": "11.7.3-snapshot-41",
+    "@instructure/ui-color-utils": "11.7.3-snapshot-41"
   },
   "peerDependencies": {
     "react": ">=18 <=19"

package/src/Calendar/v1/Day/index.tsx

@@ -117,6 +117,7 @@ class Day extends Component<CalendarDayProps> {
       interaction,
       isOutsideMonth,
       isSelected,
+      selectedLabel,
       isToday,
       onClick,
       onKeyDown,
@@ -164,7 +165,11 @@ class Day extends Component<CalendarDayProps> {
         data-cid="Calendar.Day"
       >
         <span css={styles?.day}>
-          <AccessibleContent alt={label}>
+          <AccessibleContent
+            alt={
+              selectedLabel && isSelected ? `${label}, ${selectedLabel}` : label
+            }
+          >
             {callRenderProp(children)}
           </AccessibleContent>
         </span>

package/src/Calendar/v1/Day/props.ts

@@ -57,6 +57,11 @@ type CalendarDayOwnProps = {
    * Is the `<Calendar.Day />` selected
    */
   isSelected?: boolean
+  /**
+   * Screen reader label appended to the date label when the day is selected.
+   * Used to announce the selected state to assistive technologies.
+   */
+  selectedLabel?: string
   /**
    * Is the `<Calendar.Day />` today
    */
@@ -114,6 +119,7 @@ const allowedProps: AllowedPropKeys = [
   'label',
   'interaction',
   'isSelected',
+  'selectedLabel',
   'isToday',
   'isOutsideMonth',
   'onClick',

package/src/Calendar/v1/README.md

@@ -33,6 +33,7 @@ type: example
         currentDate="2023-12-15"
         disabledDates={['2023-12-22', '2023-12-12', '2023-12-11']}
         selectedDate={selectedDate}
+        selectedLabel="selected"
         onRequestRenderNextMonth={(_e, requestedMonth) =>
           setVisibleMonth(requestedMonth)
         }
@@ -64,6 +65,7 @@ type: example
         currentDate="2024-02-29"
         disabledDates={['2023-12-22', '2023-12-12', '2023-12-11']}
         selectedDate={selectedDate}
+        selectedLabel="selected"
         onRequestRenderNextMonth={(_e, requestedMonth) =>
           setVisibleMonth(requestedMonth)
         }

package/src/Calendar/v1/index.tsx

@@ -436,9 +436,13 @@ class Calendar extends Component<CalendarProps, CalendarState> {
             <td key={day.props.date} role={role}>
               {role === 'presentation'
                 ? safeCloneElement(day, {
-                    'aria-describedby': this._weekdayHeaderIds[i]
+                    'aria-describedby': this._weekdayHeaderIds[i],
+                    role: 'option'
                   })
-                : day}
+                : safeCloneElement(day, {
+                    'aria-describedby': this._weekdayHeaderIds[i],
+                    role: 'button'
+                  })}
             </td>
           ))}
         </tr>
@@ -488,7 +492,7 @@ class Calendar extends Component<CalendarProps, CalendarState> {
   }
 
   renderDefaultdays() {
-    const { selectedDate } = this.props
+    const { selectedDate, selectedLabel } = this.props
     const { visibleMonth, today } = this.state
     // Sets it to the first local day of the week counting back from the start of the month.
     // Note that first day depends on the locale, e.g. it's Sunday in the US and
@@ -525,6 +529,7 @@ class Calendar extends Component<CalendarProps, CalendarState> {
           isToday={date.isSame(today, 'day')}
           isOutsideMonth={!date.isSame(visibleMonth, 'month')}
           label={date.format('D MMMM YYYY')} // used by screen readers
+          selectedLabel={selectedLabel}
           onClick={this.handleDayClick}
           interaction={this.isDisabledDate(date) ? 'disabled' : 'enabled'}
         >

package/src/Calendar/v1/props.ts

@@ -130,6 +130,11 @@ type CalendarOwnProps = {
    * ISO date string for the selected date. It needs onDateSelected to be specified too.
    */
   selectedDate?: string
+  /**
+   * Screen reader label appended to the date label when the day is selected.
+   * Used to announce the selected state to assistive technologies.
+   */
+  selectedLabel?: string
   /**
    * A timezone identifier in the format: *Area/Location*
    *
@@ -194,6 +199,7 @@ const allowedProps: AllowedPropKeys = [
   'renderWeekdayLabels',
   'role',
   'selectedDate',
+  'selectedLabel',
   'timezone',
   'visibleMonth'
 ]

package/src/Calendar/v2/Day/index.tsx

@@ -116,6 +116,7 @@ class Day extends Component<CalendarDayProps> {
       interaction,
       isOutsideMonth,
       isSelected,
+      selectedLabel,
       isToday,
       onClick,
       onKeyDown,
@@ -163,7 +164,11 @@ class Day extends Component<CalendarDayProps> {
         data-cid="Calendar.Day"
       >
         <span css={styles?.day}>
-          <AccessibleContent alt={label}>
+          <AccessibleContent
+            alt={
+              selectedLabel && isSelected ? `${label}, ${selectedLabel}` : label
+            }
+          >
             {callRenderProp(children)}
           </AccessibleContent>
         </span>

package/src/Calendar/v2/Day/props.ts

@@ -57,6 +57,11 @@ type CalendarDayOwnProps = {
    * Is the `<Calendar.Day />` selected
    */
   isSelected?: boolean
+  /**
+   * Screen reader label appended to the date label when the day is selected.
+   * Used to announce the selected state to assistive technologies.
+   */
+  selectedLabel: string
   /**
    * Is the `<Calendar.Day />` today
    */
@@ -117,6 +122,7 @@ const allowedProps: AllowedPropKeys = [
   'label',
   'interaction',
   'isSelected',
+  'selectedLabel',
   'isToday',
   'isOutsideMonth',
   'onClick',

package/src/Calendar/v2/README.md

@@ -33,6 +33,7 @@ type: example
         currentDate="2023-12-15"
         disabledDates={['2023-12-22', '2023-12-12', '2023-12-11']}
         selectedDate={selectedDate}
+        selectedLabel="selected"
         onRequestRenderNextMonth={(_e, requestedMonth) =>
           setVisibleMonth(requestedMonth)
         }
@@ -64,6 +65,7 @@ type: example
         currentDate="2024-02-29"
         disabledDates={['2023-12-22', '2023-12-12', '2023-12-11']}
         selectedDate={selectedDate}
+        selectedLabel="selected"
         onRequestRenderNextMonth={(_e, requestedMonth) =>
           setVisibleMonth(requestedMonth)
         }

package/src/Calendar/v2/index.tsx

@@ -422,26 +422,43 @@ class Calendar extends Component<CalendarProps, CalendarState> {
       `[Calendar] should have exactly ${Calendar.DAY_COUNT} children. ${length} provided.`
     )
 
-    return childrenArr
-      .reduce((days: ReactElement<any>[][], day, i) => {
-        const index = Math.floor(i / 7)
-        if (!days[index]) days.push([])
-        days[index].push(day)
-        return days // 7xN 2D array of `Day`s
-      }, [])
-      .map((row) => (
-        <tr key={`row${row[0].props.date}`} role={role}>
-          {row.map((day, i) => (
-            <td key={day.props.date} role={role}>
-              {role === 'presentation'
-                ? safeCloneElement(day, {
-                    'aria-describedby': this._weekdayHeaderIds[i]
-                  })
-                : day}
-            </td>
-          ))}
-        </tr>
-      ))
+    return (
+      childrenArr
+        .reduce((days: ReactElement<any>[][], day, i) => {
+          const index = Math.floor(i / 7)
+          if (!days[index]) days.push([])
+          days[index].push(day)
+          return days // 7xN 2D array of `Day`s
+        }, [])
+        // TODO: Implement proper WAI-ARIA grid pattern for table mode to enable aria-selected on days.
+        // Currently in table mode, days use role="button" which does not support aria-selected
+        // (axe violation), so selection is announced via selectedLabel text only.
+        //
+        // To implement properly (per https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog/):
+        //   1. Add role="grid" to the <table> in table mode (renderBody)
+        //   2. Add role="row" to each <tr>
+        //   3. Set role="gridcell" + aria-selected on each <td> (not on the Day)
+        //   4. Keep Day as role="button" inside the gridcell
+        // This allows aria-selected to live on the <td role="gridcell"> which is spec-correct,
+        // while the Day button remains the interactive element.
+        .map((row) => (
+          <tr key={`row${row[0].props.date}`} role={role}>
+            {row.map((day, i) => (
+              <td key={day.props.date} role={role}>
+                {role === 'presentation'
+                  ? safeCloneElement(day, {
+                      'aria-describedby': this._weekdayHeaderIds[i],
+                      role: 'option'
+                    })
+                  : safeCloneElement(day, {
+                      'aria-describedby': this._weekdayHeaderIds[i],
+                      role: 'button'
+                    })}
+              </td>
+            ))}
+          </tr>
+        ))
+    )
   }
 
   locale(): string {
@@ -524,6 +541,7 @@ class Calendar extends Component<CalendarProps, CalendarState> {
           isToday={date.isSame(today, 'day')}
           isOutsideMonth={!date.isSame(visibleMonth, 'month')}
           label={date.format('D MMMM YYYY')} // used by screen readers
+          selectedLabel={this.props.selectedLabel}
           onClick={this.handleDayClick}
           interaction={this.isDisabledDate(date) ? 'disabled' : 'enabled'}
         >

package/src/Calendar/v2/props.ts

@@ -130,6 +130,11 @@ type CalendarOwnProps = {
    * ISO date string for the selected date. It needs onDateSelected to be specified too.
    */
   selectedDate?: string
+  /**
+   * Screen reader label appended to the date label when the day is selected.
+   * Used to announce the selected state to assistive technologies.
+   */
+  selectedLabel: string
   /**
    * A timezone identifier in the format: *Area/Location*
    *
@@ -194,6 +199,7 @@ const allowedProps: AllowedPropKeys = [
   'renderWeekdayLabels',
   'role',
   'selectedDate',
+  'selectedLabel',
   'timezone',
   'visibleMonth'
 ]