Merge pull request #3516 from kimamula/enable-specifying-aria-label-prefix-for-month

Enable specifying aria-label prefix for month

Author: martijnrusschen

src/calendar.jsx

@@ -197,6 +197,7 @@ export default class Calendar extends React.Component {
     isInputFocused: PropTypes.bool,
     customTimeInput: PropTypes.element,
     weekAriaLabelPrefix: PropTypes.string,
+    monthAriaLabelPrefix: PropTypes.string,
     setPreSelection: PropTypes.func,
   };
 
@@ -844,6 +845,7 @@ export default class Calendar extends React.Component {
             chooseDayAriaLabelPrefix={this.props.chooseDayAriaLabelPrefix}
             disabledDayAriaLabelPrefix={this.props.disabledDayAriaLabelPrefix}
             weekAriaLabelPrefix={this.props.weekAriaLabelPrefix}
+            ariaLabelPrefix={this.props.monthAriaLabelPrefix}
             onChange={this.changeMonthYear}
             day={monthDate}
             dayClassName={this.props.dayClassName}

src/index.jsx

@@ -284,6 +284,7 @@ export default class DatePicker extends React.Component {
     enableTabLoop: PropTypes.bool,
     customTimeInput: PropTypes.element,
     weekAriaLabelPrefix: PropTypes.string,
+    monthAriaLabelPrefix: PropTypes.string,
   };
 
   constructor(props) {
@@ -857,6 +858,7 @@ export default class DatePicker extends React.Component {
         chooseDayAriaLabelPrefix={this.props.chooseDayAriaLabelPrefix}
         disabledDayAriaLabelPrefix={this.props.disabledDayAriaLabelPrefix}
         weekAriaLabelPrefix={this.props.weekAriaLabelPrefix}
+        monthAriaLabelPrefix={this.props.monthAriaLabelPrefix}
         adjustDateOnChange={this.props.adjustDateOnChange}
         setOpen={this.setOpen}
         shouldCloseOnSelect={this.props.shouldCloseOnSelect}

src/month.jsx

@@ -329,7 +329,7 @@ export default class Month extends React.Component {
 
   getAriaLabel = (month) => {
     const {
-      ariaLabelPrefix = "Choose",
+      chooseDayAriaLabelPrefix = "Choose",
       disabledDayAriaLabelPrefix = "Not available",
       day,
     } = this.props;
@@ -338,7 +338,7 @@ export default class Month extends React.Component {
     const prefix =
       this.isDisabled(labelDate) || this.isExcluded(labelDate)
         ? disabledDayAriaLabelPrefix
-        : ariaLabelPrefix;
+        : chooseDayAriaLabelPrefix;
 
     return `${prefix} ${utils.formatDate(labelDate, "MMMM yyyy")}`;
   };

test/datepicker_test.js

@@ -931,22 +931,37 @@ describe("DatePicker", () => {
     describe("with excludeDateIntervals", () => {
       it("should not select the start date of the interval", () => {
         var data = getOnInputKeyDownStuff({
-          excludeDateIntervals: [{start: utils.subDays(utils.newDate(), 1), end: utils.addDays(utils.newDate(), 1)}]
+          excludeDateIntervals: [
+            {
+              start: utils.subDays(utils.newDate(), 1),
+              end: utils.addDays(utils.newDate(), 1),
+            },
+          ],
         });
         TestUtils.Simulate.keyDown(data.nodeInput, getKey("ArrowLeft"));
         TestUtils.Simulate.keyDown(data.nodeInput, getKey("Enter"));
         expect(data.callback.calledOnce).to.be.false;
       });
       it("should not select a dates within the interval", () => {
         var data = getOnInputKeyDownStuff({
-          excludeDateIntervals: [{start: utils.subDays(utils.newDate(), 1), end: utils.addDays(utils.newDate(), 1)}]
+          excludeDateIntervals: [
+            {
+              start: utils.subDays(utils.newDate(), 1),
+              end: utils.addDays(utils.newDate(), 1),
+            },
+          ],
         });
         TestUtils.Simulate.keyDown(data.nodeInput, getKey("Enter"));
         expect(data.callback.calledOnce).to.be.false;
       });
       it("should not select the end date of the interval", () => {
         var data = getOnInputKeyDownStuff({
-          excludeDateIntervals: [{start: utils.subDays(utils.newDate(), 1), end: utils.addDays(utils.newDate(), 1)}]
+          excludeDateIntervals: [
+            {
+              start: utils.subDays(utils.newDate(), 1),
+              end: utils.addDays(utils.newDate(), 1),
+            },
+          ],
         });
         TestUtils.Simulate.keyDown(data.nodeInput, getKey("ArrowRight"));
         TestUtils.Simulate.keyDown(data.nodeInput, getKey("Enter"));
@@ -1481,6 +1496,20 @@ describe("DatePicker", () => {
     ).to.equal(weekAriaLabelPrefix);
   });
 
+  it("should pass monthAriaLabelPrefix prop to the correct child component", () => {
+    const monthAriaLabelPrefix = "My month-prefix";
+    const datePicker = mount(
+      <DatePicker
+        inline
+        showWeekNumbers
+        monthAriaLabelPrefix={monthAriaLabelPrefix}
+      />
+    );
+    expect(datePicker.find(Month).first().prop("ariaLabelPrefix")).to.equal(
+      monthAriaLabelPrefix
+    );
+  });
+
   it("should close the calendar after scrolling", () => {
     var datePicker = TestUtils.renderIntoDocument(<DatePicker closeOnScroll />);
     var dateInput = datePicker.input;

test/month_test.js

@@ -680,7 +680,7 @@ describe("Month", () => {
         preSelection: utils.newDate("2015-03-01"),
         minDate: utils.newDate("2015-03-01"),
         maxDate: utils.newDate("2015-08-01"),
-        ariaLabelPrefix: "Select this",
+        chooseDayAriaLabelPrefix: "Select this",
         disabledDayAriaLabelPrefix: "Can't select this",
       });