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