diff --git a/src/date-range-picker/__tests__/date-range-picker.test.tsx b/src/date-range-picker/__tests__/date-range-picker.test.tsx index 43c21b7c50..55df0353b1 100644 --- a/src/date-range-picker/__tests__/date-range-picker.test.tsx +++ b/src/date-range-picker/__tests__/date-range-picker.test.tsx @@ -5,6 +5,7 @@ import { act, render } from '@testing-library/react'; import Mockdate from 'mockdate'; import createWrapper from '../../../lib/components/test-utils/dom'; import DateRangePicker, { DateRangePickerProps } from '../../../lib/components/date-range-picker'; +import FormField from '../../../lib/components/form-field'; import DateRangePickerWrapper from '../../../lib/components/test-utils/dom/date-range-picker'; import { NonCancelableEventHandler } from '../../../lib/components/internal/events'; import { i18nStrings } from './i18n-strings'; @@ -83,6 +84,44 @@ describe('Date range picker', () => { const { wrapper } = renderDateRangePicker({ ...defaultProps, controlId: 'test' }); expect(wrapper.findTrigger().getElement()).toHaveAttribute('id', 'test'); }); + + test('does not pass through form field context to dropdown elements', () => { + const { container } = render( + + + + ); + const wrapper = createWrapper(container).findDateRangePicker()!; + act(() => wrapper.openDropdown()); + const dropdown = wrapper.findDropdown()!; + + expect(dropdown.findRelativeRangeRadioGroup()!.getElement()).toHaveAccessibleName( + i18nStrings.relativeRangeSelectionHeading + ); + + dropdown.findRelativeRangeRadioGroup()?.findButtons().at(-1)!.findNativeInput().click(); + expect(dropdown.findCustomRelativeRangeDuration()!.findNativeInput().getElement()).toHaveAccessibleName( + i18nStrings.customRelativeRangeDurationLabel + ); + expect(dropdown.findCustomRelativeRangeUnit()!.findTrigger().getElement()).toHaveAccessibleName( + [i18nStrings.customRelativeRangeUnitLabel, 'minutes'].join(' ') + ); + + changeMode(wrapper, 'absolute'); + + expect(dropdown.findStartDateInput()!.findNativeInput()!.getElement()).toHaveAccessibleName( + i18nStrings.startDateLabel + ); + expect(dropdown.findStartTimeInput()!.findNativeInput()!.getElement()).toHaveAccessibleName( + i18nStrings.startTimeLabel + ); + expect(dropdown.findEndDateInput()!.findNativeInput()!.getElement()).toHaveAccessibleName( + i18nStrings.endDateLabel + ); + expect(dropdown.findEndTimeInput()!.findNativeInput()!.getElement()).toHaveAccessibleName( + i18nStrings.endTimeLabel + ); + }); }); test('opens relative range mode by default', () => { diff --git a/src/date-range-picker/index.tsx b/src/date-range-picker/index.tsx index e8f535a5d6..ac89c2101d 100644 --- a/src/date-range-picker/index.tsx +++ b/src/date-range-picker/index.tsx @@ -16,7 +16,7 @@ import Dropdown from '../internal/components/dropdown'; import { useFocusTracker } from '../internal/hooks/use-focus-tracker'; import { useMobile } from '../internal/hooks/use-mobile'; import ButtonTrigger from '../internal/components/button-trigger'; -import { useFormFieldContext } from '../internal/context/form-field-context'; +import { FormFieldContext, useFormFieldContext } from '../internal/context/form-field-context'; import InternalIcon from '../icon/internal'; import { normalizeTimeOffset, shiftTimeOffset } from './time-offset'; import useBaseComponent from '../internal/hooks/use-base-component'; @@ -274,28 +274,31 @@ const DateRangePicker = React.forwardRef( expandToViewport={expandToViewport} dropdownId={dropdownId} > - {isDropDownOpen && ( - closeDropdown(true)} - value={value} - showClearButton={showClearButton} - isDateEnabled={isDateEnabled} - i18nStrings={i18nStrings} - onClear={onClear} - onApply={onApply} - relativeOptions={relativeOptions} - isValidRange={isValidRange} - dateOnly={dateOnly} - timeInputFormat={timeInputFormat} - rangeSelectorMode={rangeSelectorMode} - ariaLabelledby={ariaLabelledby} - ariaDescribedby={ariaDescribedby} - customAbsoluteRangeControl={customAbsoluteRangeControl} - /> - )} + {/* Reset form field context to prevent a wrapper form field from labelling all inputs inside the dropdown. */} + + {isDropDownOpen && ( + closeDropdown(true)} + value={value} + showClearButton={showClearButton} + isDateEnabled={isDateEnabled} + i18nStrings={i18nStrings} + onClear={onClear} + onApply={onApply} + relativeOptions={relativeOptions} + isValidRange={isValidRange} + dateOnly={dateOnly} + timeInputFormat={timeInputFormat} + rangeSelectorMode={rangeSelectorMode} + ariaLabelledby={ariaLabelledby} + ariaDescribedby={ariaDescribedby} + customAbsoluteRangeControl={customAbsoluteRangeControl} + /> + )} + );