diff --git a/packages/terra-date-picker/CHANGELOG.md b/packages/terra-date-picker/CHANGELOG.md index 52b8e1fe966..1864c6e800d 100644 --- a/packages/terra-date-picker/CHANGELOG.md +++ b/packages/terra-date-picker/CHANGELOG.md @@ -2,6 +2,9 @@ ## Unreleased +* Fixed + * Focus is now retained on the calendar button when the calendar is closed in mobile view. + ## 4.109.0 - (May 14, 2024) * Changed diff --git a/packages/terra-date-picker/src/DatePicker.jsx b/packages/terra-date-picker/src/DatePicker.jsx index f3482278dfa..b67024bf745 100644 --- a/packages/terra-date-picker/src/DatePicker.jsx +++ b/packages/terra-date-picker/src/DatePicker.jsx @@ -278,6 +278,11 @@ class DatePicker extends React.Component { if (this.props.onClickOutside) { this.props.onClickOutside(event); } + setTimeout(() => { + if (this.calendarButton) { + this.calendarButton.focus(); + } + }, 100); } handleBlur(event) { diff --git a/packages/terra-date-time-picker/CHANGELOG.md b/packages/terra-date-time-picker/CHANGELOG.md index 1afcfd18e68..aaa60493bdc 100644 --- a/packages/terra-date-time-picker/CHANGELOG.md +++ b/packages/terra-date-time-picker/CHANGELOG.md @@ -2,6 +2,9 @@ ## Unreleased +* Added + * Introduced a new prop `disableButtonFocusOnClose` to optionally disable focusing the button when the calendar is closed. + ## 4.117.0 - (May 14, 2024) * Changed diff --git a/packages/terra-date-time-picker/src/DateTimePicker.jsx b/packages/terra-date-time-picker/src/DateTimePicker.jsx index 2597550b3b7..4f20ce6ce9f 100644 --- a/packages/terra-date-time-picker/src/DateTimePicker.jsx +++ b/packages/terra-date-time-picker/src/DateTimePicker.jsx @@ -141,6 +141,12 @@ const propTypes = { * ID must be htmlFor prop value with error text. */ errorId: PropTypes.string, + /** + * If true, the focus will not return to the button that opened the DatePicker when it is closed. + * This can be useful to prevent unintended focus behavior in certain user flows or accessibility contexts. + * Default is false, meaning focus will return to the button on close. + */ + disableButtonFocusOnClose: PropTypes.bool, }; const defaultProps = { @@ -167,6 +173,7 @@ const defaultProps = { timeVariant: DateTimeUtils.FORMAT_24_HOUR, initialTimeZone: DateTimeUtils.getLocalTimeZone(), errorId: '', + disableButtonFocusOnClose: false, }; class DateTimePicker extends React.Component { @@ -765,6 +772,7 @@ class DateTimePicker extends React.Component { value, timeVariant, errorId, + disableButtonFocusOnClose, ...customProps } = this.props; @@ -811,7 +819,7 @@ class DateTimePicker extends React.Component { value={dateValue} name="input" disabled={disabled} - disableButtonFocusOnClose + disableButtonFocusOnClose={disableButtonFocusOnClose} isIncomplete={isIncomplete} isInvalid={isInvalid} required={required} diff --git a/packages/terra-date-time-picker/tests/jest/__snapshots__/DateTimePicker.test.jsx.snap b/packages/terra-date-time-picker/tests/jest/__snapshots__/DateTimePicker.test.jsx.snap index f2a94b10eb2..c3a5dc90343 100644 --- a/packages/terra-date-time-picker/tests/jest/__snapshots__/DateTimePicker.test.jsx.snap +++ b/packages/terra-date-time-picker/tests/jest/__snapshots__/DateTimePicker.test.jsx.snap @@ -20,6 +20,7 @@ exports[`correctly applies the theme context className 1`] = ` exports[`renders DateTimePicker with correct ARIA attributes 1`] = `