@instructure/ui-date-input 11.7.3-snapshot-39 → 11.7.3-snapshot-42

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-42](https://github.com/instructure/instructure-ui/compare/v11.7.2...v11.7.3-snapshot-42) (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/DateInput/v1/index.js

@@ -265,7 +265,8 @@ let DateInput = (_dec = withStyle(generateStyle, null), _dec(_class = class Date
       value,
       onChange,
       disabledDates,
-      currentDate
+      currentDate,
+      selectedLabel
     } = this.props;
     const isValidDate = value ? DateTime.parse(value, this.locale(), this.timezone()).isValid() : false;
     const noChildrenProps = this.props.children ? {} : {
@@ -288,7 +289,8 @@ let DateInput = (_dec = withStyle(generateStyle, null), _dec(_class = class Date
         renderNavigationLabel,
         renderWeekdayLabels,
         renderNextMonthButton: this.renderMonthNavigationButton('next'),
-        renderPrevMonthButton: this.renderMonthNavigationButton('prev')
+        renderPrevMonthButton: this.renderMonthNavigationButton('prev'),
+        selectedLabel
       }),
       ...noChildrenProps,
       children: this.renderDays(getOptionProps)

package/es/DateInput/v1/props.js

@@ -22,5 +22,5 @@
  * SOFTWARE.
  */
 
-const allowedProps = ['renderLabel', 'value', 'size', 'placeholder', 'onChange', 'onBlur', 'interaction', 'isRequired', 'isInline', 'assistiveText', 'layout', 'width', 'display', 'inputRef', 'messages', 'placement', 'isShowingCalendar', 'onRequestValidateDate', 'onRequestShowCalendar', 'onRequestHideCalendar', 'onRequestSelectNextDay', 'onRequestSelectPrevDay', 'onRequestRenderNextMonth', 'onRequestRenderPrevMonth', 'renderNavigationLabel', 'renderWeekdayLabels', 'renderNextMonthButton', 'renderPrevMonthButton', 'children', 'disabledDates', 'currentDate', 'disabledDateErrorMessage', 'invalidDateErrorMessage', 'locale', 'timezone'];
+const allowedProps = ['renderLabel', 'value', 'size', 'placeholder', 'onChange', 'onBlur', 'interaction', 'isRequired', 'isInline', 'assistiveText', 'layout', 'width', 'display', 'inputRef', 'messages', 'placement', 'isShowingCalendar', 'onRequestValidateDate', 'onRequestShowCalendar', 'onRequestHideCalendar', 'onRequestSelectNextDay', 'onRequestSelectPrevDay', 'onRequestRenderNextMonth', 'onRequestRenderPrevMonth', 'renderNavigationLabel', 'renderWeekdayLabels', 'renderNextMonthButton', 'renderPrevMonthButton', 'children', 'disabledDates', 'currentDate', 'disabledDateErrorMessage', 'invalidDateErrorMessage', 'locale', 'timezone', 'withYearPicker', 'selectedLabel'];
 export { allowedProps };

package/es/DateInput/v2/index.js

@@ -250,6 +250,7 @@ const DateInput = /*#__PURE__*/forwardRef(({
         withYearPicker: withYearPicker,
         onDateSelected: handleDateSelected,
         selectedDate: selectedDate,
+        selectedLabel: screenReaderLabels.selectedLabel,
         disabledDates: disabledDates,
         visibleMonth: selectedDate,
         locale: userLocale,

package/es/DateInput2/v1/index.js

@@ -249,6 +249,7 @@ const DateInput2 = /*#__PURE__*/forwardRef(({
         withYearPicker: withYearPicker,
         onDateSelected: handleDateSelected,
         selectedDate: selectedDate,
+        selectedLabel: screenReaderLabels.selectedLabel,
         disabledDates: disabledDates,
         visibleMonth: selectedDate,
         locale: userLocale,

package/lib/DateInput/v1/index.js

@@ -275,7 +275,8 @@ let DateInput = exports.DateInput = (_dec = (0, _emotion.withStyle)(_styles.defa
       value,
       onChange,
       disabledDates,
-      currentDate
+      currentDate,
+      selectedLabel
     } = this.props;
     const isValidDate = value ? _DateTime.DateTime.parse(value, this.locale(), this.timezone()).isValid() : false;
     const noChildrenProps = this.props.children ? {} : {
@@ -298,7 +299,8 @@ let DateInput = exports.DateInput = (_dec = (0, _emotion.withStyle)(_styles.defa
         renderNavigationLabel,
         renderWeekdayLabels,
         renderNextMonthButton: this.renderMonthNavigationButton('next'),
-        renderPrevMonthButton: this.renderMonthNavigationButton('prev')
+        renderPrevMonthButton: this.renderMonthNavigationButton('prev'),
+        selectedLabel
       }),
       ...noChildrenProps,
       children: this.renderDays(getOptionProps)

package/lib/DateInput/v1/props.js

@@ -28,4 +28,4 @@ exports.allowedProps = void 0;
  * SOFTWARE.
  */
 
-const allowedProps = exports.allowedProps = ['renderLabel', 'value', 'size', 'placeholder', 'onChange', 'onBlur', 'interaction', 'isRequired', 'isInline', 'assistiveText', 'layout', 'width', 'display', 'inputRef', 'messages', 'placement', 'isShowingCalendar', 'onRequestValidateDate', 'onRequestShowCalendar', 'onRequestHideCalendar', 'onRequestSelectNextDay', 'onRequestSelectPrevDay', 'onRequestRenderNextMonth', 'onRequestRenderPrevMonth', 'renderNavigationLabel', 'renderWeekdayLabels', 'renderNextMonthButton', 'renderPrevMonthButton', 'children', 'disabledDates', 'currentDate', 'disabledDateErrorMessage', 'invalidDateErrorMessage', 'locale', 'timezone'];
+const allowedProps = exports.allowedProps = ['renderLabel', 'value', 'size', 'placeholder', 'onChange', 'onBlur', 'interaction', 'isRequired', 'isInline', 'assistiveText', 'layout', 'width', 'display', 'inputRef', 'messages', 'placement', 'isShowingCalendar', 'onRequestValidateDate', 'onRequestShowCalendar', 'onRequestHideCalendar', 'onRequestSelectNextDay', 'onRequestSelectPrevDay', 'onRequestRenderNextMonth', 'onRequestRenderPrevMonth', 'renderNavigationLabel', 'renderWeekdayLabels', 'renderNextMonthButton', 'renderPrevMonthButton', 'children', 'disabledDates', 'currentDate', 'disabledDateErrorMessage', 'invalidDateErrorMessage', 'locale', 'timezone', 'withYearPicker', 'selectedLabel'];

package/lib/DateInput/v2/index.js

@@ -258,6 +258,7 @@ const DateInput = exports.DateInput = /*#__PURE__*/(0, _react.forwardRef)(({
         withYearPicker: withYearPicker,
         onDateSelected: handleDateSelected,
         selectedDate: selectedDate,
+        selectedLabel: screenReaderLabels.selectedLabel,
         disabledDates: disabledDates,
         visibleMonth: selectedDate,
         locale: userLocale,

package/lib/DateInput2/v1/index.js

@@ -257,6 +257,7 @@ const DateInput2 = exports.DateInput2 = /*#__PURE__*/(0, _react.forwardRef)(({
         withYearPicker: withYearPicker,
         onDateSelected: handleDateSelected,
         selectedDate: selectedDate,
+        selectedLabel: screenReaderLabels.selectedLabel,
         disabledDates: disabledDates,
         visibleMonth: selectedDate,
         locale: userLocale,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-date-input",
-  "version": "11.7.3-snapshot-39",
+  "version": "11.7.3-snapshot-42",
   "description": "A UI component library made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -15,28 +15,27 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.29.2",
-    "moment-timezone": "^0.6.2",
-    "@instructure/shared-types": "11.7.3-snapshot-39",
-    "@instructure/emotion": "11.7.3-snapshot-39",
-    "@instructure/ui-form-field": "11.7.3-snapshot-39",
-    "@instructure/ui-i18n": "11.7.3-snapshot-39",
-    "@instructure/ui-calendar": "11.7.3-snapshot-39",
-    "@instructure/ui-icons": "11.7.3-snapshot-39",
-    "@instructure/ui-popover": "11.7.3-snapshot-39",
-    "@instructure/ui-position": "11.7.3-snapshot-39",
-    "@instructure/ui-react-utils": "11.7.3-snapshot-39",
-    "@instructure/ui-selectable": "11.7.3-snapshot-39",
-    "@instructure/ui-utils": "11.7.3-snapshot-39",
-    "@instructure/ui-text-input": "11.7.3-snapshot-39"
+    "@instructure/emotion": "11.7.3-snapshot-42",
+    "@instructure/shared-types": "11.7.3-snapshot-42",
+    "@instructure/ui-calendar": "11.7.3-snapshot-42",
+    "@instructure/ui-i18n": "11.7.3-snapshot-42",
+    "@instructure/ui-form-field": "11.7.3-snapshot-42",
+    "@instructure/ui-icons": "11.7.3-snapshot-42",
+    "@instructure/ui-position": "11.7.3-snapshot-42",
+    "@instructure/ui-popover": "11.7.3-snapshot-42",
+    "@instructure/ui-react-utils": "11.7.3-snapshot-42",
+    "@instructure/ui-selectable": "11.7.3-snapshot-42",
+    "@instructure/ui-utils": "11.7.3-snapshot-42",
+    "@instructure/ui-text-input": "11.7.3-snapshot-42"
   },
   "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-39",
-    "@instructure/ui-buttons": "11.7.3-snapshot-39",
-    "@instructure/ui-scripts": "11.7.3-snapshot-39"
+    "@instructure/ui-babel-preset": "11.7.3-snapshot-42",
+    "@instructure/ui-buttons": "11.7.3-snapshot-42",
+    "@instructure/ui-scripts": "11.7.3-snapshot-42"
   },
   "peerDependencies": {
     "react": ">=18 <=19"

package/src/DateInput/v1/README.md

@@ -207,6 +207,7 @@ class Example extends React.Component {
           isToday={date.isSame(todayDate, 'day')}
           isOutsideMonth={!date.isSame(renderedDate, 'month')}
           label={`${date.format('D')} ${date.format('MMMM')} ${date.format('YYYY')}`}
+          selectedLabel="Selected"
           onClick={this.handleDayClick}
         >
           {date.format('D')}

package/src/DateInput/v1/index.tsx

@@ -328,7 +328,8 @@ class DateInput extends Component<DateInputProps, DateInputState> {
       value,
       onChange,
       disabledDates,
-      currentDate
+      currentDate,
+      selectedLabel
     } = this.props
 
     const isValidDate = value
@@ -365,7 +366,8 @@ class DateInput extends Component<DateInputProps, DateInputState> {
           renderNavigationLabel,
           renderWeekdayLabels,
           renderNextMonthButton: this.renderMonthNavigationButton('next'),
-          renderPrevMonthButton: this.renderMonthNavigationButton('prev')
+          renderPrevMonthButton: this.renderMonthNavigationButton('prev'),
+          selectedLabel
         }) as CalendarProps)}
         {...noChildrenProps}
       >

package/src/DateInput/v1/props.ts

@@ -253,6 +253,11 @@ type DateInputOwnProps = {
     startYear: number
     endYear: number
   }
+  /**
+   * 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 PropKeys = keyof DateInputOwnProps
@@ -302,7 +307,9 @@ const allowedProps: AllowedPropKeys = [
   'disabledDateErrorMessage',
   'invalidDateErrorMessage',
   'locale',
-  'timezone'
+  'timezone',
+  'withYearPicker',
+  'selectedLabel'
 ]
 
 type DateInputState = {

package/src/DateInput/v2/README.md

@@ -29,7 +29,8 @@ type: example
             calendarIcon: 'Calendar',
             nextMonthButton: 'Next month',
             prevMonthButton: 'Previous month',
-            datePickerDialog: 'Date picker'
+            datePickerDialog: 'Date picker',
+            selectedLabel: 'Selected'
           }}
           value={inputValue}
           width="20rem"
@@ -79,7 +80,8 @@ const Example = () => {
           calendarIcon: 'Calendar',
           nextMonthButton: 'Next month',
           prevMonthButton: 'Previous month',
-          datePickerDialog: 'Date picker'
+          datePickerDialog: 'Date picker',
+          selectedLabel: 'Selected'
         }}
         width="20rem"
         value={value}
@@ -93,7 +95,8 @@ const Example = () => {
           calendarIcon: 'Calendar',
           nextMonthButton: 'Next month',
           prevMonthButton: 'Previous month',
-          datePickerDialog: 'Date picker'
+          datePickerDialog: 'Date picker',
+          selectedLabel: 'Selected'
         }}
         width="20rem"
         value={value2}
@@ -108,7 +111,8 @@ const Example = () => {
           calendarIcon: 'Calendar',
           nextMonthButton: 'Next month',
           prevMonthButton: 'Previous month',
-          datePickerDialog: 'Date picker'
+          datePickerDialog: 'Date picker',
+          selectedLabel: 'Selected'
         }}
         width="20rem"
         value={value3}
@@ -160,7 +164,8 @@ type: example
             calendarIcon: 'Calendar',
             nextMonthButton: 'Next month',
             prevMonthButton: 'Previous month',
-            datePickerDialog: 'Date picker'
+            datePickerDialog: 'Date picker',
+            selectedLabel: 'Selected'
           }}
           value={inputValue}
           width="20rem"
@@ -230,7 +235,8 @@ const Example = () => {
         calendarIcon: 'Calendar',
         nextMonthButton: 'Next month',
         prevMonthButton: 'Previous month',
-        datePickerDialog: 'Date picker'
+        datePickerDialog: 'Date picker',
+        selectedLabel: 'Selected'
       }}
       width="20rem"
       value={value}
@@ -272,7 +278,8 @@ const Example = () => {
         calendarIcon: 'Calendar',
         nextMonthButton: 'Next month',
         prevMonthButton: 'Previous month',
-        datePickerDialog: 'Date picker'
+        datePickerDialog: 'Date picker',
+        selectedLabel: 'Selected'
       }}
       value={inputValue}
       locale="en-us"

package/src/DateInput/v2/index.tsx

@@ -306,6 +306,7 @@ const DateInput = forwardRef(
               withYearPicker={withYearPicker}
               onDateSelected={handleDateSelected}
               selectedDate={selectedDate}
+              selectedLabel={screenReaderLabels.selectedLabel}
               disabledDates={disabledDates}
               visibleMonth={selectedDate}
               locale={userLocale}

package/src/DateInput/v2/props.ts

@@ -33,14 +33,14 @@ type DateInputOwnProps = {
    */
   renderLabel: Renderable
   /**
-   * Accessible labels for the calendar button, month navigation buttons, and date picker dialog.
+   * Accessible labels for the calendar button, month navigation buttons, date picker dialog, and selected date state.
    */
   screenReaderLabels: {
     calendarIcon: string
     prevMonthButton: string
     nextMonthButton: string
-    // TODO: Make this field required in the next version. Currently optional to avoid breaking change.
-    datePickerDialog?: string
+    datePickerDialog: string
+    selectedLabel: string
   }
   /**
    * Specifies the input value.

package/src/DateInput2/v1/README.md

@@ -29,7 +29,8 @@ type: example
             calendarIcon: 'Calendar',
             nextMonthButton: 'Next month',
             prevMonthButton: 'Previous month',
-            datePickerDialog: 'Date picker'
+            datePickerDialog: 'Date picker',
+            selectedLabel: 'Selected'
           }}
           value={inputValue}
           width="20rem"
@@ -79,7 +80,8 @@ const Example = () => {
           calendarIcon: 'Calendar',
           nextMonthButton: 'Next month',
           prevMonthButton: 'Previous month',
-          datePickerDialog: 'Date picker'
+          datePickerDialog: 'Date picker',
+          selectedLabel: 'Selected'
         }}
         width="20rem"
         value={value}
@@ -93,7 +95,8 @@ const Example = () => {
           calendarIcon: 'Calendar',
           nextMonthButton: 'Next month',
           prevMonthButton: 'Previous month',
-          datePickerDialog: 'Date picker'
+          datePickerDialog: 'Date picker',
+          selectedLabel: 'Selected'
         }}
         width="20rem"
         value={value2}
@@ -108,7 +111,8 @@ const Example = () => {
           calendarIcon: 'Calendar',
           nextMonthButton: 'Next month',
           prevMonthButton: 'Previous month',
-          datePickerDialog: 'Date picker'
+          datePickerDialog: 'Date picker',
+          selectedLabel: 'Selected'
         }}
         width="20rem"
         value={value3}
@@ -160,7 +164,8 @@ type: example
             calendarIcon: 'Calendar',
             nextMonthButton: 'Next month',
             prevMonthButton: 'Previous month',
-            datePickerDialog: 'Date picker'
+            datePickerDialog: 'Date picker',
+            selectedLabel: 'Selected'
           }}
           value={inputValue}
           width="20rem"
@@ -230,7 +235,8 @@ const Example = () => {
         calendarIcon: 'Calendar',
         nextMonthButton: 'Next month',
         prevMonthButton: 'Previous month',
-        datePickerDialog: 'Date picker'
+        datePickerDialog: 'Date picker',
+        selectedLabel: 'Selected'
       }}
       width="20rem"
       value={value}
@@ -272,7 +278,8 @@ const Example = () => {
         calendarIcon: 'Calendar',
         nextMonthButton: 'Next month',
         prevMonthButton: 'Previous month',
-        datePickerDialog: 'Date picker'
+        datePickerDialog: 'Date picker',
+        selectedLabel: 'Selected'
       }}
       value={inputValue}
       locale="en-us"

package/src/DateInput2/v1/index.tsx

@@ -305,6 +305,7 @@ const DateInput2 = forwardRef(
               withYearPicker={withYearPicker}
               onDateSelected={handleDateSelected}
               selectedDate={selectedDate}
+              selectedLabel={screenReaderLabels.selectedLabel}
               disabledDates={disabledDates}
               visibleMonth={selectedDate}
               locale={userLocale}

package/src/DateInput2/v1/props.ts

@@ -33,7 +33,7 @@ type DateInput2OwnProps = {
    */
   renderLabel: Renderable
   /**
-   * Accessible labels for the calendar button, month navigation buttons, and date picker dialog.
+   * Accessible labels for the calendar button, month navigation buttons, date picker dialog, and selected date state.
    */
   screenReaderLabels: {
     calendarIcon: string
@@ -41,6 +41,7 @@ type DateInput2OwnProps = {
     nextMonthButton: string
     // TODO: Make this field required in the next version. Currently optional to avoid breaking change.
     datePickerDialog?: string
+    selectedLabel?: string
   }
   /**
    * Specifies the input value.