@instructure/ui-date-input 10.26.4 → 10.30.0

package/CHANGELOG.md

@@ -3,6 +3,41 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [10.30.0](https://github.com/instructure/instructure-ui/compare/v10.29.0...v10.30.0) (2026-02-18)
+
+
+### Features
+
+* **ui-date-input:** add missing role and aria-label to DateInput2 dialog ([1c459f2](https://github.com/instructure/instructure-ui/commit/1c459f2d7b68f01e0c6878c649459f654bb75778))
+
+
+
+
+
+# [10.29.0](https://github.com/instructure/instructure-ui/compare/v10.26.4...v10.29.0) (2026-01-14)
+
+**Note:** Version bump only for package @instructure/ui-date-input
+
+
+
+
+
+# [10.28.0](https://github.com/instructure/instructure-ui/compare/v10.26.4...v10.28.0) (2026-01-09)
+
+**Note:** Version bump only for package @instructure/ui-date-input
+
+
+
+
+
+# [10.27.0](https://github.com/instructure/instructure-ui/compare/v10.26.4...v10.27.0) (2026-01-07)
+
+**Note:** Version bump only for package @instructure/ui-date-input
+
+
+
+
+
 ## [10.26.4](https://github.com/instructure/instructure-ui/compare/v10.26.3...v10.26.4) (2025-11-20)
 
 **Note:** Version bump only for package @instructure/ui-date-input

package/es/DateInput2/index.js

@@ -258,6 +258,7 @@ const DateInput2 = /*#__PURE__*/forwardRef(({
       shouldContainFocus: true,
       shouldReturnFocus: true,
       shouldCloseOnDocumentClick: true,
+      screenReaderLabel: screenReaderLabels.datePickerDialog,
       children: _jsx(Calendar, {
         withYearPicker: withYearPicker,
         onDateSelected: handleDateSelected,

package/lib/DateInput2/index.js

@@ -268,6 +268,7 @@ const DateInput2 = exports.DateInput2 = /*#__PURE__*/(0, _react.forwardRef)(({
       shouldContainFocus: true,
       shouldReturnFocus: true,
       shouldCloseOnDocumentClick: true,
+      screenReaderLabel: screenReaderLabels.datePickerDialog,
       children: (0, _jsxRuntime.jsx)(_Calendar.Calendar, {
         withYearPicker: withYearPicker,
         onDateSelected: handleDateSelected,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-date-input",
-  "version": "10.26.4",
+  "version": "10.30.0",
   "description": "A UI component library made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,9 +23,9 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "10.26.4",
-    "@instructure/ui-buttons": "10.26.4",
-    "@instructure/ui-scripts": "10.26.4",
+    "@instructure/ui-babel-preset": "10.30.0",
+    "@instructure/ui-buttons": "10.30.0",
+    "@instructure/ui-scripts": "10.30.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.6.1",
@@ -33,20 +33,20 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.27.6",
-    "@instructure/emotion": "10.26.4",
-    "@instructure/shared-types": "10.26.4",
-    "@instructure/ui-calendar": "10.26.4",
-    "@instructure/ui-form-field": "10.26.4",
-    "@instructure/ui-i18n": "10.26.4",
-    "@instructure/ui-icons": "10.26.4",
-    "@instructure/ui-popover": "10.26.4",
-    "@instructure/ui-position": "10.26.4",
-    "@instructure/ui-prop-types": "10.26.4",
-    "@instructure/ui-react-utils": "10.26.4",
-    "@instructure/ui-selectable": "10.26.4",
-    "@instructure/ui-testable": "10.26.4",
-    "@instructure/ui-text-input": "10.26.4",
-    "@instructure/ui-utils": "10.26.4",
+    "@instructure/emotion": "10.30.0",
+    "@instructure/shared-types": "10.30.0",
+    "@instructure/ui-calendar": "10.30.0",
+    "@instructure/ui-form-field": "10.30.0",
+    "@instructure/ui-i18n": "10.30.0",
+    "@instructure/ui-icons": "10.30.0",
+    "@instructure/ui-popover": "10.30.0",
+    "@instructure/ui-position": "10.30.0",
+    "@instructure/ui-prop-types": "10.30.0",
+    "@instructure/ui-react-utils": "10.30.0",
+    "@instructure/ui-selectable": "10.30.0",
+    "@instructure/ui-testable": "10.30.0",
+    "@instructure/ui-text-input": "10.30.0",
+    "@instructure/ui-utils": "10.30.0",
     "moment-timezone": "^0.6.0",
     "prop-types": "^15.8.1"
   },

package/src/DateInput2/README.md

@@ -18,7 +18,8 @@ describes: DateInput2
             screenReaderLabels={{
               calendarIcon: 'Calendar',
               nextMonthButton: 'Next month',
-              prevMonthButton: 'Previous month'
+              prevMonthButton: 'Previous month',
+              datePickerDialog: 'Date picker'
             }}
             value={this.state.inputValue}
             width="20rem"
@@ -51,7 +52,8 @@ describes: DateInput2
           screenReaderLabels={{
             calendarIcon: 'Calendar',
             nextMonthButton: 'Next month',
-            prevMonthButton: 'Previous month'
+            prevMonthButton: 'Previous month',
+            datePickerDialog: 'Date picker'
           }}
           value={inputValue}
           width="20rem"
@@ -100,7 +102,8 @@ const Example = () => {
         screenReaderLabels={{
           calendarIcon: 'Calendar',
           nextMonthButton: 'Next month',
-          prevMonthButton: 'Previous month'
+          prevMonthButton: 'Previous month',
+          datePickerDialog: 'Date picker'
         }}
         width="20rem"
         value={value}
@@ -113,7 +116,8 @@ const Example = () => {
         screenReaderLabels={{
           calendarIcon: 'Calendar',
           nextMonthButton: 'Next month',
-          prevMonthButton: 'Previous month'
+          prevMonthButton: 'Previous month',
+          datePickerDialog: 'Date picker'
         }}
         width="20rem"
         value={value2}
@@ -127,7 +131,8 @@ const Example = () => {
         screenReaderLabels={{
           calendarIcon: 'Calendar',
           nextMonthButton: 'Next month',
-          prevMonthButton: 'Previous month'
+          prevMonthButton: 'Previous month',
+          datePickerDialog: 'Date picker'
         }}
         width="20rem"
         value={value3}
@@ -176,7 +181,8 @@ In the examples above you can see that the `onChange` callback also return a UTC
             screenReaderLabels={{
               calendarIcon: 'Calendar',
               nextMonthButton: 'Next month',
-              prevMonthButton: 'Previous month'
+              prevMonthButton: 'Previous month',
+              datePickerDialog: 'Date picker'
             }}
             value={this.state.inputValue}
             width="20rem"
@@ -214,7 +220,8 @@ In the examples above you can see that the `onChange` callback also return a UTC
           screenReaderLabels={{
             calendarIcon: 'Calendar',
             nextMonthButton: 'Next month',
-            prevMonthButton: 'Previous month'
+            prevMonthButton: 'Previous month',
+            datePickerDialog: 'Date picker'
           }}
           value={inputValue}
           width="20rem"
@@ -283,7 +290,8 @@ const Example = () => {
       screenReaderLabels={{
         calendarIcon: 'Calendar',
         nextMonthButton: 'Next month',
-        prevMonthButton: 'Previous month'
+        prevMonthButton: 'Previous month',
+        datePickerDialog: 'Date picker'
       }}
       width="20rem"
       value={value}
@@ -324,7 +332,8 @@ const Example = () => {
       screenReaderLabels={{
         calendarIcon: 'Calendar',
         nextMonthButton: 'Next month',
-        prevMonthButton: 'Previous month'
+        prevMonthButton: 'Previous month',
+        datePickerDialog: 'Date picker'
       }}
       value={inputValue}
       locale="en-us"

package/src/DateInput2/index.tsx

@@ -306,6 +306,7 @@ const DateInput2 = forwardRef(
             shouldContainFocus
             shouldReturnFocus
             shouldCloseOnDocumentClick
+            screenReaderLabel={screenReaderLabels.datePickerDialog}
           >
             <Calendar
               withYearPicker={withYearPicker}

package/src/DateInput2/props.ts

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