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