[terra-date-time-picker] Fixed accessibility issue (#2140)

Co-authored-by: Avijit Das <[email protected]>
Co-authored-by: Sugan G <[email protected]>

packages/terra-date-time-picker/CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Fixed
+  * Fixed the accessibility issue to allow announcement as a single group label.
+
 ## 4.114.0 - (April 4, 2024)
 
 * Changed

packages/terra-date-time-picker/src/DateTimePicker.jsx

@@ -780,6 +780,8 @@ class DateTimePicker extends React.Component {
         {...customProps}
         className={cx('date-time-picker', theme.className)}
         ref={this.dateTimePickerContainer}
+        role="group"
+        aria-label={ariaLabel}
       >
         <input
           // Create a hidden input for storing the name and value attributes to use when submitting the form.
@@ -789,10 +791,8 @@ class DateTimePicker extends React.Component {
           name={name}
           value={dateTime?.isValid() ? dateTime.format() : ''}
         />
-
         <div className={cx('date-facade')}>
           <DatePicker
-            ariaLabel={ariaLabel}
             onCalendarButtonClick={this.handleOnCalendarButtonClick}
             onChange={this.handleDateChange}
             onChangeRaw={this.handleDateChangeRaw}
@@ -822,7 +822,6 @@ class DateTimePicker extends React.Component {
         </div>
         <div className={cx('time-facade')}>
           <TimeInput
-            a11yLabel={ariaLabel}
             onBlur={this.handleOnTimeBlur}
             onChange={this.handleTimeChange}
             onFocus={this.handleOnTimeInputFocus}

packages/terra-date-time-picker/tests/jest/DateTimePicker.test.jsx

@@ -173,3 +173,14 @@ it('correctly applies the theme context className', () => {
   );
   expect(dateTime).toMatchSnapshot();
 });
+
+it('renders DateTimePicker with correct ARIA attributes', () => {
+  const ariaLabel = 'Enter Date/Time';
+  const role = 'group';
+  const dateTime = enzymeIntl.shallowWithIntl(
+    <DateTimePicker initialTimeZone="America/Chicago" name="date-time-input" ariaLabel={ariaLabel} role={role} />,
+  );
+  expect(dateTime.prop('ariaLabel')).toBe(ariaLabel);
+  expect(dateTime.prop('role')).toBe(role);
+  expect(dateTime).toMatchSnapshot();
+});

packages/terra-date-time-picker/tests/jest/__snapshots__/DateTimePicker.test.jsx.snap

@@ -17,6 +17,52 @@ exports[`correctly applies the theme context className 1`] = `
 </ContextProvider>
 `;
 
+exports[`renders DateTimePicker with correct ARIA attributes 1`] = `
+<DateTimePicker
+  ariaLabel="Enter Date/Time"
+  disabled={false}
+  errorId=""
+  initialTimeZone="America/Chicago"
+  intl={
+    Object {
+      "defaultFormats": Object {},
+      "defaultLocale": "en",
+      "formatDate": [Function],
+      "formatHTMLMessage": [Function],
+      "formatMessage": [Function],
+      "formatNumber": [Function],
+      "formatPlural": [Function],
+      "formatRelative": [Function],
+      "formatTime": [Function],
+      "formats": Object {},
+      "formatters": Object {
+        "getDateTimeFormat": [Function],
+        "getMessageFormat": [Function],
+        "getNumberFormat": [Function],
+        "getPluralFormat": [Function],
+        "getRelativeFormat": [Function],
+      },
+      "locale": "en",
+      "messages": null,
+      "now": [Function],
+      "onError": [Function],
+      "textComponent": "span",
+      "timeZone": null,
+    }
+  }
+  isIncomplete={false}
+  isInvalid={false}
+  isInvalidMeridiem={false}
+  maxDate="2100-12-31"
+  minDate="1900-01-01"
+  name="date-time-input"
+  required={false}
+  role="group"
+  showSeconds={false}
+  timeVariant="24-hour"
+/>
+`;
+
 exports[`should render a date time picker with a default date and time 1`] = `
 <DateTimePicker
   disabled={false}