fix: missing aria labels in date range picker (#2832)

* fix(date-range-picker): ensure label props are reflected in aria labels * docs: added missing label to date range picker * chore: add changesets * Update .changeset/gentle-pigs-admire.md Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> --------- Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
nextui-org · Apr 22, 2024 · 1cc5215 · 1cc5215
1 parent 10b0e47
commit 1cc5215
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 10 deletions.
diff --git a/.changeset/gentle-pigs-admire.md 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
@@ -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,21 +9,23 @@ 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"
       />
       <DateRangePicker
         defaultValue={{
           start: parseAbsoluteToLocal("2024-04-01T07:45:00Z"),
           end: parseAbsoluteToLocal("2024-04-14T19:15:00Z"),
         }}
+        label="Stay duration"
         labelPlacement="outside"
       />
-  </div>
+    </div>
   );
 }`;
 
 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
@@ -57,7 +57,6 @@ export type UseDateRangePickerProps<T extends DateValue> = Props<T> & AriaDateRa
 
 export function useDateRangePicker<T extends DateValue>({
   as,
-  label,
   isInvalid,
   description,
   startContent,
@@ -96,8 +95,6 @@ export function useDateRangePicker<T extends DateValue>({
 
   const popoverTriggerRef = useRef<HTMLDivElement>(null);
 
-  originalProps.minValue;
-
   let {
     groupProps,
     labelProps,
@@ -131,12 +128,15 @@ export function useDateRangePicker<T extends DateValue>({
   const showTimeField = !!timeGranularity;
 
   const labelPlacement = useMemo<DateInputVariantProps["labelPlacement"]>(() => {
-    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<T extends DateValue>({
   const getDateInputGroupProps = () => {
     return {
       as,
-      label,
+      label: originalProps.label,
       description,
       endContent,
       errorMessage,
@@ -400,7 +400,7 @@ export function useDateRangePicker<T extends DateValue>({
 
   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
@@ -138,6 +138,7 @@ const TimeZonesTemplate = (args: DateRangePickerProps) => (
     />
     <DateRangePicker
       // {...args}
+      aria-label="Event date"
       className="max-w-xs"
       defaultValue={{
         start: parseAbsoluteToLocal("2024-04-01T07:45:00Z"),