@instructure/ui-date-time-input 11.7.3-snapshot-38 → 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-38](https://github.com/instructure/instructure-ui/compare/v11.7.2...v11.7.3-snapshot-38) (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))
 
 
 ### Features

package/es/DateTimeInput/v1/index.js

@@ -359,6 +359,9 @@ class DateTimeInput extends Component {
     });
   };
   renderDays() {
+    const {
+      selectedLabel
+    } = this.props;
     const renderedDate = this.state.renderedDate;
     // 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
@@ -394,6 +397,7 @@ class DateTimeInput extends Component {
         isOutsideMonth: !date.isSame(renderedDate, '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/DateTimeInput/v1/props.js

@@ -22,5 +22,5 @@
  * SOFTWARE.
  */
 
-const allowedProps = ['description', 'dateRenderLabel', 'prevMonthLabel', 'nextMonthLabel', 'datePlaceholder', 'timePlaceholder', 'dateFormat', 'interaction', 'timeRenderLabel', 'timeStep', 'timeFormat', 'locale', 'timezone', 'invalidDateTimeMessage', 'showMessages', 'messages', 'messageFormat', 'layout', 'rowSpacing', 'colSpacing', 'value', 'defaultValue', 'renderWeekdayLabels', 'isRequired', 'onChange', 'dateInputRef', 'timeInputRef', 'onBlur', 'disabledDates', 'disabledDateTimeMessage', 'allowNonStepInput', 'reset'];
+const allowedProps = ['description', 'dateRenderLabel', 'prevMonthLabel', 'nextMonthLabel', 'datePlaceholder', 'timePlaceholder', 'dateFormat', 'interaction', 'timeRenderLabel', 'timeStep', 'timeFormat', 'locale', 'timezone', 'invalidDateTimeMessage', 'showMessages', 'messages', 'messageFormat', 'layout', 'rowSpacing', 'colSpacing', 'value', 'defaultValue', 'renderWeekdayLabels', 'isRequired', 'onChange', 'dateInputRef', 'timeInputRef', 'onBlur', 'disabledDates', 'disabledDateTimeMessage', 'allowNonStepInput', 'reset', 'selectedLabel'];
 export { allowedProps };

package/lib/DateTimeInput/v1/index.js

@@ -366,6 +366,9 @@ category: components
     });
   };
   renderDays() {
+    const {
+      selectedLabel
+    } = this.props;
     const renderedDate = this.state.renderedDate;
     // 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
@@ -401,6 +404,7 @@ category: components
         isOutsideMonth: !date.isSame(renderedDate, '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/DateTimeInput/v1/props.js

@@ -28,4 +28,4 @@ exports.allowedProps = void 0;
  * SOFTWARE.
  */
 
-const allowedProps = exports.allowedProps = ['description', 'dateRenderLabel', 'prevMonthLabel', 'nextMonthLabel', 'datePlaceholder', 'timePlaceholder', 'dateFormat', 'interaction', 'timeRenderLabel', 'timeStep', 'timeFormat', 'locale', 'timezone', 'invalidDateTimeMessage', 'showMessages', 'messages', 'messageFormat', 'layout', 'rowSpacing', 'colSpacing', 'value', 'defaultValue', 'renderWeekdayLabels', 'isRequired', 'onChange', 'dateInputRef', 'timeInputRef', 'onBlur', 'disabledDates', 'disabledDateTimeMessage', 'allowNonStepInput', 'reset'];
+const allowedProps = exports.allowedProps = ['description', 'dateRenderLabel', 'prevMonthLabel', 'nextMonthLabel', 'datePlaceholder', 'timePlaceholder', 'dateFormat', 'interaction', 'timeRenderLabel', 'timeStep', 'timeFormat', 'locale', 'timezone', 'invalidDateTimeMessage', 'showMessages', 'messages', 'messageFormat', 'layout', 'rowSpacing', 'colSpacing', 'value', 'defaultValue', 'renderWeekdayLabels', 'isRequired', 'onChange', 'dateInputRef', 'timeInputRef', 'onBlur', 'disabledDates', 'disabledDateTimeMessage', 'allowNonStepInput', 'reset', 'selectedLabel'];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-date-time-input",
-  "version": "11.7.3-snapshot-38",
+  "version": "11.7.3-snapshot-41",
   "description": "A UI component that allows to select date and time.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -15,25 +15,25 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.29.2",
-    "@instructure/console": "11.7.3-snapshot-38",
-    "@instructure/shared-types": "11.7.3-snapshot-38",
-    "@instructure/ui-a11y-content": "11.7.3-snapshot-38",
-    "@instructure/ui-buttons": "11.7.3-snapshot-38",
-    "@instructure/ui-calendar": "11.7.3-snapshot-38",
-    "@instructure/ui-date-input": "11.7.3-snapshot-38",
-    "@instructure/ui-form-field": "11.7.3-snapshot-38",
-    "@instructure/ui-i18n": "11.7.3-snapshot-38",
-    "@instructure/ui-icons": "11.7.3-snapshot-38",
-    "@instructure/ui-react-utils": "11.7.3-snapshot-38",
-    "@instructure/ui-time-select": "11.7.3-snapshot-38",
-    "@instructure/ui-utils": "11.7.3-snapshot-38"
+    "@instructure/console": "11.7.3-snapshot-41",
+    "@instructure/shared-types": "11.7.3-snapshot-41",
+    "@instructure/ui-a11y-content": "11.7.3-snapshot-41",
+    "@instructure/ui-buttons": "11.7.3-snapshot-41",
+    "@instructure/ui-calendar": "11.7.3-snapshot-41",
+    "@instructure/ui-i18n": "11.7.3-snapshot-41",
+    "@instructure/ui-form-field": "11.7.3-snapshot-41",
+    "@instructure/ui-react-utils": "11.7.3-snapshot-41",
+    "@instructure/ui-utils": "11.7.3-snapshot-41",
+    "@instructure/ui-icons": "11.7.3-snapshot-41",
+    "@instructure/ui-time-select": "11.7.3-snapshot-41",
+    "@instructure/ui-date-input": "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-babel-preset": "11.7.3-snapshot-38"
+    "@instructure/ui-babel-preset": "11.7.3-snapshot-41"
   },
   "peerDependencies": {
     "react": ">=18 <=19"

package/src/DateTimeInput/v1/README.md

@@ -34,6 +34,7 @@ type: example
           invalidDateTimeMessage="Invalid date!"
           prevMonthLabel="Previous month"
           nextMonthLabel="Next month"
+          selectedLabel="Selected"
           defaultValue="2018-01-18T13:30"
           layout="columns"
         />
@@ -93,6 +94,7 @@ type: example
             timeRenderLabel="Time"
             prevMonthLabel="Previous month"
             nextMonthLabel="Next month"
+            selectedLabel="Selected"
             onChange={onChange}
             layout="stacked"
             value={value}
@@ -146,6 +148,7 @@ type: example
             timeRenderLabel="Time"
             prevMonthLabel="Previous month"
             nextMonthLabel="Next month"
+            selectedLabel="Selected"
             invalidDateTimeMessage={(dvalue) => {
               return `'${dvalue} is not valid.`
             }}
@@ -219,6 +222,7 @@ type: example
           }
           prevMonthLabel="Previous month"
           nextMonthLabel="Next month"
+          selectedLabel="Selected"
           defaultValue="2022-04-08T13:30"
           layout="columns"
           disabledDates={getDisabledDates}
@@ -254,6 +258,7 @@ type: example
           invalidDateTimeMessage="Invalid date!"
           prevMonthLabel="Previous month"
           nextMonthLabel="Next month"
+          selectedLabel="Selected"
           value={date}
           onChange={(e, newDate) => setDate(newDate)}
           reset={(reset) => (resetFn.current = reset)}

package/src/DateTimeInput/v1/index.tsx

@@ -427,6 +427,7 @@ class DateTimeInput extends Component<DateTimeInputProps, DateTimeInputState> {
   }
 
   renderDays() {
+    const { selectedLabel } = this.props
     const renderedDate = this.state.renderedDate
     // 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
@@ -467,6 +468,7 @@ class DateTimeInput extends Component<DateTimeInputProps, DateTimeInputState> {
           )}
           isOutsideMonth={!date.isSame(renderedDate, 'month')}
           label={date.format('D MMMM YYYY')} // used by screen readers
+          selectedLabel={selectedLabel}
           onClick={this.handleDayClick}
           interaction={this.isDisabledDate(date) ? 'disabled' : 'enabled'}
         >

package/src/DateTimeInput/v1/props.ts

@@ -250,6 +250,11 @@ type DateTimeInputProps = {
    * NOTE: this won't call onChange, so you have to reset the value manually when calling reset
    */
   reset?: (reset: () => void) => void
+  /**
+   * Screen reader label appended to the date label when the day is selected.
+   * Used to announce the selected state to assistive technologies.
+   */
+  selectedLabel?: string
 }
 
 type DateTimeInputState = {
@@ -309,7 +314,8 @@ const allowedProps: AllowedPropKeys = [
   'disabledDates',
   'disabledDateTimeMessage',
   'allowNonStepInput',
-  'reset'
+  'reset',
+  'selectedLabel'
 ]
 
 export type { DateTimeInputProps, DateTimeInputState }

package/src/DateTimeInput/v2/README.md

@@ -32,7 +32,13 @@ type: example
           dateRenderLabel="Date"
           timeRenderLabel="Time"
           invalidDateTimeMessage="Invalid date!"
-          screenReaderLabels={{ calendarIcon: 'Open calendar', prevMonthButton: 'Previous month', nextMonthButton: 'Next month' }}
+          screenReaderLabels={{
+            calendarIcon: 'Open calendar',
+            prevMonthButton: 'Previous month',
+            nextMonthButton: 'Next month',
+            datePickerDialog: 'Date picker dialog',
+            selectedLabel: 'Selected'
+          }}
           defaultValue="2018-01-18T13:30"
           layout="columns"
         />
@@ -91,7 +97,13 @@ type: example
             datePlaceholder="Choose"
             dateRenderLabel="Date"
             timeRenderLabel="Time"
-            screenReaderLabels={{ calendarIcon: 'Open calendar', prevMonthButton: 'Previous month', nextMonthButton: 'Next month' }}
+            screenReaderLabels={{
+              calendarIcon: 'Open calendar',
+              prevMonthButton: 'Previous month',
+              nextMonthButton: 'Next month',
+              datePickerDialog: 'Date picker dialog',
+              selectedLabel: 'Selected'
+            }}
             onChange={onChange}
             layout="stacked"
             value={value}
@@ -119,7 +131,13 @@ type: example
   datePlaceholder="Choose a date"
   dateRenderLabel="Date"
   timeRenderLabel="Time"
-  screenReaderLabels={{ calendarIcon: 'Open calendar', prevMonthButton: 'Previous month', nextMonthButton: 'Next month' }}
+  screenReaderLabels={{
+    calendarIcon: 'Open calendar',
+    prevMonthButton: 'Previous month',
+    nextMonthButton: 'Next month',
+    datePickerDialog: 'Date picker dialog',
+    selectedLabel: 'Selected'
+  }}
   invalidDateTimeMessage={(dvalue) => { return `'${dvalue} is not valid.` }}
   layout="columns"
   defaultValue="2018-01-18T13:30"
@@ -142,7 +160,13 @@ type: example
             datePlaceholder="Choose a date"
             dateRenderLabel="Date"
             timeRenderLabel="Time"
-            screenReaderLabels={{ calendarIcon: 'Open calendar', prevMonthButton: 'Previous month', nextMonthButton: 'Next month' }}
+            screenReaderLabels={{
+              calendarIcon: 'Open calendar',
+              prevMonthButton: 'Previous month',
+              nextMonthButton: 'Next month',
+              datePickerDialog: 'Date picker dialog',
+              selectedLabel: 'Selected'
+            }}
             invalidDateTimeMessage={(dvalue) => {
               return `'${dvalue} is not valid.`
             }}
@@ -170,7 +194,13 @@ type: example
   timeRenderLabel="Time"
   invalidDateTimeMessage="Invalid date"
   disabledDateTimeMessage="Disabled date"
-  screenReaderLabels={{ calendarIcon: 'Open calendar', prevMonthButton: 'Previous month', nextMonthButton: 'Next month' }}
+  screenReaderLabels={{
+    calendarIcon: 'Open calendar',
+    prevMonthButton: 'Previous month',
+    nextMonthButton: 'Next month',
+    datePickerDialog: 'Date picker dialog',
+    selectedLabel: 'Selected'
+  }}
   defaultValue="2022-04-08T13:30"
   layout="columns"
   disabledDates={['2022-04-01T13:30', '2022-04-03T13:30', '2022-04-04T13:30']}
@@ -213,7 +243,13 @@ type: example
           disabledDateTimeMessage={(rawDateValue) =>
             'Disabled date: ' + rawDateValue
           }
-          screenReaderLabels={{ calendarIcon: 'Open calendar', prevMonthButton: 'Previous month', nextMonthButton: 'Next month' }}
+          screenReaderLabels={{
+            calendarIcon: 'Open calendar',
+            prevMonthButton: 'Previous month',
+            nextMonthButton: 'Next month',
+            datePickerDialog: 'Date picker dialog',
+            selectedLabel: 'Selected'
+          }}
           defaultValue="2022-04-08T13:30"
           layout="columns"
           disabledDates={getDisabledDates}
@@ -247,7 +283,13 @@ type: example
           dateRenderLabel="Date"
           timeRenderLabel="Time"
           invalidDateTimeMessage="Invalid date!"
-          screenReaderLabels={{ calendarIcon: 'Open calendar', prevMonthButton: 'Previous month', nextMonthButton: 'Next month' }}
+          screenReaderLabels={{
+            calendarIcon: 'Open calendar',
+            prevMonthButton: 'Previous month',
+            nextMonthButton: 'Next month',
+            datePickerDialog: 'Date picker dialog',
+            selectedLabel: 'Selected'
+          }}
           value={date}
           onChange={(e, newDate) => setDate(newDate)}
           reset={(reset) => (resetFn.current = reset)}

package/src/DateTimeInput/v2/props.ts

@@ -38,13 +38,14 @@ type DateTimeInputProps = {
    **/
   dateRenderLabel: Renderable
   /**
-   * Accessible labels for the calendar icon button, month navigation buttons, and date picker dialog.
+   * Accessible labels for the calendar icon button, month navigation buttons, selected date, and date picker dialog.
    */
   screenReaderLabels: {
     calendarIcon: string
     prevMonthButton: string
     nextMonthButton: string
-    datePickerDialog?: string
+    datePickerDialog: string
+    selectedLabel: string
   }
   /**
    * HTML placeholder text to display when the date input has no value.