diff --git a/src/month.jsx b/src/month.jsx
index 8128fe305..66842f2fd 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
diff --git a/test/month_test.test.js b/test/month_test.test.js
index 5b99ebcc8..b8d5a30b5 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(
+ ,
+ );
+ 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(
+ ,
+ );
+ 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";