@instructure/ui-date-input 11.5.0 → 11.5.1-snapshot-1

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [11.5.1-snapshot-1](https://github.com/instructure/instructure-ui/compare/v11.5.0...v11.5.1-snapshot-1) (2026-02-18)
+
+
+### Features
+
+* **ui-date-input:** add missing role and aria-label to DateInput2 dialog ([6f2219a](https://github.com/instructure/instructure-ui/commit/6f2219a4f8df3f1261e5d41052c9233fdfaff6e8))
+
+
+
+
+
 # [11.5.0](https://github.com/instructure/instructure-ui/compare/v11.4.0...v11.5.0) (2026-02-03)
 
 **Note:** Version bump only for package @instructure/ui-date-input

package/es/DateInput2/index.js

@@ -256,6 +256,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

@@ -266,6 +266,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": "11.5.0",
+  "version": "11.5.1-snapshot-1",
   "description": "A UI component library made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -16,27 +16,27 @@
   "dependencies": {
     "@babel/runtime": "^7.27.6",
     "moment-timezone": "^0.6.0",
-    "@instructure/shared-types": "11.5.0",
-    "@instructure/ui-form-field": "11.5.0",
-    "@instructure/emotion": "11.5.0",
-    "@instructure/ui-i18n": "11.5.0",
-    "@instructure/ui-calendar": "11.5.0",
-    "@instructure/ui-icons": "11.5.0",
-    "@instructure/ui-position": "11.5.0",
-    "@instructure/ui-react-utils": "11.5.0",
-    "@instructure/ui-popover": "11.5.0",
-    "@instructure/ui-selectable": "11.5.0",
-    "@instructure/ui-utils": "11.5.0",
-    "@instructure/ui-text-input": "11.5.0"
+    "@instructure/emotion": "11.5.1-snapshot-1",
+    "@instructure/shared-types": "11.5.1-snapshot-1",
+    "@instructure/ui-calendar": "11.5.1-snapshot-1",
+    "@instructure/ui-i18n": "11.5.1-snapshot-1",
+    "@instructure/ui-form-field": "11.5.1-snapshot-1",
+    "@instructure/ui-icons": "11.5.1-snapshot-1",
+    "@instructure/ui-selectable": "11.5.1-snapshot-1",
+    "@instructure/ui-text-input": "11.5.1-snapshot-1",
+    "@instructure/ui-popover": "11.5.1-snapshot-1",
+    "@instructure/ui-react-utils": "11.5.1-snapshot-1",
+    "@instructure/ui-utils": "11.5.1-snapshot-1",
+    "@instructure/ui-position": "11.5.1-snapshot-1"
   },
   "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.5.0",
-    "@instructure/ui-buttons": "11.5.0",
-    "@instructure/ui-scripts": "11.5.0"
+    "@instructure/ui-babel-preset": "11.5.1-snapshot-1",
+    "@instructure/ui-buttons": "11.5.1-snapshot-1",
+    "@instructure/ui-scripts": "11.5.1-snapshot-1"
   },
   "peerDependencies": {
     "react": ">=18 <=19"

package/src/DateInput2/README.md

@@ -20,7 +20,8 @@ type: example
           screenReaderLabels={{
             calendarIcon: 'Calendar',
             nextMonthButton: 'Next month',
-            prevMonthButton: 'Previous month'
+            prevMonthButton: 'Previous month',
+            datePickerDialog: 'Date picker'
           }}
           value={inputValue}
           width="20rem"
@@ -69,7 +70,8 @@ const Example = () => {
         screenReaderLabels={{
           calendarIcon: 'Calendar',
           nextMonthButton: 'Next month',
-          prevMonthButton: 'Previous month'
+          prevMonthButton: 'Previous month',
+          datePickerDialog: 'Date picker'
         }}
         width="20rem"
         value={value}
@@ -82,7 +84,8 @@ const Example = () => {
         screenReaderLabels={{
           calendarIcon: 'Calendar',
           nextMonthButton: 'Next month',
-          prevMonthButton: 'Previous month'
+          prevMonthButton: 'Previous month',
+          datePickerDialog: 'Date picker'
         }}
         width="20rem"
         value={value2}
@@ -96,7 +99,8 @@ const Example = () => {
         screenReaderLabels={{
           calendarIcon: 'Calendar',
           nextMonthButton: 'Next month',
-          prevMonthButton: 'Previous month'
+          prevMonthButton: 'Previous month',
+          datePickerDialog: 'Date picker'
         }}
         width="20rem"
         value={value3}
@@ -147,7 +151,8 @@ type: example
           screenReaderLabels={{
             calendarIcon: 'Calendar',
             nextMonthButton: 'Next month',
-            prevMonthButton: 'Previous month'
+            prevMonthButton: 'Previous month',
+            datePickerDialog: 'Date picker'
           }}
           value={inputValue}
           width="20rem"
@@ -216,7 +221,8 @@ const Example = () => {
       screenReaderLabels={{
         calendarIcon: 'Calendar',
         nextMonthButton: 'Next month',
-        prevMonthButton: 'Previous month'
+        prevMonthButton: 'Previous month',
+        datePickerDialog: 'Date picker'
       }}
       width="20rem"
       value={value}
@@ -257,7 +263,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

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

package/src/DateInput2/props.ts

@@ -32,10 +32,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 version. Currently optional to avoid breaking change.
+    datePickerDialog?: string
   }
   /**
    * Specifies the input value.