Repository: Hacker0x01/react-datepicker
Pull request #4697 (2024-04-16 07:33:21)

Use locale for month aria labels
## Description
Added using locale for aria labels in Month component

Couldn't find any issues on this...

**Problem**
When showing MonthYearPicker the locale is not used when formatting date. -> Screenreaders will always read english months...

**Changes**
I have added using locale when formatting both the month listbox and options.

## Contribution checklist
- [x] I have followed the [contributing guidelines](https://github.com/Hacker0x01/react-datepicker/blob/main/CONTRIBUTING.md).
- [x] I have added sufficient test coverage for my changes.
- [x] I have formatted my code with Prettier and checked for linting issues with ESLint for code readability.



Patch:
diff --git a/src/month.jsx b/src/month.jsx
index 8128fe30..66842f2f 100644
--- a/src/month.jsx
+++ b/src/month.jsx
@@ -622,15 +622,15 @@ export default class Month extends React.Component {
       chooseDayAriaLabelPrefix = "Choose",
       disabledDayAriaLabelPrefix = "Not available",
       day,
+      locale,
     } = this.props;
-
     const labelDate = utils.setMonth(day, month);
     const prefix =
       this.isDisabled(labelDate) || this.isExcluded(labelDate)
         ? disabledDayAriaLabelPrefix
         : chooseDayAriaLabelPrefix;
 
-    return `${prefix} ${utils.formatDate(labelDate, "MMMM yyyy")}`;
+    return `${prefix} ${utils.formatDate(labelDate, "MMMM yyyy", locale)}`;
   };
 
   getQuarterClassNames = (q) => {
@@ -830,7 +830,7 @@ export default class Month extends React.Component {
         onPointerLeave={
           this.props.usePointerEvent ? this.handleMouseLeave : undefined
         }
-        aria-label={`${formattedAriaLabelPrefix}${utils.formatDate(day, "MMMM, yyyy")}`}
+        aria-label={`${formattedAriaLabelPrefix}${utils.formatDate(day, "MMMM, yyyy", this.props.locale)}`}
         role="listbox"
       >
         {showMonthYearPicker


Test patch:
diff --git a/test/month_test.test.js b/test/month_test.test.js
index 5b99ebcc..b8d5a30b 100644
--- a/test/month_test.test.js
+++ b/test/month_test.test.js
@@ -6,6 +6,7 @@ import range from "lodash/range";
 import * as utils from "../src/date_utils";
 import { runAxe } from "./run_axe";
 import { getKey } from "./test_utils";
+import { es } from "date-fns/locale";
 
 describe("Month", () => {
   function assertDateRangeInclusive(month, start, end) {
@@ -59,6 +60,36 @@ describe("Month", () => {
     ).toContain(expectedAriaLabel);
   });
 
+  it("should display month listbox aria-label in Spanish if Spanish locale is provided", () => {
+    utils.registerLocale("es", es);
+    const date = utils.newDate("2015-12-01");
+    const { container } = render(
+      <Month day={date} locale="es" showMonthYearPicker />,
+    );
+    const expectedAriaLabel = utils.formatDate(date, "MMMM, yyyy", "es");
+
+    expect(
+      container
+        .querySelector(".react-datepicker__month")
+        .getAttribute("aria-label"),
+    ).toContain(expectedAriaLabel);
+  });
+
+  it("should display month options aria-label in Spanish if Spanish locale is provided", () => {
+    utils.registerLocale("es", es);
+    const date = utils.newDate("2015-01-01");
+    const { container } = render(
+      <Month day={date} locale="es" showMonthYearPicker />,
+    );
+    const expectedAriaLabel = utils.formatDate(date, "MMMM yyyy", "es");
+
+    expect(
+      container
+        .querySelectorAll(".react-datepicker__month-text")[0]
+        .getAttribute("aria-label"),
+    ).toContain(expectedAriaLabel);
+  });
+
   it("should have the month aria-label with the specified prefix", () => {
     const date = utils.newDate("2015-12-01");
     const ariaLabelPrefix = "Selected Month";