diff --git a/.changeset/gentle-pigs-admire.md b/.changeset/gentle-pigs-admire.md new file mode 100644 index 0000000000..a974c8fda6 --- /dev/null +++ b/.changeset/gentle-pigs-admire.md @@ -0,0 +1,5 @@ +--- +"@nextui-org/date-picker": patch +--- + +Fixed missing aria labels in date range picker (#2804) diff --git a/apps/docs/content/components/date-range-picker/time-zones.ts b/apps/docs/content/components/date-range-picker/time-zones.ts index 5eabc703f0..ac08becc56 100644 --- a/apps/docs/content/components/date-range-picker/time-zones.ts +++ b/apps/docs/content/components/date-range-picker/time-zones.ts @@ -1,4 +1,4 @@ -const AppTs = `import {DateRangePicker} from "@nextui-org/react"; +const App = `import {DateRangePicker} from "@nextui-org/react"; import {parseZonedDateTime, parseAbsoluteToLocal} from "@internationalized/date"; export default function App() { @@ -9,6 +9,7 @@ export default function App() { start: parseZonedDateTime("2024-04-01T00:45[America/Los_Angeles]"), end: parseZonedDateTime("2024-04-14T11:15[America/Los_Angeles]"), }} + label="Stay duration" labelPlacement="outside" /> - + ); }`; const react = { - "/App.tsx": AppTs, + "/App.jsx": App, }; export default { diff --git a/packages/components/date-picker/src/use-date-range-picker.ts b/packages/components/date-picker/src/use-date-range-picker.ts index 6538a5dfc2..7851b31a77 100644 --- a/packages/components/date-picker/src/use-date-range-picker.ts +++ b/packages/components/date-picker/src/use-date-range-picker.ts @@ -57,7 +57,6 @@ export type UseDateRangePickerProps = Props & AriaDateRa export function useDateRangePicker({ as, - label, isInvalid, description, startContent, @@ -96,8 +95,6 @@ export function useDateRangePicker({ const popoverTriggerRef = useRef(null); - originalProps.minValue; - let { groupProps, labelProps, @@ -131,12 +128,15 @@ export function useDateRangePicker({ const showTimeField = !!timeGranularity; const labelPlacement = useMemo(() => { - if ((!originalProps.labelPlacement || originalProps.labelPlacement === "inside") && !label) { + if ( + (!originalProps.labelPlacement || originalProps.labelPlacement === "inside") && + !originalProps.label + ) { return "outside"; } return originalProps.labelPlacement ?? "inside"; - }, [originalProps.labelPlacement, label]); + }, [originalProps.labelPlacement, originalProps.label]); const shouldLabelBeOutside = labelPlacement === "outside" || labelPlacement === "outside-left"; @@ -371,7 +371,7 @@ export function useDateRangePicker({ const getDateInputGroupProps = () => { return { as, - label, + label: originalProps.label, description, endContent, errorMessage, @@ -400,7 +400,7 @@ export function useDateRangePicker({ return { state, - label, + label: originalProps.label, slots, classNames, endContent, diff --git a/packages/components/date-picker/stories/date-range-picker.stories.tsx b/packages/components/date-picker/stories/date-range-picker.stories.tsx index a7384a4df3..89464e22a6 100644 --- a/packages/components/date-picker/stories/date-range-picker.stories.tsx +++ b/packages/components/date-picker/stories/date-range-picker.stories.tsx @@ -138,6 +138,7 @@ const TimeZonesTemplate = (args: DateRangePickerProps) => ( />