Merge pull request #4697 from lasseklovstad/mont-aria-label-locale

Use locale for month aria labels
Hacker0x01 · Apr 16, 2024 · e3cbd2e · e3cbd2e
2 parents 5d37adc + e52335d
commit e3cbd2e
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 3 deletions.
diff --git 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

diff --git 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";