Added props for fully dynamic aria-labels (#2062)

* Added props for fully dynamic aria-labels

* Fixed yarn lint error

* Revert "Fixed yarn lint error"

This reverts commit 430e659.

* Fixed yarn lint error

src/calendar.jsx

@@ -68,6 +68,10 @@ export default class Calendar extends React.Component {
 
   static propTypes = {
     adjustDateOnChange: PropTypes.bool,
+    previousMonthAriaLabel: PropTypes.string,
+    nextMonthAriaLabel: PropTypes.string,
+    previousYearAriaLabel: PropTypes.string,
+    nextYearAriaLabel: PropTypes.string,
     className: PropTypes.string,
     children: PropTypes.node,
     container: PropTypes.func,
@@ -389,12 +393,14 @@ export default class Calendar extends React.Component {
     const isForYear =
       this.props.showMonthYearPicker || this.props.showQuarterYearPicker;
 
+    const { previousMonthAriaLabel = "Previous Month", previousYearAriaLabel = "Previous Year" } = this.props;
+
     return (
       <button
         type="button"
         className={classes.join(" ")}
         onClick={clickHandler}
-        aria-label={isForYear ? "Previous Year" : "Previous Month"}
+        aria-label={isForYear ? previousYearAriaLabel : previousMonthAriaLabel}
       >
         {isForYear
           ? this.props.previousYearButtonLabel
@@ -455,12 +461,14 @@ export default class Calendar extends React.Component {
     const isForYear =
       this.props.showMonthYearPicker || this.props.showQuarterYearPicker;
 
+    const { nextMonthAriaLabel = "Previous Month", nextYearAriaLabel = "Previous Year" } = this.props;
+
     return (
       <button
         type="button"
         className={classes.join(" ")}
         onClick={clickHandler}
-        aria-label={isForYear ? "Next Year" : "Next Month"}
+        aria-label={isForYear ? nextYearAriaLabel : nextMonthAriaLabel}
       >
         {isForYear
           ? this.props.nextYearButtonLabel

src/day.jsx

@@ -19,6 +19,8 @@ import {
 
 export default class Day extends React.Component {
   static propTypes = {
+    ariaLabelPrefixWhenEnabled: PropTypes.string,
+    ariaLabelPrefixWhenDisabled: PropTypes.string,
     disabledKeyboardNavigation: PropTypes.bool,
     day: PropTypes.instanceOf(Date).isRequired,
     dayClassName: PropTypes.func,
@@ -237,9 +239,15 @@ export default class Day extends React.Component {
   };
 
   getAriaLabel = () => {
-    const { day } = this.props;
-    const prefix =
-      this.isDisabled() || this.isExcluded() ? "Not available" : "Choose";
+    const {
+            day,
+            ariaLabelPrefixWhenEnabled = "Choose",
+            ariaLabelPrefixWhenDisabled = "Not available" 
+    } = this.props;
+
+    const prefix = this.isDisabled() || this.isExcluded()
+                    ? ariaLabelPrefixWhenDisabled
+                    : ariaLabelPrefixWhenEnabled;
 
     return `${prefix} ${formatDate(day, "PPPP")}`;
   };

src/index.jsx

@@ -113,6 +113,7 @@ export default class DatePicker extends React.Component {
   static propTypes = {
     adjustDateOnChange: PropTypes.bool,
     allowSameDay: PropTypes.bool,
+    ariaLabelClose: PropTypes.string,
     ariaLabelledBy: PropTypes.string,
     autoComplete: PropTypes.string,
     autoFocus: PropTypes.bool,
@@ -834,14 +835,15 @@ export default class DatePicker extends React.Component {
   };
 
   renderClearButton = () => {
-    if (this.props.isClearable && this.props.selected != null) {
+    const { isClearable, selected, clearButtonTitle, ariaLabelClose = "Close" } = this.props;
+    if (isClearable && selected != null) {
       return (
         <button
           type="button"
           className="react-datepicker__close-icon"
-          aria-label="Close"
+          aria-label={ariaLabelClose}
           onClick={this.onClearClick}
-          title={this.props.clearButtonTitle}
+          title={clearButtonTitle}
           tabIndex={-1}
         />
       );

src/month.jsx

@@ -8,6 +8,7 @@ const FIXED_HEIGHT_STANDARD_WEEK_COUNT = 6;
 
 export default class Month extends React.Component {
   static propTypes = {
+    ariaLabelPrefix: PropTypes.string,
     disabledKeyboardNavigation: PropTypes.bool,
     day: PropTypes.instanceOf(Date).isRequired,
     dayClassName: PropTypes.func,
@@ -300,13 +301,13 @@ export default class Month extends React.Component {
   };
 
   render() {
-    const { showMonthYearPicker, showQuarterYearPicker } = this.props;
+    const { showMonthYearPicker, showQuarterYearPicker, day, ariaLabelPrefix = "month " } = this.props;
     return (
       <div
         className={this.getClassNames()}
         onMouseLeave={this.handleMouseLeave}
         role="listbox"
-        aria-label={"month-" + utils.formatDate(this.props.day, "yyyy-MM")}
+        aria-label={`${ariaLabelPrefix} ${utils.formatDate(day, "yyyy-MM")}`}
       >
         {showMonthYearPicker
           ? this.renderMonths()

src/week_number.jsx

@@ -5,7 +5,8 @@ import classnames from "classnames";
 
 export default class WeekNumber extends React.Component<{
   weekNumber: number,
-  onClick?: Function
+  onClick?: Function,
+  ariaLabelPrefix?: string
 }> {
   static propTypes = {
     weekNumber: PropTypes.number.isRequired,
@@ -19,17 +20,18 @@ export default class WeekNumber extends React.Component<{
   };
 
   render() {
+    const { weekNumber, ariaLabelPrefix = "week ", onClick } = this.props;
     const weekNumberClasses = {
       "react-datepicker__week-number": true,
-      "react-datepicker__week-number--clickable": !!this.props.onClick
+      "react-datepicker__week-number--clickable": !!onClick
     };
     return (
       <div
         className={classnames(weekNumberClasses)}
-        aria-label={`week-${this.props.weekNumber}`}
+        aria-label={`${ariaLabelPrefix} ${this.props.weekNumber}`}
         onClick={this.handleClick}
       >
-        {this.props.weekNumber}
+        {weekNumber}
       </div>
     );
   }

test/calendar_test.js

@@ -1201,4 +1201,58 @@ describe("Calendar", function() {
       assert.equal(ref, instance.containerRef.current);
     });
   });
+
+  it("should have a next-button with the provided aria-label for year", () => {
+    const ariaLabel = "A label in my native language for next year";
+    const shallowCalendar = mount(
+      <Calendar
+        nextYearAriaLabel={ariaLabel}
+        dateFormat={DATE_FORMAT}
+        onSelect={() => {}}
+        onClickOutside={() => {}}
+        showQuarterYearPicker
+      />
+    );
+    expect(shallowCalendar.html().indexOf(`aria-label="${ariaLabel}"`)).not.equal(-1);
+  });
+
+  it("should have a previous-button with the provided aria-label for year", () => {
+    const ariaLabel = "A label in my native language for previous year";
+    const shallowCalendar = mount(
+      <Calendar
+        previousYearAriaLabel={ariaLabel}
+        dateFormat={DATE_FORMAT}
+        onSelect={() => {}}
+        onClickOutside={() => {}}
+        showQuarterYearPicker
+      />
+    );
+    expect(shallowCalendar.html().indexOf(`aria-label="${ariaLabel}"`)).not.equal(-1);
+  });
+
+  it("should have a next-button with the provided aria-label for month", () => {
+    const ariaLabel = "A label in my native language for next month";
+    const shallowCalendar = mount(
+      <Calendar
+        nextMonthAriaLabel={ariaLabel}
+        dateFormat={DATE_FORMAT}
+        onSelect={() => {}}
+        onClickOutside={() => {}}
+      />
+    );
+    expect(shallowCalendar.html().indexOf(`aria-label="${ariaLabel}"`)).not.equal(-1);
+  });
+
+  it("should have a previous-button with the provided aria-label for month", () => {
+    const ariaLabel = "A label in my native language for previous month";
+    const shallowCalendar = mount(
+      <Calendar
+        previousMonthAriaLabel={ariaLabel}
+        dateFormat={DATE_FORMAT}
+        onSelect={() => {}}
+        onClickOutside={() => {}}
+      />
+    );
+    expect(shallowCalendar.html().indexOf(`aria-label="${ariaLabel}"`)).not.equal(-1);
+  });
 });

test/day_test.js

@@ -507,6 +507,22 @@ describe("Day", () => {
     });
   });
 
+  describe("aria-label", () => {
+    const ariaLabelPrefixWhenEnabled = "A prefix in my native language desbribing that the date can be selected";
+    const ariaLabelPrefixWhenDisabled = "A prefix in my native language desbribing that the date can not be selected";
+
+    it("should have the correct provided prefix if date is not disabled", () => {
+      const shallowDay = renderDay(newDate(), { ariaLabelPrefixWhenEnabled: ariaLabelPrefixWhenEnabled });
+      expect(shallowDay.html().indexOf(`aria-label="${ariaLabelPrefixWhenEnabled}`)).not.equal(-1);
+    });
+
+    it("should have the correct provided prefix if date is disabled", () => {
+      const day = newDate();
+      const shallowDay = renderDay(day, { ariaLabelPrefixWhenDisabled: ariaLabelPrefixWhenDisabled, excludeDates: [day] });
+      expect(shallowDay.html().indexOf(`aria-label="${ariaLabelPrefixWhenDisabled}`)).not.equal(-1);
+    });
+  });
+
   describe("click", () => {
     var onClickCalled;
 

test/month_test.js

@@ -30,14 +30,23 @@ describe("Month", () => {
   });
 
   it("should have the month aria-label", () => {
+    const dateString = "2015-12";
     const month = TestUtils.renderIntoDocument(
-      <Month day={utils.newDate("2015-12-01")} />
+      <Month day={utils.newDate(`${dateString}-01`)} />
     );
     const month_dom = TestUtils.findRenderedDOMComponentWithClass(
       month,
       "react-datepicker__month"
     );
-    expect(month_dom.getAttribute("aria-label")).to.equal("month-2015-12");
+    expect(month_dom.getAttribute("aria-label")).to.contain(dateString);
+  });
+
+  it("should have an aria-label containing the provided prefix", () => {
+    const ariaLabelPrefix = "A prefix in my native language";
+    const shallowMonth = shallow(
+      <Month ariaLabelPrefix={ariaLabelPrefix} day={utils.newDate()} />
+    );
+    expect(shallowMonth.html().indexOf(`aria-label="${ariaLabelPrefix}`)).not.equal(-1);
   });
 
   it("should render all days of the month and some days in neighboring months", () => {

test/week_number_test.js

@@ -27,5 +27,13 @@ describe("WeekNumber", () => {
       shallowWeekNumber.instance().handleClick({});
       expect(onClick).to.have.property("callCount", 1);
     });
+
+    it("should have an aria-label containing the provided prefix", () => {
+      const ariaLabelPrefix = "A prefix in my native language";
+      const shallowWeekNumber = shallow(
+        <WeekNumber day={1} ariaLabelPrefix={ariaLabelPrefix} />
+      );
+      expect(shallowWeekNumber.html().indexOf(`aria-label="${ariaLabelPrefix}`)).not.equal(-1);
+    });
   });
 });