Merge pull request #267 from gpbl/aria-label-buttons

Aria label buttons (close #258)

CHANGELOG.md

@@ -1,3 +1,13 @@
+## [v5.1.0](https://github.com/gpbl/react-day-picker/tree/v5.1.0) (2016-03-03)
+
+* New [`classNames`](http://react-day-picker.js.org/APIProps.html#classnames) prop ([#264](https://github.com/gpbl/react-day-picker/issues/264)). 
+
+  Use this prop to change the CSS class names or add support for CSS modules ([#73](https://github.com/gpbl/react-day-picker/issues/73), see [this example](http://react-day-picker.js.org/examples?cssModules)). 
+
+* New [`month`](http://react-day-picker.js.org/APIProps.html#month) prop ([#263](https://github.com/gpbl/react-day-picker/issues/263)).
+
+  This differs from the `initialMonth` props as it causes the calendar to re-render when its value changes. 
+
 # [v5.0.0](https://github.com/gpbl/react-day-picker/tree/v5.0.0) (2017-02-14)
 
 This release focuses on improving perfomance and the component's API.

docs/API.md

@@ -18,6 +18,7 @@
 | [fixedWeeks](APIProps.md#fixedWeeks) | false | `Bool` |
 | [fromMonth](APIProps.md#frommonth) | | `Date` |
 | [initialMonth](APIProps.md#initialmonth) | Current month | `Date` |
+| [labels](APIProps.md#labels) | `{ nextMonth: "Next Month", previousMonth: "Previous Month" }` | `Object` |
 | [locale](APIProps.md#locale) | en | `String` |
 | [localeUtils](APIProps.md#localeutils) | | `Object` |
 | [modifiers](APIProps.md#modifiers) | | `Object` of [modifiers](Modifiers.md) |

docs/APIProps.md

@@ -6,17 +6,15 @@
 
 **Customization**: [enableOutsideDays](#enableoutsidedays), [fixedWeeks](#fixedweeks)
 
-**Localization**: [dir](#dir), [firstDayOfWeek](#firstdayofweek), [locale](#locale), [localeUtils](#localeUtils), [months](#months), [weekdaysLong](#weekdayslong), [weekdaysShort](#weekdaysshort)
+**Localization**: [dir](#dir), [firstDayOfWeek](#firstdayofweek), [labels](#labels), [locale](#locale), [localeUtils](#localeUtils), [months](#months), [weekdaysLong](#weekdayslong), [weekdaysShort](#weekdaysshort)
 
 **CSS and HTML**: [className](#classname), [classNames](#classnames), [containerProps](#containerprops), [tabIndex](#tabindex)
 
 **Elements**: [renderDay](#renderday), [weekdayElement](#weekdayelement), [navbarElement](#navbarelement), [captionElement](#captionelement)
 
 **Events**: [onBlur](#onblur), [onCaptionClick](#oncaptionclick), [onDayClick](#ondayclick), [onDayFocus](#ondayfocus), [onDayKeyDown](#ondaykeydown), [onDayMouseEnter](#ondaymouseenter), [onDayMouseLeave](#ondaymouseleave), [onDayTouchEnd](#ondaytouchend), [onDayTouchStart](#ondaytouchstart), [onFocus](#onfocus), [onKeyDown](#onkeydown), [onMonthChange](#onmonthchange)
 
----
-
-## Prop Reference
+## Reference
 
 ### canChangeMonth
 
@@ -47,7 +45,7 @@ Additional CSS class names to add to the default.
 
 ### classNames
 
-**Type**: `Object`
+**Type**: `Object<String>`
 
 Customize the CSS class names used when rendering the component. 
 
@@ -83,7 +81,7 @@ The object expects the following keys:
 
 ### containerProps
 
-**Type**: `Object`
+**Type**: `Object<Any>`
 
 Props to pass to the container `div` HTML element. Only props by a `div` are valid.
 
@@ -98,7 +96,7 @@ Props to pass to the container `div` HTML element. Only props by a `div` are val
 
 ### disabledDays
 
-**Type**: `Date` || `Object` || `(day: Date) ⇒ Bool` || `Array<Date|Object|Function>`
+**Type**: `Date` || `Object<Any>` || `(day: Date) ⇒ Bool` || `Array<Date|Object|Function>`
 
 Indicate which day should appear as disabled. Set a `selected` modifier. 
 
@@ -135,6 +133,21 @@ The first allowed month. Users won't be able to navigate or interact with the da
 
 The month to display in the calendar at first render. See also [`month`](#month) prop. Default is the current month. 
 
+### labels
+
+**Type**: `Object<String>` **Default**: `{ nextMonth: "Next Month", previousMonth: "Previous Month" }`
+
+Labels to use as `aria-label` HTML attributes.
+
+The object expects the following keys (as strings):
+
+```js
+{
+  previousMonth,  // Used for the button to navigate the previous month
+  nextMonth,      // Used for the button to navigate the next month
+}
+```
+
 ### locale
 
 **Type**: `String` **Default**: `en`
@@ -143,14 +156,14 @@ The locale used by the `localeUtils` functions. Default is `en`.  See also [Loca
 
 ### localeUtils
 
-**Type**: `Object`
+**Type**: `Object<Function>`
 
 Object of functions to format dates and to get the first day of the week. Pass your own utils to support localization.
 By default the used locale is English (US). See also [Localization](Localization.md) and [LocaleUtils](LocaleUtils.md).
 
 ### modifiers
 
-**Type**: `Object`
+**Type**: `Object<Any>`
 
 An object of [day modifiers](Modifiers.md).
 
@@ -160,7 +173,7 @@ As default, the calendar adds `today` and `outside` modifiers. (_Outside days_ a
 
 **Type**: `Date` **Default**: The current month
 
-The month to display in the calendar.
+The month to display in the calendar. This differs from the [`initialMonth`](#initialmonth) prop, as it causes the calendar to re-render when its value changes.
 
 ### months
 
@@ -211,7 +224,7 @@ Render the months in reversed order. Useful when `numberOfMonths` is greater tha
 
 ### selectedDays 
 
-**Type**: `Date` || `Object` || `(day: Date) ⇒ Bool` || `Array<Date|Object|Function>`
+**Type**: `Date` || `Object<Any>` || `(day: Date) ⇒ Bool` || `Array<Date|Object|Function>`
 
 Indicate which day should appear as selected. Set a `selected` modifier.
 

examples/src/examples/Localized.js

@@ -1,14 +1,23 @@
 import React from 'react';
 import DayPicker from '../../../src';
 
+// Translate month names
 const MONTHS = ['Gennaio', 'Febbraio', 'Marzo', 'Aprile', 'Maggio',
   'Giugno', 'Luglio', 'Agosto', 'Settembre', 'Ottobre', 'Novembre',
   'Dicembre'];
 
+// Translate weekdays header
+const WEEKDAYS_SHORT = ['Do', 'Lu', 'Ma', 'Me', 'Gi', 'Ve', 'Sa'];
+
+// Translate weekdays header titles
 const WEEKDAYS_LONG = ['Domenica', 'Lunedì', 'Martedì',
   'Mercoledì', 'Giovedì', 'Venerdì', 'Sabato'];
 
-const WEEKDAYS_SHORT = ['Do', 'Lu', 'Ma', 'Me', 'Gi', 'Ve', 'Sa'];
+// Translate for aria-label attribute
+const LABELS = {
+  nextMonth: 'Prossimo mese',
+  previousMonth: 'Mese precedente',
+};
 
 export default function Localized() {
   return (
@@ -19,6 +28,7 @@ export default function Localized() {
         weekdaysLong={ WEEKDAYS_LONG }
         weekdaysShort={ WEEKDAYS_SHORT }
         firstDayOfWeek={ 1 }
+        labels={ LABELS }
         modifiers={ { sunday: day => day.getDay() === 0 } }
       />
     </div>

examples/src/examples/LocalizedCustom.js

@@ -19,6 +19,11 @@ const firstDayOfWeek = {
   en: 0,
 };
 
+// Translate aria-labels
+const LABELS = {
+  ru: { nextMonth: 'следующий месяц', previousMonth: 'предыдущий месяц' },
+};
+
 const localeUtils = {
   formatDay: (d, locale = 'en') =>
     `${weekdaysLong[locale][d.getDay()]}, ${d.getDate()} ${months[locale][d.getMonth()]} ${d.getFullYear()}`,
@@ -29,6 +34,7 @@ const localeUtils = {
   formatMonthTitle: (d, locale) => `${months[locale][d.getMonth()]} ${d.getFullYear()}`,
 };
 
+
 export default class LocalizedCustom extends React.Component {
 
   constructor(props) {
@@ -57,6 +63,7 @@ export default class LocalizedCustom extends React.Component {
           </select>
         </p>
         <DayPicker
+          labels={ LABELS[locale] }
           locale={ locale }
           localeUtils={ localeUtils }
           modifiers={ { sunday: day => day.getDay() === 0 } }

examples/src/examples/LocalizedMoment.js

@@ -9,9 +9,15 @@ import 'moment/locale/it';
 import MomentLocaleUtils from 'react-day-picker/moment';
 import DayPicker from '../../../src';
 
-
 import '../../../src/style.css';
 
+// Translate aria-labels
+const LABELS = {
+  it: { nextMonth: 'Prossimo mese', previousMonth: 'Mese precedente' },
+  ja: { nextMonth: '来月', previousMonth: '前月' },
+  ar: { nextMonth: 'الشهر المقبل', previousMonth: 'الشهر السابق' },
+};
+
 export default class LocalizedMoment extends React.Component {
   constructor(props) {
     super(props);
@@ -38,6 +44,7 @@ export default class LocalizedMoment extends React.Component {
         </p>
         <DayPicker
           dir={ locale === 'ar' ? 'rtl' : 'ltr' }
+          labels={ LABELS[locale] }
           locale={ locale }
           localeUtils={ MomentLocaleUtils }
           modifiers={ { sunday: day => day.getDay() === 0 } }

src/DayPicker.js

@@ -42,6 +42,10 @@ export default class DayPicker extends Component {
     // Localization
     dir: PropTypes.string,
     firstDayOfWeek: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6]),
+    labels: PropTypes.shape({
+      nextMonth: PropTypes.string.isRequired,
+      previousMonth: PropTypes.string.isRequired,
+    }).isRequired,
     locale: PropTypes.string,
     localeUtils: DayPickerPropTypes.localeUtils,
     months: PropTypes.arrayOf(PropTypes.string),
@@ -96,6 +100,10 @@ export default class DayPicker extends Component {
     tabIndex: 0,
     initialMonth: new Date(),
     numberOfMonths: 1,
+    labels: {
+      previousMonth: 'Previous Month',
+      nextMonth: 'Next Month',
+    },
     locale: 'en',
     localeUtils: LocaleUtils,
     enableOutsideDays: false,
@@ -374,6 +382,7 @@ export default class DayPicker extends Component {
   }
   renderNavbar() {
     const {
+      labels,
       locale,
       localeUtils,
       canChangeMonth,
@@ -392,6 +401,7 @@ export default class DayPicker extends Component {
       onNextClick: this.showNextMonth,
       onPreviousClick: this.showPreviousMonth,
       dir: attributes.dir,
+      labels,
       locale,
       localeUtils,
     };

src/Navbar.js

@@ -9,6 +9,7 @@ export default function Navbar({
   showNextButton,
   onPreviousClick,
   onNextClick,
+  labels,
   dir = 'ltr',
 }) {
   const previousClickHandler = dir === 'rtl' ? onNextClick : onPreviousClick;
@@ -17,6 +18,7 @@ export default function Navbar({
   const previousButton = showPreviousButton &&
     <span
       role="button"
+      aria-label={ labels.previousMonth }
       key="previous"
       className={ classNames.navButtonPrev }
       onClick={ () => previousClickHandler() }
@@ -25,6 +27,7 @@ export default function Navbar({
   const nextButton = showNextButton &&
     <span
       role="button"
+      aria-label={ labels.nextMonth }
       key="right"
       className={ classNames.navButtonNext }
       onClick={ () => nextClickHandler() }
@@ -49,13 +52,21 @@ export const NavbarPropTypes = {
   onPreviousClick: PropTypes.func,
   onNextClick: PropTypes.func,
   dir: PropTypes.string,
+  labels: PropTypes.shape({
+    previousMonth: PropTypes.string.isRequired,
+    nextMonth: PropTypes.string.isRequired,
+  }),
 };
 
 Navbar.propTypes = NavbarPropTypes;
 
 Navbar.defaultProps = {
   classNames: defaultClassNames,
   dir: 'ltr',
+  labels: {
+    previousMonth: 'Previous Month',
+    nextMonth: 'Next Month',
+  },
   showPreviousButton: true,
   showNextButton: true,
 };

test/Navbar.js

@@ -16,6 +16,22 @@ describe('<Navbar />', () => {
     const wrapper = shallow(<Navbar className="DayPicker-NavBar" />);
     expect(wrapper).to.have.className('DayPicker-NavBar');
   });
+  it('should render the aria labels for buttons', () => {
+    const wrapper = shallow(<Navbar />);
+    expect(wrapper.find('.DayPicker-NavButton--prev')).to.have.attr('aria-label', 'Previous Month');
+    expect(wrapper.find('.DayPicker-NavButton--next')).to.have.attr('aria-label', 'Next Month');
+  });
+  it('should render custom aria labels', () => {
+    const wrapper = shallow(
+      <Navbar
+        labels={ {
+          nextMonth: 'Successivo',
+          previousMonth: 'Precedente',
+        } }
+      />);
+    expect(wrapper.find('.DayPicker-NavButton--prev')).to.have.attr('aria-label', 'Precedente');
+    expect(wrapper.find('.DayPicker-NavButton--next')).to.have.attr('aria-label', 'Successivo');
+  });
   it('should have the navigation buttons classes', () => {
     const wrapper = shallow(<Navbar />);
     expect(wrapper.find('.DayPicker-NavButton').at(0))

test/daypicker/rendering.js

@@ -109,6 +109,11 @@ describe('DayPicker’s rendering', () => {
     const wrapper = render(<DayPicker />);
     expect(wrapper.find('.DayPicker-NavBar')).to.exist;
   });
+  it('should render the aria labels', () => {
+    const wrapper = render(<DayPicker />);
+    expect(wrapper.find('.DayPicker-NavButton--prev')).to.have.attr('aria-label', 'Previous Month');
+    expect(wrapper.find('.DayPicker-NavButton--next')).to.have.attr('aria-label', 'Next Month');
+  });
   it('should render the day cells', () => {
     const wrapper = render(<DayPicker initialMonth={ new Date(2015, 6) } />);
     expect(wrapper.find('.DayPicker-Day')).to.have.length(35);