Merge pull request #3253 from liv7c/fixes/fix_prev_next_month_year_ar…

…ia_label

Fix aria labels for previous and next month or year

src/calendar.jsx

@@ -475,9 +475,15 @@ export default class Calendar extends React.Component {
       this.props.showQuarterYearPicker ||
       this.props.showYearPicker;
 
+    const { previousMonthButtonLabel, previousYearButtonLabel } = this.props;
+
     const {
-      previousMonthAriaLabel = "Previous Month",
-      previousYearAriaLabel = "Previous Year",
+      previousMonthAriaLabel = typeof previousMonthButtonLabel === "string"
+        ? previousMonthButtonLabel
+        : "Previous Month",
+      previousYearAriaLabel = typeof previousYearButtonLabel === "string"
+        ? previousYearButtonLabel
+        : "Previous Year",
     } = this.props;
 
     return (
@@ -571,9 +577,14 @@ export default class Calendar extends React.Component {
       this.props.showQuarterYearPicker ||
       this.props.showYearPicker;
 
+    const { nextMonthButtonLabel, nextYearButtonLabel } = this.props;
     const {
-      nextMonthAriaLabel = "Next Month",
-      nextYearAriaLabel = "Next Year",
+      nextMonthAriaLabel = typeof nextMonthButtonLabel === "string"
+        ? nextMonthButtonLabel
+        : "Next Month",
+      nextYearAriaLabel = typeof nextYearButtonLabel === "string"
+        ? nextYearButtonLabel
+        : "Next Year",
     } = this.props;
 
     return (

src/index.jsx

@@ -102,9 +102,13 @@ export default class DatePicker extends React.Component {
       strictParsing: false,
       timeIntervals: 30,
       timeCaption: "Time",
+      previousMonthAriaLabel: "Previous Month",
       previousMonthButtonLabel: "Previous Month",
+      nextMonthAriaLabel: "Next Month",
       nextMonthButtonLabel: "Next Month",
+      previousYearAriaLabel: "Previous Year",
       previousYearButtonLabel: "Previous Year",
+      nextYearAriaLabel: "Next Year",
       nextYearButtonLabel: "Next Year",
       timeInputLabel: "Time",
       enableTabLoop: true,
@@ -244,15 +248,19 @@ export default class DatePicker extends React.Component {
     useShortMonthInDropdown: PropTypes.bool,
     clearButtonTitle: PropTypes.string,
     clearButtonClassName: PropTypes.string,
+    previousMonthAriaLabel: PropTypes.string,
     previousMonthButtonLabel: PropTypes.oneOfType([
       PropTypes.string,
       PropTypes.node,
     ]),
+    nextMonthAriaLabel: PropTypes.string,
     nextMonthButtonLabel: PropTypes.oneOfType([
       PropTypes.string,
       PropTypes.node,
     ]),
+    previousYearAriaLabel: PropTypes.string,
     previousYearButtonLabel: PropTypes.string,
+    nextYearAriaLabel: PropTypes.string,
     nextYearButtonLabel: PropTypes.string,
     timeInputLabel: PropTypes.string,
     renderCustomHeader: PropTypes.func,
@@ -907,9 +915,13 @@ export default class DatePicker extends React.Component {
         container={this.props.calendarContainer}
         yearItemNumber={this.props.yearItemNumber}
         yearDropdownItemNumber={this.props.yearDropdownItemNumber}
+        previousMonthAriaLabel={this.props.previousMonthAriaLabel}
         previousMonthButtonLabel={this.props.previousMonthButtonLabel}
+        nextMonthAriaLabel={this.props.nextMonthAriaLabel}
         nextMonthButtonLabel={this.props.nextMonthButtonLabel}
+        previousYearAriaLabel={this.props.previousYearAriaLabel}
         previousYearButtonLabel={this.props.previousYearButtonLabel}
+        nextYearAriaLabel={this.props.nextYearAriaLabel}
         nextYearButtonLabel={this.props.nextYearButtonLabel}
         timeInputLabel={this.props.timeInputLabel}
         disabledKeyboardNavigation={this.props.disabledKeyboardNavigation}

test/calendar_test.js

@@ -194,6 +194,114 @@ describe("Calendar", function () {
     });
   });
 
+  it("should render the correct default aria labels for next and prev months buttons", () => {
+    const calendar = getCalendar();
+    const previousButtonAriaLabel = calendar
+      .find(".react-datepicker__navigation--previous")
+      .prop("aria-label");
+    const nextButtonAriaLabel = calendar
+      .find(".react-datepicker__navigation--next")
+      .prop("aria-label");
+
+    expect(previousButtonAriaLabel).to.equal("Previous Month");
+    expect(nextButtonAriaLabel).to.equal("Next Month");
+  });
+
+  it("should render by default aria labels for next and prev months button equal to the next and prev buttons text", () => {
+    const previousMonthButtonLabel = "Go to previous month";
+    const nextMonthButtonLabel = "Go to next month";
+    const calendar = getCalendar({
+      previousMonthButtonLabel,
+      nextMonthButtonLabel,
+    });
+
+    const previousButtonAriaLabel = calendar
+      .find(".react-datepicker__navigation--previous")
+      .prop("aria-label");
+    const nextButtonAriaLabel = calendar
+      .find(".react-datepicker__navigation--next")
+      .prop("aria-label");
+
+    expect(previousButtonAriaLabel).to.equal(previousMonthButtonLabel);
+    expect(nextButtonAriaLabel).to.equal(nextMonthButtonLabel);
+  });
+
+  it("should allow user to pass a custom aria label for next and/or previous month button", () => {
+    const previousMonthAriaLabel = "Go to the previous month of the year";
+    const nextMonthAriaLabel = "Go to the next month of the year";
+    const calendar = getCalendar({
+      previousMonthButtonLabel: "Go to previous month",
+      nextMonthButtonLabel: "Go to next month",
+      previousMonthAriaLabel,
+      nextMonthAriaLabel,
+    });
+
+    const previousButtonAriaLabel = calendar
+      .find(".react-datepicker__navigation--previous")
+      .prop("aria-label");
+    const nextButtonAriaLabel = calendar
+      .find(".react-datepicker__navigation--next")
+      .prop("aria-label");
+
+    expect(previousButtonAriaLabel).to.equal(previousButtonAriaLabel);
+    expect(nextButtonAriaLabel).to.equal(nextButtonAriaLabel);
+  });
+
+  it("should render the correct default aria labels for next and prev year buttons", () => {
+    const calendar = getCalendar({ showYearPicker: true });
+    const previousButtonAriaLabel = calendar
+      .find(".react-datepicker__navigation--previous")
+      .prop("aria-label");
+    const nextButtonAriaLabel = calendar
+      .find(".react-datepicker__navigation--next")
+      .prop("aria-label");
+
+    expect(previousButtonAriaLabel).to.equal("Previous Year");
+    expect(nextButtonAriaLabel).to.equal("Next Year");
+  });
+
+  it("should render by default aria labels for next and prev year buttons equal to the next and prev buttons text", () => {
+    const previousYearButtonLabel = "Go to previous year";
+    const nextYearButtonLabel = "Go to next year";
+    const calendar = getCalendar({
+      showYearPicker: true,
+      previousYearButtonLabel,
+      nextYearButtonLabel,
+    });
+
+    const previousButtonAriaLabel = calendar
+      .find(".react-datepicker__navigation--previous")
+      .prop("aria-label");
+    const nextButtonAriaLabel = calendar
+      .find(".react-datepicker__navigation--next")
+      .prop("aria-label");
+
+    expect(previousButtonAriaLabel).to.equal(previousYearButtonLabel);
+    expect(nextButtonAriaLabel).to.equal(nextYearButtonLabel);
+  });
+
+  it("should allow user to pass a custom aria label for next and/or previous year button", () => {
+    const previousYearAriaLabel = "Go to the previous year";
+    const nextYearAriaLabel = "Go to the next year";
+    const calendar = getCalendar({
+      showYearPicker: true,
+      previousYearButtonLabel: "Go to prev year",
+      nextYearButtonLabel: "Go to next year",
+      previousYearAriaLabel,
+      nextYearAriaLabel,
+    });
+
+    const previousButtonAriaLabel = calendar
+      .find(".react-datepicker__navigation--previous")
+      .prop("aria-label");
+    const nextButtonAriaLabel = calendar
+      .find(".react-datepicker__navigation--next")
+      .prop("aria-label");
+
+    expect(previousButtonAriaLabel).to.equal(previousYearAriaLabel);
+    expect(nextButtonAriaLabel).to.equal(nextYearAriaLabel);
+  });
+
   describe("custom header", function () {
     const months = [
       "January",