[date-time-picker] Defect fixes (#2036)

.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'

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

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}

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,15 +465,15 @@ 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) => {
     this.setState({
       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) => {

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',
+};

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));
     }
   }