From dd83bddf1c4bd473dcb34d761cd1b0bfed170e8f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Perttu=20L=C3=A4hteenlahti?= <perttu@noice.com>
Date: Mon, 15 Apr 2024 19:05:42 +0200
Subject: [PATCH 1/2] fix: Add aria-label to display the day of the week

---
 src/calendar.jsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/calendar.jsx b/src/calendar.jsx
index 6c7c217e9..dca56b404 100644
--- a/src/calendar.jsx
+++ b/src/calendar.jsx
@@ -444,6 +444,7 @@ export default class Calendar extends React.Component {
         return (
           <div
             key={offset}
+            aria-label={formatDate(day, "EEEE", this.props.locale)}
             className={clsx("react-datepicker__day-name", weekDayClassName)}
           >
             {weekDayName}

From fd4c02e8bb62c5dd3b7933977b7bfb82c465405f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Perttu=20L=C3=A4hteenlahti?= <perttu@noice.com>
Date: Mon, 15 Apr 2024 19:41:24 +0200
Subject: [PATCH 2/2] Add test for change

---
 test/calendar_test.test.js | 31 +++++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/test/calendar_test.test.js b/test/calendar_test.test.js
index f3fbf4656..8b70b1fd2 100644
--- a/test/calendar_test.test.js
+++ b/test/calendar_test.test.js
@@ -1882,6 +1882,37 @@ describe("Calendar", () => {
     });
   });
 
+  it("should add the aria-label correctly to day names", () => {
+    const expectedAriaLabels = [
+      "Sunday",
+      "Monday",
+      "Tuesday",
+      "Wednesday",
+      "Thursday",
+      "Friday",
+      "Saturday",
+    ];
+
+    const { container } = render(
+      <Calendar
+        dateFormat={DATE_FORMAT}
+        onSelect={() => {}}
+        onClickOutside={() => {}}
+      />,
+    );
+
+    const header = container.querySelector(".react-datepicker__header");
+    const dayNameElements = header.querySelectorAll(
+      ".react-datepicker__day-name",
+    );
+
+    dayNameElements.forEach((element, index) => {
+      expect(element.getAttribute("aria-label")).toBe(
+        expectedAriaLabels[index],
+      );
+    });
+  });
+
   it("should have a next-button with the provided aria-label for year", () => {
     const ariaLabel = "A label in my native language for next year";
     const { container } = render(