From 1cc5215ce6026da7e7736d74a5479b2f5b86c1ff Mon Sep 17 00:00:00 2001
From: Ryo Matsukawa <76232929+ryo-manba@users.noreply.github.com>
Date: Mon, 22 Apr 2024 22:38:22 +0900
Subject: [PATCH] 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>
---
 .changeset/gentle-pigs-admire.md                   |  5 +++++
 .../components/date-range-picker/time-zones.ts     |  8 +++++---
 .../date-picker/src/use-date-range-picker.ts       | 14 +++++++-------
 .../stories/date-range-picker.stories.tsx          |  1 +
 4 files changed, 18 insertions(+), 10 deletions(-)
 create mode 100644 .changeset/gentle-pigs-admire.md

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"
       />
       <DateRangePicker
@@ -16,14 +17,15 @@ export default function App() {
           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
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<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
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) => (
     />
     <DateRangePicker
       // {...args}
+      aria-label="Event date"
       className="max-w-xs"
       defaultValue={{
         start: parseAbsoluteToLocal("2024-04-01T07:45:00Z"),