Merge pull request #418 from nikeeshi/fix/add-missing-aria-labels

Fix/add missing aria labels

Author: kamyar

README.md

@@ -138,6 +138,7 @@ fixedHeight                          | Boolean   | false            | Since some
 renderStaticRangeLabel(`DefinedRange`)| Function |                  | Callback function to be triggered for the static range configurations that have `hasCustomRendering: true` on them. Instead of rendering `staticRange.label`, return value of this callback will be rendered.
 staticRanges(`DefinedRange`, `DateRangePicker`)  | Array            | [default preDefined ranges](https://github.com/hypeserver/react-date-range/blob/master/src/defaultRanges.js)             | -
 inputRanges(`DefinedRange`, `DateRangePicker`)   | Array            | [default input ranges](https://github.com/hypeserver/react-date-range/blob/master/src/defaultRanges.js)             | -
+ariaLabels | **Object | {} | inserts aria-label to inner elements 
 
  *shape of range:
  ```js
@@ -152,6 +153,22 @@ inputRanges(`DefinedRange`, `DateRangePicker`)   | Array            | [default i
   }
 ```
 
+ **shape of ariaLabels:
+ ```js
+  {
+    // The key of dateInput should be same as key in range.
+    dateInput: PropTypes.objectOf(
+      PropTypes.shape({ 
+        startDate: PropTypes.string,
+        endDate: PropTypes.string 
+      })
+    ),
+    monthPicker: PropTypes.string,
+    yearPicker: PropTypes.string,
+    prevButton: PropTypes.string,
+    nextButton: PropTypes.string,
+  }
+```
 #### Infinite Scrolled Mode
 
 To enable infinite scroll set `scroll={{enabled: true}}` basically. Infinite scroll feature is affected by `direction`(rendering direction for months) and `months`(for rendered months count) props directly.

src/accessibility/index.js

@@ -0,0 +1,11 @@
+import PropTypes from 'prop-types';
+
+export const ariaLabelsShape = PropTypes.shape({
+  dateInput: PropTypes.objectOf(
+    PropTypes.shape({ startDate: PropTypes.string, endDate: PropTypes.string })
+  ),
+  monthPicker: PropTypes.string,
+  yearPicker: PropTypes.string,
+  prevButton: PropTypes.string,
+  nextButton: PropTypes.string,
+});

src/components/Calendar/index.js

@@ -28,6 +28,7 @@ import {
 } from 'date-fns';
 import defaultLocale from 'date-fns/locale/en-US';
 import coreStyles from '../../styles';
+import { ariaLabelsShape } from '../../accessibility';
 
 class Calendar extends PureComponent {
   constructor(props, context) {
@@ -176,7 +177,7 @@ class Calendar extends PureComponent {
     this.isFirstRender = false;
   };
   renderMonthAndYear = (focusedDate, changeShownDate, props) => {
-    const { showMonthArrow, minDate, maxDate, showMonthAndYearPickers } = props;
+    const { showMonthArrow, minDate, maxDate, showMonthAndYearPickers, ariaLabels } = props;
     const upperYearLimit = (maxDate || Calendar.defaultProps.maxDate).getFullYear();
     const lowerYearLimit = (minDate || Calendar.defaultProps.minDate).getFullYear();
     const styles = this.styles;
@@ -186,7 +187,8 @@ class Calendar extends PureComponent {
           <button
             type="button"
             className={classnames(styles.nextPrevButton, styles.prevButton)}
-            onClick={() => changeShownDate(-1, 'monthOffset')}>
+            onClick={() => changeShownDate(-1, 'monthOffset')}
+            aria-label={ariaLabels.prevButton}>
             <i />
           </button>
         ) : null}
@@ -195,7 +197,8 @@ class Calendar extends PureComponent {
             <span className={styles.monthPicker}>
               <select
                 value={focusedDate.getMonth()}
-                onChange={e => changeShownDate(e.target.value, 'setMonth')}>
+                onChange={e => changeShownDate(e.target.value, 'setMonth')}
+                aria-label={ariaLabels.monthPicker}>
                 {this.state.monthNames.map((monthName, i) => (
                   <option key={i} value={i}>
                     {monthName}
@@ -207,7 +210,8 @@ class Calendar extends PureComponent {
             <span className={styles.yearPicker}>
               <select
                 value={focusedDate.getFullYear()}
-                onChange={e => changeShownDate(e.target.value, 'setYear')}>
+                onChange={e => changeShownDate(e.target.value, 'setYear')}
+                aria-label={ariaLabels.yearPicker}>
                 {new Array(upperYearLimit - lowerYearLimit + 1)
                   .fill(upperYearLimit)
                   .map((val, i) => {
@@ -230,7 +234,8 @@ class Calendar extends PureComponent {
           <button
             type="button"
             className={classnames(styles.nextPrevButton, styles.nextButton)}
-            onClick={() => changeShownDate(+1, 'monthOffset')}>
+            onClick={() => changeShownDate(+1, 'monthOffset')}
+            aria-label={ariaLabels.nextButton}>
             <i />
           </button>
         ) : null}
@@ -262,6 +267,7 @@ class Calendar extends PureComponent {
       editableDateInputs,
       startDatePlaceholder,
       endDatePlaceholder,
+      ariaLabels,
     } = this.props;
 
     const defaultColor = rangeColors[focusedRange[0]] || color;
@@ -287,6 +293,11 @@ class Calendar extends PureComponent {
                 placeholder={startDatePlaceholder}
                 dateOptions={this.dateOptions}
                 dateDisplayFormat={dateDisplayFormat}
+                ariaLabel={
+                  ariaLabels.dateInput &&
+                  ariaLabels.dateInput[range.key] &&
+                  ariaLabels.dateInput[range.key].startDate
+                }
                 onChange={this.onDragSelectionEnd}
                 onFocus={() => this.handleRangeFocusChange(i, 0)}
               />
@@ -300,6 +311,11 @@ class Calendar extends PureComponent {
                 placeholder={endDatePlaceholder}
                 dateOptions={this.dateOptions}
                 dateDisplayFormat={dateDisplayFormat}
+                ariaLabel={
+                  ariaLabels.dateInput &&
+                  ariaLabels.dateInput[range.key] &&
+                  ariaLabels.dateInput[range.key].endDate
+                }
                 onChange={this.onDragSelectionEnd}
                 onFocus={() => this.handleRangeFocusChange(i, 1)}
               />
@@ -528,6 +544,7 @@ Calendar.defaultProps = {
   editableDateInputs: false,
   dragSelectionEnabled: true,
   fixedHeight: false,
+  ariaLabels: {},
 };
 
 Calendar.propTypes = {
@@ -581,6 +598,7 @@ Calendar.propTypes = {
   editableDateInputs: PropTypes.bool,
   dragSelectionEnabled: PropTypes.bool,
   fixedHeight: PropTypes.bool,
+  ariaLabels: ariaLabelsShape,
 };
 
 export default Calendar;

src/components/DateInput/index.js

@@ -64,7 +64,7 @@ class DateInput extends PureComponent {
   };
 
   render() {
-    const { className, readOnly, placeholder, disabled, onFocus } = this.props;
+    const { className, readOnly, placeholder, ariaLabel, disabled, onFocus } = this.props;
     const { value, invalid } = this.state;
 
     return (
@@ -74,6 +74,7 @@ class DateInput extends PureComponent {
           disabled={disabled}
           value={value}
           placeholder={placeholder}
+          aria-label={ariaLabel}
           onKeyDown={this.onKeyDown}
           onChange={this.onChange}
           onBlur={this.onBlur}
@@ -92,6 +93,7 @@ DateInput.propTypes = {
   readOnly: PropTypes.bool,
   dateOptions: PropTypes.object,
   dateDisplayFormat: PropTypes.string,
+  ariaLabel: PropTypes.string,
   className: PropTypes.string,
   onFocus: PropTypes.func.isRequired,
   onChange: PropTypes.func.isRequired,

src/components/DateRangePicker/README.md

@@ -84,3 +84,42 @@ const [state, setState] = useState({
   ranges={[state.selection1, state.selection2, state.selection3]}
 />;
 ```
+
+#### Example: Insert Aria-label
+
+```jsx inside Markdown
+import { addDays } from 'date-fns';
+import { useState } from 'react';
+
+const [state, setState] = useState([
+  {
+    startDate: addDays(new Date(), -6),
+    endDate: new Date(),
+    key: 'selection1'
+  },
+  {
+    startDate: addDays(new Date(), 1),
+    endDate: addDays(new Date(), 7),
+    key: 'selection2'
+  }
+]);
+
+<DateRangePicker
+  onChange={item => setState([item.selection])}
+  showSelectionPreview={true}
+  moveRangeOnFirstSelection={false}
+  months={2}
+  ranges={state}
+  direction="horizontal"
+  ariaLabels={{
+    dateInput: {
+      selection1: { startDate: "start date input of selction 1", endDate: "end date input of selction 1" },
+      selection2: { startDate: "start date input of selction 2", endDate: "end date input of selction 2" }
+    },
+    monthPicker: "month picker",
+    yearPicker: "year picker",
+    prevButton: "previous month button",
+    nextButton: "next month button",
+  }}
+/>;
+```