Repository: Hacker0x01/react-datepicker (ts)

Issue:
Calendar Aria Labels is not updating corresponding to it's purpose
**Describe the bug**
The current implementation of the `Calendar` component fails to update aria labels according to the selection purpose, leading to accessibility issues.  The aria labels remain static, displaying "Choose Date" regardless of the selection type like `showTimeInput` or `showTimeSelect` or `showTimeSelectOnly`.

**The Problem**
The lack of dynamic aria labels hinders user accessibility, as it fails to provide clear information about the selection options available.

**Proposed Solution**
Implement functionality to update `aria-label` dynamically based on the selection purpose (date or date and time, or time only) to enhance user experience and accessibility.

**To Reproduce**
Render DatePicker with any time-related props and check `aria-label` of the element with the class `react-datepicker`.

Pull request:
Fix #4623: Add dynamic Calendar Aria Labels for selection clarity
Closes #4623

### Description
This PR updates the Calendar component to display dynamic aria-label based on the selection purpose (date/date and time/time only).  After this change the `aria-label` will be

- "Choose Date and Time" if either we pass `showTimeInput` or `showTimeSelect`.
- "Choose Time" if we pass `showTimeSelectOnly`.
- "Choose Date" in all the other cases.

### Changes Made
- Updated aria-label to reflect selection options like `showTimeInput` or `showTimeSelect` or `showTimeSelectOnly`.
- Added test cases for validation.

Patch:
diff --git a/src/calendar.jsx b/src/calendar.jsx
index 5d5fe939..9f5a3f84 100644
--- a/src/calendar.jsx
+++ b/src/calendar.jsx
@@ -1101,6 +1101,8 @@ export default class Calendar extends React.Component {
           className={classnames("react-datepicker", this.props.className, {
             "react-datepicker--time-only": this.props.showTimeSelectOnly,
           })}
+          showTime={this.props.showTimeSelect || this.props.showTimeInput}
+          showTimeSelectOnly={this.props.showTimeSelectOnly}
         >
           {this.renderAriaLiveRegion()}
           {this.renderPreviousButton()}
diff --git a/src/calendar_container.jsx b/src/calendar_container.jsx
index 2a0f6c8e..10ea8071 100644
--- a/src/calendar_container.jsx
+++ b/src/calendar_container.jsx
@@ -1,12 +1,21 @@
 import PropTypes from "prop-types";
 import React from "react";
 
-export default function CalendarContainer({ className, children }) {
+export default function CalendarContainer({
+  showTimeSelectOnly = false,
+  showTime = false,
+  className,
+  children,
+}) {
+  let ariaLabel = showTimeSelectOnly
+    ? "Choose Time"
+    : `Choose Date${showTime ? " and Time" : ""}`;
+
   return (
     <div
       className={className}
       role="dialog"
-      aria-label="Choose Date"
+      aria-label={ariaLabel}
       aria-modal="true"
     >
       {children}
@@ -15,6 +24,8 @@ export default function CalendarContainer({ className, children }) {
 }
 
 CalendarContainer.propTypes = {
+  showTimeSelectOnly: PropTypes.bool,
+  showTime: PropTypes.bool,
   className: PropTypes.string,
   children: PropTypes.node,
 };


Test patch:
diff --git a/test/calendar_test.test.js b/test/calendar_test.test.js
index 3625105b..6afbe248 100644
--- a/test/calendar_test.test.js
+++ b/test/calendar_test.test.js
@@ -2145,7 +2145,7 @@ describe("Calendar", () => {
   });
 
   describe("calendar container", () => {
-    it("should work", () => {
+    it("should render Calendar with accessibility props", () => {
       const { container } = render(
         <Calendar
           dateFormat={dateFormat}
@@ -2160,5 +2160,41 @@ describe("Calendar", () => {
       expect(dialog.getAttribute("aria-modal")).toBe("true");
       expect(dialog.getAttribute("aria-label")).toBe("Choose Date");
     });
+
+    it("should display corresponding aria-label for Calendar with showTimeSelect", () => {
+      const { container } = render(
+        <Calendar dateFormat={dateFormat} showTimeSelect />,
+      );
+
+      const dialog = container.querySelector(".react-datepicker");
+      expect(dialog).not.toBeNull();
+      expect(dialog.getAttribute("aria-label").toLowerCase().trim()).toBe(
+        "choose date and time",
+      );
+    });
+
+    it("should display corresponding aria-label for Calendar with showTimeInput", () => {
+      const { container } = render(
+        <Calendar dateFormat={dateFormat} showTimeInput />,
+      );
+
+      const dialog = container.querySelector(".react-datepicker");
+      expect(dialog).not.toBeNull();
+      expect(dialog.getAttribute("aria-label").toLowerCase().trim()).toBe(
+        "choose date and time",
+      );
+    });
+
+    it("should display corresponding aria-label for Calendar with showTimeSelectOnly", () => {
+      const { container } = render(
+        <Calendar dateFormat={dateFormat} showTimeSelectOnly />,
+      );
+
+      const dialog = container.querySelector(".react-datepicker");
+      expect(dialog).not.toBeNull();
+      expect(dialog.getAttribute("aria-label").toLowerCase().trim()).toBe(
+        "choose time",
+      );
+    });
   });
 });