From 1d4b562350489014a1427158b0a680b38336fc68 Mon Sep 17 00:00:00 2001
From: ashishkcerner <126875089+ashishkcerner@users.noreply.github.com>
Date: Wed, 21 Feb 2024 17:40:04 +0530
Subject: [PATCH] [date-time-picker] Defect fixes (#2036)

---
 .github/workflows/ci-cd.yml                   |  2 +-
 packages/terra-date-picker/CHANGELOG.md       |  4 +++
 packages/terra-date-picker/src/DateInput.jsx  |  3 ++
 .../src/react-datepicker/calendar.jsx         | 11 +++---
 .../src/react-datepicker/date_utils.js        | 17 +++++++++
 .../src/react-datepicker/index.jsx            |  8 +++--
 .../__snapshots__/DateInput.test.jsx.snap     | 36 +++++++++++++++++++
 .../__snapshots__/DatePicker.test.jsx.snap    |  9 +++++
 .../DatePickerField.test.jsx.snap             | 27 ++++++++++++++
 packages/terra-framework-docs/CHANGELOG.md    |  3 ++
 .../example/DateTimePickerTimeZone.jsx        | 29 +++++++--------
 11 files changed, 127 insertions(+), 22 deletions(-)

diff --git a/.github/workflows/ci-cd.yml b/.github/workflows/ci-cd.yml
index 92a063f38f0..a789b90930f 100644
--- a/.github/workflows/ci-cd.yml
+++ b/.github/workflows/ci-cd.yml
@@ -116,4 +116,4 @@ jobs:
           keep_files: true
           user_name: 'github-actions[bot]'
           user_email: 'github-actions[bot]@users.noreply.github.com'
-          commit_message: 'chore(docs): Regenerate docs'
+          commit_message: 'chore(docs): Regenerate docs'
\ No newline at end of file
diff --git a/packages/terra-date-picker/CHANGELOG.md b/packages/terra-date-picker/CHANGELOG.md
index 494307e2f62..117c7699677 100644
--- a/packages/terra-date-picker/CHANGELOG.md
+++ b/packages/terra-date-picker/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+* Changed
+  * Fixed the invalid case for SR announcement.
+  * Changed the SR announcement for changing date from calender.
+
 ## 4.98.1 - (February 16, 2024)
 
 * Fixed
diff --git a/packages/terra-date-picker/src/DateInput.jsx b/packages/terra-date-picker/src/DateInput.jsx
index 096b2489861..87be840c8e0 100644
--- a/packages/terra-date-picker/src/DateInput.jsx
+++ b/packages/terra-date-picker/src/DateInput.jsx
@@ -714,6 +714,7 @@ const DatePickerInput = (props) => {
       maxLength="2"
       size="2"
       pattern="\d*"
+      aria-invalid={isInvalid}
       aria-required={required}
       aria-label={`${ariaLabel ? `${ariaLabel} ${intl.formatMessage({ id: 'Terra.datePicker.dayLabel' })}` : intl.formatMessage({ id: 'Terra.datePicker.dayLabel' })}`}
       aria-describedby={ariaDescriptionIds}
@@ -745,6 +746,7 @@ const DatePickerInput = (props) => {
       maxLength="2"
       size="2"
       pattern="\d*"
+      aria-invalid={isInvalid}
       aria-required={required}
       aria-label={`${ariaLabel ? `${ariaLabel} ${intl.formatMessage({ id: 'Terra.datePicker.monthLabel' })}` : intl.formatMessage({ id: 'Terra.datePicker.monthLabel' })}`}
       aria-describedby={ariaDescriptionIds}
@@ -776,6 +778,7 @@ const DatePickerInput = (props) => {
       maxLength="4"
       size="4"
       pattern="\d*"
+      aria-invalid={isInvalid}
       aria-required={required}
       aria-label={`${ariaLabel ? `${ariaLabel} ${intl.formatMessage({ id: 'Terra.datePicker.yearLabel' })}` : intl.formatMessage({ id: 'Terra.datePicker.yearLabel' })}`}
       aria-describedby={ariaDescriptionIds}
diff --git a/packages/terra-date-picker/src/react-datepicker/calendar.jsx b/packages/terra-date-picker/src/react-datepicker/calendar.jsx
index ec0797b3581..6f562bcea62 100644
--- a/packages/terra-date-picker/src/react-datepicker/calendar.jsx
+++ b/packages/terra-date-picker/src/react-datepicker/calendar.jsx
@@ -32,7 +32,8 @@ import {
   allDaysDisabledAfter,
   getEffectiveMinDate,
   getEffectiveMaxDate,
-  isDayDisabled
+  isDayDisabled,
+  dateValues
 } from './date_utils'
 
 const cx = classNames.bind(styles);
@@ -413,7 +414,7 @@ export default class Calendar extends React.Component {
       isMonthChanged: true,
       date: getStartOfMonth(addMonths(cloneDate(this.state.date), 1)),
     }, () => this.handleMonthChange(this.state.date))
-    this.props.setPreSelection(getStartOfMonth(addMonths(cloneDate(this.state.date), 1)));
+    this.props.setPreSelection(getStartOfMonth(addMonths(cloneDate(this.state.date), 1)),dateValues.MONTH,addMonths(cloneDate(this.state.date), 1));
     // To check if button is pressed using mouse or keyboard
     if(event.target.type === undefined) {
       this.setState({ calendarIsKeyboardFocused : false});
@@ -426,7 +427,7 @@ export default class Calendar extends React.Component {
       isMonthChanged: true,
       date: getStartOfMonth(subtractMonths(cloneDate(this.state.date), 1))
     }, () => this.handleMonthChange(this.state.date))
-    this.props.setPreSelection(getStartOfMonth(subtractMonths(cloneDate(this.state.date), 1)));
+    this.props.setPreSelection(getStartOfMonth(subtractMonths(cloneDate(this.state.date), 1)),dateValues.MONTH,subtractMonths(cloneDate(this.state.date), 1));
     // To check if button is pressed using mouse or keyboard
     if(event.target.type === undefined) {
       this.setState({ calendarIsKeyboardFocused : false});
@@ -464,7 +465,7 @@ export default class Calendar extends React.Component {
       isMonthChanged: true,
       date: getStartOfMonth(setYear(cloneDate(this.state.date), year))
     })
-    this.props.setPreSelection(getStartOfMonth(setYear(cloneDate(this.state.date), year)));
+    this.props.setPreSelection(getStartOfMonth(setYear(cloneDate(this.state.date), year)),dateValues.YEAR,year);
   }
 
   changeMonth = (month) => {
@@ -472,7 +473,7 @@ export default class Calendar extends React.Component {
       isMonthChanged: true,
       date: getStartOfMonth(setMonth(cloneDate(this.state.date), month))
     }, () => this.handleMonthChange(this.state.date))
-    this.props.setPreSelection(getStartOfMonth(setMonth(cloneDate(this.state.date), month)));
+    this.props.setPreSelection(getStartOfMonth(setMonth(cloneDate(this.state.date), month)),dateValues.MONTH,month);
   }
 
   header = (date = this.state.date) => {
diff --git a/packages/terra-date-picker/src/react-datepicker/date_utils.js b/packages/terra-date-picker/src/react-datepicker/date_utils.js
index aacdc838e35..ad1c25990d7 100644
--- a/packages/terra-date-picker/src/react-datepicker/date_utils.js
+++ b/packages/terra-date-picker/src/react-datepicker/date_utils.js
@@ -376,3 +376,20 @@ export function getLocalizedDateForScreenReader (date, props) {
 
   return localizedDateLabel;
 }
+
+export function getMonthFromDate(date, props) {
+  const { intl, locale } = props;
+  let month = '';
+
+  if (date && date.isValid()) {
+    const localizedDate = localizeDate(date, locale);
+    month = localizedDate.format('MMMM');
+  }
+
+  return month;
+}
+
+export const dateValues = {
+  MONTH: 'month',
+  YEAR: 'year',
+};
diff --git a/packages/terra-date-picker/src/react-datepicker/index.jsx b/packages/terra-date-picker/src/react-datepicker/index.jsx
index 10499ef395a..2cd48d7a2b6 100644
--- a/packages/terra-date-picker/src/react-datepicker/index.jsx
+++ b/packages/terra-date-picker/src/react-datepicker/index.jsx
@@ -34,7 +34,9 @@ import {
   parseDate,
   safeDateFormat,
   getHightLightDaysMap,
-  getLocalizedDateForScreenReader
+  getLocalizedDateForScreenReader,
+  getMonthFromDate,
+  dateValues
 } from './date_utils'
 import onClickOutside from 'react-onclickoutside'
 import styles from './stylesheets/react_datepicker.module.scss'
@@ -582,12 +584,14 @@ class DatePicker extends React.Component {
     }
   }
 
-  setPreSelection = (date) => {
+  setPreSelection = (date,type,value) => {
     const isValidDateSelection = date ? isDayInRange(date, this.props.minDate, this.props.maxDate) : true
     if (isValidDateSelection) {
       this.setState({
         preSelection: date
       })
+      type === dateValues.MONTH ? this.updateAriaLiveStatus(getMonthFromDate(date, this.props)) :
+      type === dateValues.YEAR ? this.updateAriaLiveStatus(value) :
       this.updateAriaLiveStatus(getLocalizedDateForScreenReader(date, this.props));
     }
   }
diff --git a/packages/terra-date-picker/tests/jest/__snapshots__/DateInput.test.jsx.snap b/packages/terra-date-picker/tests/jest/__snapshots__/DateInput.test.jsx.snap
index 04860776e58..d28e3bf16a0 100644
--- a/packages/terra-date-picker/tests/jest/__snapshots__/DateInput.test.jsx.snap
+++ b/packages/terra-date-picker/tests/jest/__snapshots__/DateInput.test.jsx.snap
@@ -111,6 +111,7 @@ exports[`correctly applies the theme context className 1`] = `
               day={
                 <Input
                   aria-describedby="terra-date-picker-description-format-00000000-0000-0000-0000-000000000000"
+                  aria-invalid={false}
                   aria-label="Terra.datePicker.dayLabel"
                   aria-required={false}
                   className="date-input-day"
@@ -134,6 +135,7 @@ exports[`correctly applies the theme context className 1`] = `
               month={
                 <Input
                   aria-describedby="terra-date-picker-description-format-00000000-0000-0000-0000-000000000000"
+                  aria-invalid={false}
                   aria-label="Terra.datePicker.monthLabel"
                   aria-required={false}
                   className="date-input-month"
@@ -164,6 +166,7 @@ exports[`correctly applies the theme context className 1`] = `
               year={
                 <Input
                   aria-describedby="terra-date-picker-description-format-00000000-0000-0000-0000-000000000000"
+                  aria-invalid={false}
                   aria-label="Terra.datePicker.yearLabel"
                   aria-required={false}
                   className="date-input-year"
@@ -187,6 +190,7 @@ exports[`correctly applies the theme context className 1`] = `
             >
               <Input
                 aria-describedby="terra-date-picker-description-format-00000000-0000-0000-0000-000000000000"
+                aria-invalid={false}
                 aria-label="Terra.datePicker.monthLabel"
                 aria-required={false}
                 className="date-input-month"
@@ -208,6 +212,7 @@ exports[`correctly applies the theme context className 1`] = `
               >
                 <input
                   aria-describedby="terra-date-picker-description-format-00000000-0000-0000-0000-000000000000"
+                  aria-invalid={false}
                   aria-label="Terra.datePicker.monthLabel"
                   aria-required={false}
                   className="form-input orion-fusion-theme date-input-month"
@@ -232,6 +237,7 @@ exports[`correctly applies the theme context className 1`] = `
               </span>
               <Input
                 aria-describedby="terra-date-picker-description-format-00000000-0000-0000-0000-000000000000"
+                aria-invalid={false}
                 aria-label="Terra.datePicker.dayLabel"
                 aria-required={false}
                 className="date-input-day"
@@ -253,6 +259,7 @@ exports[`correctly applies the theme context className 1`] = `
               >
                 <input
                   aria-describedby="terra-date-picker-description-format-00000000-0000-0000-0000-000000000000"
+                  aria-invalid={false}
                   aria-label="Terra.datePicker.dayLabel"
                   aria-required={false}
                   className="form-input orion-fusion-theme date-input-day"
@@ -277,6 +284,7 @@ exports[`correctly applies the theme context className 1`] = `
               </span>
               <Input
                 aria-describedby="terra-date-picker-description-format-00000000-0000-0000-0000-000000000000"
+                aria-invalid={false}
                 aria-label="Terra.datePicker.yearLabel"
                 aria-required={false}
                 className="date-input-year"
@@ -298,6 +306,7 @@ exports[`correctly applies the theme context className 1`] = `
               >
                 <input
                   aria-describedby="terra-date-picker-description-format-00000000-0000-0000-0000-000000000000"
+                  aria-invalid={false}
                   aria-label="Terra.datePicker.yearLabel"
                   aria-required={false}
                   className="form-input orion-fusion-theme date-input-year"
@@ -545,6 +554,7 @@ exports[`should pass in refCallback as the ref prop of the calendar button 1`] =
           day={
             <Input
               aria-describedby="terra-date-picker-description-format-00000000-0000-0000-0000-000000000000"
+              aria-invalid={false}
               aria-label="Terra.datePicker.dayLabel"
               aria-required={false}
               className="date-input-day"
@@ -568,6 +578,7 @@ exports[`should pass in refCallback as the ref prop of the calendar button 1`] =
           month={
             <Input
               aria-describedby="terra-date-picker-description-format-00000000-0000-0000-0000-000000000000"
+              aria-invalid={false}
               aria-label="Terra.datePicker.monthLabel"
               aria-required={false}
               className="date-input-month"
@@ -598,6 +609,7 @@ exports[`should pass in refCallback as the ref prop of the calendar button 1`] =
           year={
             <Input
               aria-describedby="terra-date-picker-description-format-00000000-0000-0000-0000-000000000000"
+              aria-invalid={false}
               aria-label="Terra.datePicker.yearLabel"
               aria-required={false}
               className="date-input-year"
@@ -621,6 +633,7 @@ exports[`should pass in refCallback as the ref prop of the calendar button 1`] =
         >
           <Input
             aria-describedby="terra-date-picker-description-format-00000000-0000-0000-0000-000000000000"
+            aria-invalid={false}
             aria-label="Terra.datePicker.monthLabel"
             aria-required={false}
             className="date-input-month"
@@ -642,6 +655,7 @@ exports[`should pass in refCallback as the ref prop of the calendar button 1`] =
           >
             <input
               aria-describedby="terra-date-picker-description-format-00000000-0000-0000-0000-000000000000"
+              aria-invalid={false}
               aria-label="Terra.datePicker.monthLabel"
               aria-required={false}
               className="form-input date-input-month"
@@ -666,6 +680,7 @@ exports[`should pass in refCallback as the ref prop of the calendar button 1`] =
           </span>
           <Input
             aria-describedby="terra-date-picker-description-format-00000000-0000-0000-0000-000000000000"
+            aria-invalid={false}
             aria-label="Terra.datePicker.dayLabel"
             aria-required={false}
             className="date-input-day"
@@ -687,6 +702,7 @@ exports[`should pass in refCallback as the ref prop of the calendar button 1`] =
           >
             <input
               aria-describedby="terra-date-picker-description-format-00000000-0000-0000-0000-000000000000"
+              aria-invalid={false}
               aria-label="Terra.datePicker.dayLabel"
               aria-required={false}
               className="form-input date-input-day"
@@ -711,6 +727,7 @@ exports[`should pass in refCallback as the ref prop of the calendar button 1`] =
           </span>
           <Input
             aria-describedby="terra-date-picker-description-format-00000000-0000-0000-0000-000000000000"
+            aria-invalid={false}
             aria-label="Terra.datePicker.yearLabel"
             aria-required={false}
             className="date-input-year"
@@ -732,6 +749,7 @@ exports[`should pass in refCallback as the ref prop of the calendar button 1`] =
           >
             <input
               aria-describedby="terra-date-picker-description-format-00000000-0000-0000-0000-000000000000"
+              aria-invalid={false}
               aria-label="Terra.datePicker.yearLabel"
               aria-required={false}
               className="form-input date-input-year"
@@ -928,6 +946,7 @@ exports[`should render a date input with isIncomplete and required props 1`] = `
       />
       <input
         aria-describedby="terra-date-picker-description-format-00000000-0000-0000-0000-000000000000"
+        aria-invalid="false"
         aria-label="Terra.datePicker.monthLabel"
         aria-required="true"
         class="form-input date-input-month"
@@ -945,6 +964,7 @@ exports[`should render a date input with isIncomplete and required props 1`] = `
       </span>
       <input
         aria-describedby="terra-date-picker-description-format-00000000-0000-0000-0000-000000000000"
+        aria-invalid="false"
         aria-label="Terra.datePicker.dayLabel"
         aria-required="true"
         class="form-input date-input-day"
@@ -962,6 +982,7 @@ exports[`should render a date input with isIncomplete and required props 1`] = `
       </span>
       <input
         aria-describedby="terra-date-picker-description-format-00000000-0000-0000-0000-000000000000"
+        aria-invalid="false"
         aria-label="Terra.datePicker.yearLabel"
         aria-required="true"
         class="form-input date-input-year"
@@ -1052,6 +1073,7 @@ exports[`should render a date input with isInvalid prop 1`] = `
       />
       <input
         aria-describedby="terra-date-picker-description-format-00000000-0000-0000-0000-000000000000"
+        aria-invalid="true"
         aria-label="Terra.datePicker.monthLabel"
         aria-required="false"
         class="form-input date-input-month"
@@ -1069,6 +1091,7 @@ exports[`should render a date input with isInvalid prop 1`] = `
       </span>
       <input
         aria-describedby="terra-date-picker-description-format-00000000-0000-0000-0000-000000000000"
+        aria-invalid="true"
         aria-label="Terra.datePicker.dayLabel"
         aria-required="false"
         class="form-input date-input-day"
@@ -1086,6 +1109,7 @@ exports[`should render a date input with isInvalid prop 1`] = `
       </span>
       <input
         aria-describedby="terra-date-picker-description-format-00000000-0000-0000-0000-000000000000"
+        aria-invalid="true"
         aria-label="Terra.datePicker.yearLabel"
         aria-required="false"
         class="form-input date-input-year"
@@ -1176,6 +1200,7 @@ exports[`should render a default date input 1`] = `
       />
       <input
         aria-describedby="terra-date-picker-description-format-00000000-0000-0000-0000-000000000000"
+        aria-invalid="false"
         aria-label="Terra.datePicker.monthLabel"
         aria-required="false"
         class="form-input date-input-month"
@@ -1193,6 +1218,7 @@ exports[`should render a default date input 1`] = `
       </span>
       <input
         aria-describedby="terra-date-picker-description-format-00000000-0000-0000-0000-000000000000"
+        aria-invalid="false"
         aria-label="Terra.datePicker.dayLabel"
         aria-required="false"
         class="form-input date-input-day"
@@ -1210,6 +1236,7 @@ exports[`should render a default date input 1`] = `
       </span>
       <input
         aria-describedby="terra-date-picker-description-format-00000000-0000-0000-0000-000000000000"
+        aria-invalid="false"
         aria-label="Terra.datePicker.yearLabel"
         aria-required="false"
         class="form-input date-input-year"
@@ -1406,6 +1433,7 @@ exports[`should render a default date input with all props 1`] = `
           day={
             <Input
               aria-describedby="terra-date-picker-description-format-00000000-0000-0000-0000-000000000000"
+              aria-invalid={false}
               aria-label="Aria Label text Terra.datePicker.dayLabel"
               aria-required={false}
               className="date-input-day"
@@ -1430,6 +1458,7 @@ exports[`should render a default date input with all props 1`] = `
           month={
             <Input
               aria-describedby="terra-date-picker-description-format-00000000-0000-0000-0000-000000000000"
+              aria-invalid={false}
               aria-label="Aria Label text Terra.datePicker.monthLabel"
               aria-required={false}
               className="date-input-month"
@@ -1461,6 +1490,7 @@ exports[`should render a default date input with all props 1`] = `
           year={
             <Input
               aria-describedby="terra-date-picker-description-format-00000000-0000-0000-0000-000000000000"
+              aria-invalid={false}
               aria-label="Aria Label text Terra.datePicker.yearLabel"
               aria-required={false}
               className="date-input-year"
@@ -1485,6 +1515,7 @@ exports[`should render a default date input with all props 1`] = `
         >
           <Input
             aria-describedby="terra-date-picker-description-format-00000000-0000-0000-0000-000000000000"
+            aria-invalid={false}
             aria-label="Aria Label text Terra.datePicker.monthLabel"
             aria-required={false}
             className="date-input-month"
@@ -1507,6 +1538,7 @@ exports[`should render a default date input with all props 1`] = `
           >
             <input
               aria-describedby="terra-date-picker-description-format-00000000-0000-0000-0000-000000000000"
+              aria-invalid={false}
               aria-label="Aria Label text Terra.datePicker.monthLabel"
               aria-required={false}
               className="form-input date-input-month"
@@ -1532,6 +1564,7 @@ exports[`should render a default date input with all props 1`] = `
           </span>
           <Input
             aria-describedby="terra-date-picker-description-format-00000000-0000-0000-0000-000000000000"
+            aria-invalid={false}
             aria-label="Aria Label text Terra.datePicker.dayLabel"
             aria-required={false}
             className="date-input-day"
@@ -1554,6 +1587,7 @@ exports[`should render a default date input with all props 1`] = `
           >
             <input
               aria-describedby="terra-date-picker-description-format-00000000-0000-0000-0000-000000000000"
+              aria-invalid={false}
               aria-label="Aria Label text Terra.datePicker.dayLabel"
               aria-required={false}
               className="form-input date-input-day"
@@ -1579,6 +1613,7 @@ exports[`should render a default date input with all props 1`] = `
           </span>
           <Input
             aria-describedby="terra-date-picker-description-format-00000000-0000-0000-0000-000000000000"
+            aria-invalid={false}
             aria-label="Aria Label text Terra.datePicker.yearLabel"
             aria-required={false}
             className="date-input-year"
@@ -1601,6 +1636,7 @@ exports[`should render a default date input with all props 1`] = `
           >
             <input
               aria-describedby="terra-date-picker-description-format-00000000-0000-0000-0000-000000000000"
+              aria-invalid={false}
               aria-label="Aria Label text Terra.datePicker.yearLabel"
               aria-required={false}
               className="form-input date-input-year"
diff --git a/packages/terra-date-picker/tests/jest/__snapshots__/DatePicker.test.jsx.snap b/packages/terra-date-picker/tests/jest/__snapshots__/DatePicker.test.jsx.snap
index ca98de23ac2..503d4704acd 100644
--- a/packages/terra-date-picker/tests/jest/__snapshots__/DatePicker.test.jsx.snap
+++ b/packages/terra-date-picker/tests/jest/__snapshots__/DatePicker.test.jsx.snap
@@ -381,6 +381,7 @@ exports[`correctly applies the theme context className 1`] = `
                             day={
                               <Input
                                 aria-describedby="terra-date-picker-description-format-00000000-0000-0000-0000-000000000000"
+                                aria-invalid={false}
                                 aria-label="Terra.datePicker.dayLabel"
                                 aria-required={false}
                                 className="date-input-day"
@@ -404,6 +405,7 @@ exports[`correctly applies the theme context className 1`] = `
                             month={
                               <Input
                                 aria-describedby="terra-date-picker-description-format-00000000-0000-0000-0000-000000000000"
+                                aria-invalid={false}
                                 aria-label="Terra.datePicker.monthLabel"
                                 aria-required={false}
                                 className="date-input-month"
@@ -434,6 +436,7 @@ exports[`correctly applies the theme context className 1`] = `
                             year={
                               <Input
                                 aria-describedby="terra-date-picker-description-format-00000000-0000-0000-0000-000000000000"
+                                aria-invalid={false}
                                 aria-label="Terra.datePicker.yearLabel"
                                 aria-required={false}
                                 className="date-input-year"
@@ -457,6 +460,7 @@ exports[`correctly applies the theme context className 1`] = `
                           >
                             <Input
                               aria-describedby="terra-date-picker-description-format-00000000-0000-0000-0000-000000000000"
+                              aria-invalid={false}
                               aria-label="Terra.datePicker.monthLabel"
                               aria-required={false}
                               className="date-input-month"
@@ -478,6 +482,7 @@ exports[`correctly applies the theme context className 1`] = `
                             >
                               <input
                                 aria-describedby="terra-date-picker-description-format-00000000-0000-0000-0000-000000000000"
+                                aria-invalid={false}
                                 aria-label="Terra.datePicker.monthLabel"
                                 aria-required={false}
                                 className="form-input orion-fusion-theme date-input-month"
@@ -502,6 +507,7 @@ exports[`correctly applies the theme context className 1`] = `
                             </span>
                             <Input
                               aria-describedby="terra-date-picker-description-format-00000000-0000-0000-0000-000000000000"
+                              aria-invalid={false}
                               aria-label="Terra.datePicker.dayLabel"
                               aria-required={false}
                               className="date-input-day"
@@ -523,6 +529,7 @@ exports[`correctly applies the theme context className 1`] = `
                             >
                               <input
                                 aria-describedby="terra-date-picker-description-format-00000000-0000-0000-0000-000000000000"
+                                aria-invalid={false}
                                 aria-label="Terra.datePicker.dayLabel"
                                 aria-required={false}
                                 className="form-input orion-fusion-theme date-input-day"
@@ -547,6 +554,7 @@ exports[`correctly applies the theme context className 1`] = `
                             </span>
                             <Input
                               aria-describedby="terra-date-picker-description-format-00000000-0000-0000-0000-000000000000"
+                              aria-invalid={false}
                               aria-label="Terra.datePicker.yearLabel"
                               aria-required={false}
                               className="date-input-year"
@@ -568,6 +576,7 @@ exports[`correctly applies the theme context className 1`] = `
                             >
                               <input
                                 aria-describedby="terra-date-picker-description-format-00000000-0000-0000-0000-000000000000"
+                                aria-invalid={false}
                                 aria-label="Terra.datePicker.yearLabel"
                                 aria-required={false}
                                 className="form-input orion-fusion-theme date-input-year"
diff --git a/packages/terra-date-picker/tests/jest/__snapshots__/DatePickerField.test.jsx.snap b/packages/terra-date-picker/tests/jest/__snapshots__/DatePickerField.test.jsx.snap
index d316b9c4196..b909eea5163 100644
--- a/packages/terra-date-picker/tests/jest/__snapshots__/DatePickerField.test.jsx.snap
+++ b/packages/terra-date-picker/tests/jest/__snapshots__/DatePickerField.test.jsx.snap
@@ -683,6 +683,7 @@ exports[`should render a DatePickerField with props 1`] = `
                                   day={
                                     <Input
                                       aria-describedby="test-date-picker-error test-date-picker-help"
+                                      aria-invalid={true}
                                       aria-label="Label Test Terra.datePicker.dayLabel"
                                       aria-required={true}
                                       className="date-input-day"
@@ -706,6 +707,7 @@ exports[`should render a DatePickerField with props 1`] = `
                                   month={
                                     <Input
                                       aria-describedby="test-date-picker-error test-date-picker-help"
+                                      aria-invalid={true}
                                       aria-label="Label Test Terra.datePicker.monthLabel"
                                       aria-required={true}
                                       className="date-input-month"
@@ -736,6 +738,7 @@ exports[`should render a DatePickerField with props 1`] = `
                                   year={
                                     <Input
                                       aria-describedby="test-date-picker-error test-date-picker-help"
+                                      aria-invalid={true}
                                       aria-label="Label Test Terra.datePicker.yearLabel"
                                       aria-required={true}
                                       className="date-input-year"
@@ -759,6 +762,7 @@ exports[`should render a DatePickerField with props 1`] = `
                                 >
                                   <Input
                                     aria-describedby="test-date-picker-error test-date-picker-help"
+                                    aria-invalid={true}
                                     aria-label="Label Test Terra.datePicker.monthLabel"
                                     aria-required={true}
                                     className="date-input-month"
@@ -780,6 +784,7 @@ exports[`should render a DatePickerField with props 1`] = `
                                   >
                                     <input
                                       aria-describedby="test-date-picker-error test-date-picker-help"
+                                      aria-invalid={true}
                                       aria-label="Label Test Terra.datePicker.monthLabel"
                                       aria-required={true}
                                       className="form-input date-input-month"
@@ -804,6 +809,7 @@ exports[`should render a DatePickerField with props 1`] = `
                                   </span>
                                   <Input
                                     aria-describedby="test-date-picker-error test-date-picker-help"
+                                    aria-invalid={true}
                                     aria-label="Label Test Terra.datePicker.dayLabel"
                                     aria-required={true}
                                     className="date-input-day"
@@ -825,6 +831,7 @@ exports[`should render a DatePickerField with props 1`] = `
                                   >
                                     <input
                                       aria-describedby="test-date-picker-error test-date-picker-help"
+                                      aria-invalid={true}
                                       aria-label="Label Test Terra.datePicker.dayLabel"
                                       aria-required={true}
                                       className="form-input date-input-day"
@@ -849,6 +856,7 @@ exports[`should render a DatePickerField with props 1`] = `
                                   </span>
                                   <Input
                                     aria-describedby="test-date-picker-error test-date-picker-help"
+                                    aria-invalid={true}
                                     aria-label="Label Test Terra.datePicker.yearLabel"
                                     aria-required={true}
                                     className="date-input-year"
@@ -870,6 +878,7 @@ exports[`should render a DatePickerField with props 1`] = `
                                   >
                                     <input
                                       aria-describedby="test-date-picker-error test-date-picker-help"
+                                      aria-invalid={true}
                                       aria-label="Label Test Terra.datePicker.yearLabel"
                                       aria-required={true}
                                       className="form-input date-input-year"
@@ -1557,6 +1566,7 @@ exports[`should render a default DatePickerField component 1`] = `
                                   day={
                                     <Input
                                       aria-describedby="test-date-picker-help"
+                                      aria-invalid={false}
                                       aria-label="Label Terra.datePicker.dayLabel"
                                       aria-required={false}
                                       className="date-input-day"
@@ -1580,6 +1590,7 @@ exports[`should render a default DatePickerField component 1`] = `
                                   month={
                                     <Input
                                       aria-describedby="test-date-picker-help"
+                                      aria-invalid={false}
                                       aria-label="Label Terra.datePicker.monthLabel"
                                       aria-required={false}
                                       className="date-input-month"
@@ -1610,6 +1621,7 @@ exports[`should render a default DatePickerField component 1`] = `
                                   year={
                                     <Input
                                       aria-describedby="test-date-picker-help"
+                                      aria-invalid={false}
                                       aria-label="Label Terra.datePicker.yearLabel"
                                       aria-required={false}
                                       className="date-input-year"
@@ -1633,6 +1645,7 @@ exports[`should render a default DatePickerField component 1`] = `
                                 >
                                   <Input
                                     aria-describedby="test-date-picker-help"
+                                    aria-invalid={false}
                                     aria-label="Label Terra.datePicker.monthLabel"
                                     aria-required={false}
                                     className="date-input-month"
@@ -1654,6 +1667,7 @@ exports[`should render a default DatePickerField component 1`] = `
                                   >
                                     <input
                                       aria-describedby="test-date-picker-help"
+                                      aria-invalid={false}
                                       aria-label="Label Terra.datePicker.monthLabel"
                                       aria-required={false}
                                       className="form-input date-input-month"
@@ -1678,6 +1692,7 @@ exports[`should render a default DatePickerField component 1`] = `
                                   </span>
                                   <Input
                                     aria-describedby="test-date-picker-help"
+                                    aria-invalid={false}
                                     aria-label="Label Terra.datePicker.dayLabel"
                                     aria-required={false}
                                     className="date-input-day"
@@ -1699,6 +1714,7 @@ exports[`should render a default DatePickerField component 1`] = `
                                   >
                                     <input
                                       aria-describedby="test-date-picker-help"
+                                      aria-invalid={false}
                                       aria-label="Label Terra.datePicker.dayLabel"
                                       aria-required={false}
                                       className="form-input date-input-day"
@@ -1723,6 +1739,7 @@ exports[`should render a default DatePickerField component 1`] = `
                                   </span>
                                   <Input
                                     aria-describedby="test-date-picker-help"
+                                    aria-invalid={false}
                                     aria-label="Label Terra.datePicker.yearLabel"
                                     aria-required={false}
                                     className="date-input-year"
@@ -1744,6 +1761,7 @@ exports[`should render a default DatePickerField component 1`] = `
                                   >
                                     <input
                                       aria-describedby="test-date-picker-help"
+                                      aria-invalid={false}
                                       aria-label="Label Terra.datePicker.yearLabel"
                                       aria-required={false}
                                       className="form-input date-input-year"
@@ -2539,6 +2557,7 @@ exports[`should render a valid DatePickerField with props 1`] = `
                                   day={
                                     <Input
                                       aria-describedby="test-date-picker-help"
+                                      aria-invalid={false}
                                       aria-label="Label Test Terra.datePicker.dayLabel"
                                       aria-required={true}
                                       className="date-input-day"
@@ -2562,6 +2581,7 @@ exports[`should render a valid DatePickerField with props 1`] = `
                                   month={
                                     <Input
                                       aria-describedby="test-date-picker-help"
+                                      aria-invalid={false}
                                       aria-label="Label Test Terra.datePicker.monthLabel"
                                       aria-required={true}
                                       className="date-input-month"
@@ -2592,6 +2612,7 @@ exports[`should render a valid DatePickerField with props 1`] = `
                                   year={
                                     <Input
                                       aria-describedby="test-date-picker-help"
+                                      aria-invalid={false}
                                       aria-label="Label Test Terra.datePicker.yearLabel"
                                       aria-required={true}
                                       className="date-input-year"
@@ -2615,6 +2636,7 @@ exports[`should render a valid DatePickerField with props 1`] = `
                                 >
                                   <Input
                                     aria-describedby="test-date-picker-help"
+                                    aria-invalid={false}
                                     aria-label="Label Test Terra.datePicker.monthLabel"
                                     aria-required={true}
                                     className="date-input-month"
@@ -2636,6 +2658,7 @@ exports[`should render a valid DatePickerField with props 1`] = `
                                   >
                                     <input
                                       aria-describedby="test-date-picker-help"
+                                      aria-invalid={false}
                                       aria-label="Label Test Terra.datePicker.monthLabel"
                                       aria-required={true}
                                       className="form-input date-input-month"
@@ -2660,6 +2683,7 @@ exports[`should render a valid DatePickerField with props 1`] = `
                                   </span>
                                   <Input
                                     aria-describedby="test-date-picker-help"
+                                    aria-invalid={false}
                                     aria-label="Label Test Terra.datePicker.dayLabel"
                                     aria-required={true}
                                     className="date-input-day"
@@ -2681,6 +2705,7 @@ exports[`should render a valid DatePickerField with props 1`] = `
                                   >
                                     <input
                                       aria-describedby="test-date-picker-help"
+                                      aria-invalid={false}
                                       aria-label="Label Test Terra.datePicker.dayLabel"
                                       aria-required={true}
                                       className="form-input date-input-day"
@@ -2705,6 +2730,7 @@ exports[`should render a valid DatePickerField with props 1`] = `
                                   </span>
                                   <Input
                                     aria-describedby="test-date-picker-help"
+                                    aria-invalid={false}
                                     aria-label="Label Test Terra.datePicker.yearLabel"
                                     aria-required={true}
                                     className="date-input-year"
@@ -2726,6 +2752,7 @@ exports[`should render a valid DatePickerField with props 1`] = `
                                   >
                                     <input
                                       aria-describedby="test-date-picker-help"
+                                      aria-invalid={false}
                                       aria-label="Label Test Terra.datePicker.yearLabel"
                                       aria-required={true}
                                       className="form-input date-input-year"
diff --git a/packages/terra-framework-docs/CHANGELOG.md b/packages/terra-framework-docs/CHANGELOG.md
index ca3b676fcf3..b6bb0ba9c41 100644
--- a/packages/terra-framework-docs/CHANGELOG.md
+++ b/packages/terra-framework-docs/CHANGELOG.md
@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Changed
+  * Updated the `terra-date-time-picker` timezone example.
+
 ## 1.66.0 - (February 20, 2024)
 
 * Changed
diff --git a/packages/terra-framework-docs/src/terra-dev-site/doc/date-time-picker/example/DateTimePickerTimeZone.jsx b/packages/terra-framework-docs/src/terra-dev-site/doc/date-time-picker/example/DateTimePickerTimeZone.jsx
index 68f29a3f5e6..a39835fb115 100644
--- a/packages/terra-framework-docs/src/terra-dev-site/doc/date-time-picker/example/DateTimePickerTimeZone.jsx
+++ b/packages/terra-framework-docs/src/terra-dev-site/doc/date-time-picker/example/DateTimePickerTimeZone.jsx
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import DateTimePicker from 'terra-date-time-picker/lib/DateTimePicker';
 import moment from 'moment-timezone';
 import Field from 'terra-form-field';
+import Fieldset from 'terra-form-fieldset';
 import DateTimeUtils from 'terra-date-time-picker/lib/DateTimeUtils';
 
 function DateTimePickerTimeZone() {
@@ -21,20 +22,20 @@ function DateTimePickerTimeZone() {
         Selected ISO Date Time:
         {dateTime}
       </p>
-      <p>
-        Initial Timezone:
-        {timeZone}
-      </p>
-      <Field label="Enter Date/Time" htmlFor="timeZone">
-        <DateTimePicker
-          ariaLabel="Enter Date/Time"
-          name="date-time-picker-example"
-          dateInputAttributes={{ id: 'timezone' }}
-          onChange={handleDateTimeChange}
-          initialTimeZone={timeZone}
-          value={dateTime}
-        />
-      </Field>
+      <Fieldset
+        legend={`Initial Timezone: ${timeZone}`}
+      >
+        <Field label="Enter Date/Time" htmlFor="timeZone">
+          <DateTimePicker
+            ariaLabel="Enter Date/Time"
+            name="date-time-picker-example"
+            dateInputAttributes={{ id: 'timezone' }}
+            onChange={handleDateTimeChange}
+            initialTimeZone={timeZone}
+            value={dateTime}
+          />
+        </Field>
+      </Fieldset>
     </>
   );
 }