feat(ui-date-input): add missing role and aria-label to DateInput2 dialog

INSTUI-4915

Author: ToMESSKa

packages/ui-date-input/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"

packages/ui-date-input/src/DateInput2/__tests__/DateInput2.test.tsx

@@ -416,4 +416,30 @@ describe('<DateInput2 />', () => {
     expect(screenreaderMessage).toBeInTheDocument()
     expect(screenreaderMessage).toHaveClass(/screenReaderContent/)
   })
+
+  it('should render date picker dialog with proper role and ARIA label', async () => {
+    const datePickerLabel = 'Date picker'
+
+    render(
+      <DateInput2
+        renderLabel="Choose a date"
+        screenReaderLabels={{
+          calendarIcon: 'Calendar',
+          nextMonthButton: 'Next month',
+          prevMonthButton: 'Previous month',
+          datePickerDialog: datePickerLabel
+        }}
+        value=""
+      />
+    )
+
+    const calendarButton = screen.getByRole('button', { name: 'Calendar' })
+    await userEvent.click(calendarButton)
+
+    await waitFor(() => {
+      const dialog = screen.getByRole('dialog', { name: datePickerLabel })
+      expect(dialog).toBeInTheDocument()
+      expect(dialog).toHaveAttribute('aria-label', datePickerLabel)
+    })
+  })
 })

packages/ui-date-input/src/DateInput2/index.tsx

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

packages/ui-date-input/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.