Adds the possibility to override the display text in the navigation b…

…uttons, as well as the aria-label attribute

components/calendar/calendar.js

@@ -196,7 +196,7 @@ export default class Calendar extends Component {
   }
 
   render() {
-    const { dataAttrs = {}, isDaySelectableFn, locale, mods = [], selectionType } = this.props;
+    const { dataAttrs = {}, isDaySelectableFn, locale, mods = [], navButtons, selectionType } = this.props;
     const { maxLimit, minLimit, renderDate, selectedDates } = this.state;
 
     const restProps = getDataAttributes(dataAttrs);
@@ -209,6 +209,7 @@ export default class Calendar extends Component {
           locale={locale}
           maxDate={maxLimit}
           minDate={minLimit}
+          navButtons={navButtons}
           onNavNextMonth={() => this.moveToMonth(CALENDAR_MOVE_TO_NEXT)}
           onNavPreviousMonth={() => this.moveToMonth(CALENDAR_MOVE_TO_PREVIOUS)}
           onSelectDay={dt => this.onSelectDay(dt)}
@@ -270,6 +271,19 @@ Calendar.propTypes = {
    */
   mods: PropTypes.arrayOf(PropTypes.string),
 
+  navButtons: PropTypes.shape({
+    days: PropTypes.shape({
+      next: PropTypes.shape({
+        ariaLabel: PropTypes.string,
+        displayValue: PropTypes.string,
+      }),
+      previous: PropTypes.shape({
+        ariaLabel: PropTypes.string,
+        displayValue: PropTypes.string,
+      }),
+    }),
+  }),
+
   /**
    * Function to be triggered when pressing the nav's "next" button.
    */

components/calendar/views/days.js

@@ -16,6 +16,7 @@ class Days extends Component {
     this.renderWeekDays = this.renderWeekDays.bind(this);
 
     this.locale = this.getLocale();
+    this.navButtons = this.getNavButtons();
   }
 
   /**
@@ -57,6 +58,23 @@ class Days extends Component {
     return locale ? Object.assign(defaultLocale, locale) : defaultLocale;
   }
 
+  getNavButtons() {
+    const { navButtons } = this.props;
+
+    const defaultNavButtons = {
+      days: {
+        next: {
+          displayValue: '>',
+        },
+        previous: {
+          displayValue: '<',
+        },
+      },
+    };
+
+    return navButtons ? Object.assign(defaultNavButtons, navButtons) : defaultNavButtons;
+  }
+
   /**
    * If any of the boundaries is defined and the date being rendered is out of those boundaries
    * or if there's a function to check if the day is selectable and it returns false,
@@ -176,29 +194,30 @@ class Days extends Component {
   renderNav() {
     const { renderDate, minDate, maxDate, onNavPreviousMonth, onNavNextMonth } = this.props;
     const locale = this.locale;
+    const { next, previous } = this.navButtons.days;
 
     const isPreviousMonthDisabled = minDate && (minDate.getMonth() >= renderDate.getMonth());
     const isNextMonthDisabled = maxDate && (maxDate.getMonth() <= renderDate.getMonth());
 
     return (
       <nav className="ui-calendar-days__nav">
         <button
-          aria-label={locale.months[renderDate.getMonth() - 1].name}
+          aria-label={previous.ariaLabel || locale.months[renderDate.getMonth() - 1].name}
           className="ui-calendar-days__previous-month"
           disabled={isPreviousMonthDisabled}
           onClick={onNavPreviousMonth}
           type="button"
-        >&lt;</button>
+        >{previous.displayValue}</button>
         <label className="ui-calendar-days__rendered-month">
           {locale.months[renderDate.getMonth()].short} {renderDate.getFullYear()}
         </label>
         <button
-          aria-label={locale.months[renderDate.getMonth() + 1].name}
+          aria-label={next.ariaLabel || locale.months[renderDate.getMonth() + 1].name}
           className="ui-calendar-days__next-month"
           disabled={isNextMonthDisabled}
           onClick={onNavNextMonth}
           type="button"
-        >&gt;</button>
+        >{next.displayValue}</button>
       </nav>
     );
   }
@@ -284,6 +303,19 @@ Days.propTypes = {
    */
   minDate: PropTypes.objectOf(Date),
 
+  navButtons: PropTypes.shape({
+    days: PropTypes.shape({
+      next: PropTypes.shape({
+        ariaLabel: PropTypes.string,
+        displayValue: PropTypes.string,
+      }),
+      previous: PropTypes.shape({
+        ariaLabel: PropTypes.string,
+        displayValue: PropTypes.string,
+      }),
+    }),
+  }),
+
   /**
    * Function to be triggered when pressing the nav's "next" button.
    */