Skip to content

fix(datetime-input): landmark issue fix for accessibility MAXUIF-3057 #4048

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Dhanush-S8 wants to merge 4 commits into
base: next
Choose a base branch
from
+86 −82
Open

fix(datetime-input): landmark issue fix for accessibility MAXUIF-3057 #4048

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
69e78f0
fix(datetime-input): landmark issue fix for accessibility MAXUIF-3057
Dhanush-S8 Nov 28, 2025
6db5e38
fix(datetime-input): landmark issue fix for accessibility MAXUIF-3057
Dhanush-S8 Nov 28, 2025
1bc6748
fix(datetime-input): landmark issue fix for accessibility MAXUIF-3057
Dhanush-S8 Nov 28, 2025
939ecb4
fix(datetime-input): landmark issue fix for accessibility MAXUIF-3057
Dhanush-S8 Nov 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
168 changes: 86 additions & 82 deletions packages/react/src/components/DateTimePicker/DateTimePickerV2WithTimeSpinner.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -291,6 +291,9 @@ export const defaultProps = {
invalidDateText: 'Date is required',
amString: 'AM',
pmString: 'PM',
buttonActions: 'Button actions',
datePickerContent: 'Date picker content',
datePickerReference: 'Date picker reference',
},
light: false,
locale: 'en',
Expand Down Expand Up @@ -492,7 +495,6 @@ const DateTimePicker = ({
closeOnSelect,
...others
}) => {
console.log(renderInPortal);
const id = useRef(others.id || uuidv4()).current;

React.useEffect(() => {
Expand Down Expand Up @@ -988,58 +990,60 @@ const DateTimePicker = ({
// eslint-disable-next-line react/prop-types
const CustomFooter = () => {
return (
<div className={`${iotPrefix}--date-time-picker__menu-btn-set`}>
{isCustomRange && !isSingleSelect && !hideBackButton ? (
<Button
kind="secondary"
className={`${iotPrefix}--date-time-picker__menu-btn ${iotPrefix}--date-time-picker__menu-btn-back`}
size="md"
{...others}
onClick={toggleIsCustomRange}
onKeyUp={handleSpecificKeyDown(['Enter', ' '], toggleIsCustomRange)}
>
{mergedI18n.backBtnLabel}
id={`back-${others.id}`}
</Button>
) : isSingleSelect ? (
<div role="region" aria-label={mergedI18n.buttonActions}>
<div className={`${iotPrefix}--date-time-picker__menu-btn-set`}>
{isCustomRange && !isSingleSelect && !hideBackButton ? (
<Button
kind="secondary"
className={`${iotPrefix}--date-time-picker__menu-btn ${iotPrefix}--date-time-picker__menu-btn-back`}
size="md"
{...others}
onClick={toggleIsCustomRange}
onKeyUp={handleSpecificKeyDown(['Enter', ' '], toggleIsCustomRange)}
>
{mergedI18n.backBtnLabel}
id={`back-${others.id}`}
</Button>
) : isSingleSelect ? (
<Button
kind="secondary"
className={`${iotPrefix}--date-time-picker__menu-btn ${iotPrefix}--date-time-picker__menu-btn-reset`}
size="md"
{...others}
id={`clear-${others.id}`}
onClick={onClearClick}
onMouseDown={(e) => e.preventDefault()}
onKeyUp={handleSpecificKeyDown(['Enter', ' '], onClearClick)}
>
{mergedI18n.resetBtnLabel}
</Button>
) : (
<Button
kind="secondary"
className={`${iotPrefix}--date-time-picker__menu-btn ${iotPrefix}--date-time-picker__menu-btn-cancel`}
onClick={onCancelClick}
size="md"
{...others}
id={`cancel-${others.id}`}
onKeyUp={handleSpecificKeyDown(['Enter', ' '], onCancelClick)}
>
{mergedI18n.cancelBtnLabel}
</Button>
)}
<Button
kind="secondary"
className={`${iotPrefix}--date-time-picker__menu-btn ${iotPrefix}--date-time-picker__menu-btn-reset`}
size="md"
kind="primary"
className={`${iotPrefix}--date-time-picker__menu-btn ${iotPrefix}--date-time-picker__menu-btn-apply`}
{...others}
id={`clear-${others.id}`}
onClick={onClearClick}
id={`apply-${others.id}`}
onClick={onApplyClick}
onKeyUp={handleSpecificKeyDown(['Enter', ' '], onApplyClick)}
onMouseDown={(e) => e.preventDefault()}
onKeyUp={handleSpecificKeyDown(['Enter', ' '], onClearClick)}
>
{mergedI18n.resetBtnLabel}
</Button>
) : (
<Button
kind="secondary"
className={`${iotPrefix}--date-time-picker__menu-btn ${iotPrefix}--date-time-picker__menu-btn-cancel`}
onClick={onCancelClick}
size="md"
{...others}
id={`cancel-${others.id}`}
onKeyUp={handleSpecificKeyDown(['Enter', ' '], onCancelClick)}
disabled={customRangeKind === PICKER_KINDS.SINGLE ? false : disableApply}
>
{mergedI18n.cancelBtnLabel}
{mergedI18n.applyBtnLabel}
</Button>
)}
<Button
kind="primary"
className={`${iotPrefix}--date-time-picker__menu-btn ${iotPrefix}--date-time-picker__menu-btn-apply`}
{...others}
id={`apply-${others.id}`}
onClick={onApplyClick}
onKeyUp={handleSpecificKeyDown(['Enter', ' '], onApplyClick)}
onMouseDown={(e) => e.preventDefault()}
size="md"
disabled={customRangeKind === PICKER_KINDS.SINGLE ? false : disableApply}
>
{mergedI18n.applyBtnLabel}
</Button>
</div>
</div>
);
};
Expand Down Expand Up @@ -1112,6 +1116,7 @@ const DateTimePicker = ({
const datePlaceHolder = humanValue?.split(splitToken)[0];

const datePickerContent = (
// eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
<div
ref={dropdownRef}
className={`${iotPrefix}--date-time-picker__menu-scroll`}
Expand All @@ -1124,7 +1129,8 @@ const DateTimePicker = ({
(invalidRangeStartDate ? invalidDateWarningHeight : 0) -
(!hasTimeInput ? timeInputHeight : 0),
}}
role="presentation"
role="region"
aria-label={mergedI18n.datePickerContent}
onClick={(event) => event.stopPropagation()} // need to stop the event so that it will not close the menu
onKeyDown={(event) => event.stopPropagation()} // need to stop the event so that it will not close the menu
tabIndex="-1"
Expand Down Expand Up @@ -1331,7 +1337,7 @@ const DateTimePicker = ({
>
<DatePickerInput
labelText={mergedI18n.startDateLabel}
aria-label={mergedI18n.startAriaLabel}
aria-label={mergedI18n.startDateLabel}
id={`${id}-date-picker-input-start`}
invalid={invalidRangeStartDate}
invalidText={mergedI18n.invalidDateText}
Expand All @@ -1341,18 +1347,14 @@ const DateTimePicker = ({
{datePickerType === 'range' ? (
<DatePickerInput
labelText={mergedI18n.endDateLabel}
aria-label={mergedI18n.endAriaLabel}
id={`${id}-date-picker-input-end`}
/>
) : null}
</DatePicker>
</Layer>
</FormGroup>
{hasTimeInput ? (
<FormGroup
legendText=""
className={`${iotPrefix}--date-time-picker__menu-formgroup`}
>
<FormGroup className={`${iotPrefix}--date-time-picker__menu-formgroup`}>
<Layer>
<TimePickerDropdown
className={`${iotPrefix}--time-picker-dropdown`}
Expand Down Expand Up @@ -1484,34 +1486,36 @@ const DateTimePicker = ({

return (
<div className={`${iotPrefix}--date-time-pickerv2`} ref={containerRef}>
<div
ref={datePickerRef}
data-testid={testId}
id={`${id}-${iotPrefix}--date-time-pickerv2__wrapper`}
className={classnames(`${iotPrefix}--date-time-pickerv2__wrapper`, {
[`${iotPrefix}--date-time-pickerv2__wrapper--disabled`]: disabled,
[`${iotPrefix}--date-time-pickerv2__wrapper--invalid`]: invalidState,
})}
style={{ '--wrapper-width': hasIconOnly ? '3rem' : '20rem' }}
role="button"
onClick={onFieldClick}
onKeyDown={handleSpecificKeyDown(['Enter', ' ', 'Escape', 'ArrowDown'], (event) => {
// the onApplyClick event gets blocked when called via the keyboard from the flyout menu's
// custom footer. This is a catch to ensure the onApplyCLick is called correctly for preset
// ranges via the keyboard.
if (
(event.key === 'Enter' || event.key === ' ') &&
event.target.classList.contains(`${iotPrefix}--date-time-picker__menu-btn-apply`) &&
!isCustomRange
) {
onApplyClick();
}

onFieldInteraction(event);
})}
tabIndex={0}
>
{tooltipField}
<div role="region" aria-label={mergedI18n.datePickerReference}>
<div
ref={datePickerRef}
data-testid={testId}
id={`${id}-${iotPrefix}--date-time-pickerv2__wrapper`}
className={classnames(`${iotPrefix}--date-time-pickerv2__wrapper`, {
[`${iotPrefix}--date-time-pickerv2__wrapper--disabled`]: disabled,
[`${iotPrefix}--date-time-pickerv2__wrapper--invalid`]: invalidState,
})}
style={{ '--wrapper-width': hasIconOnly ? '3rem' : '20rem' }}
role="button"
onClick={onFieldClick}
onKeyDown={handleSpecificKeyDown(['Enter', ' ', 'Escape', 'ArrowDown'], (event) => {
// the onApplyClick event gets blocked when called via the keyboard from the flyout menu's
// custom footer. This is a catch to ensure the onApplyCLick is called correctly for preset
// ranges via the keyboard.
if (
(event.key === 'Enter' || event.key === ' ') &&
event.target.classList.contains(`${iotPrefix}--date-time-picker__menu-btn-apply`) &&
!isCustomRange
) {
onApplyClick();
}

onFieldInteraction(event);
})}
tabIndex={0}
>
{tooltipField}
</div>
</div>
{invalidState && !hasIconOnly ? (
<p
Expand Down
Loading