Merge pull request #351 from airbnb/maja-move-phrases-into-separate-file

Moves phrases out into one shared defaultPhrases file

.istanbul.yml

@@ -7,6 +7,7 @@ instrumentation:
     "public/**",
     "test/**",
     "coverage/**",
+    "src/defaultPhrases.js"
   ]
 check:
   global:

src/components/DateRangePicker.jsx

@@ -7,6 +7,8 @@ import Portal from 'react-portal';
 import { forbidExtraProps } from 'airbnb-prop-types';
 import { addEventListener, removeEventListener } from 'consolidated-events';
 
+import { DateRangePickerPhrases } from '../defaultPhrases';
+
 import OutsideClickHandler from './OutsideClickHandler';
 import getResponsiveContainerStyles from '../utils/getResponsiveContainerStyles';
 
@@ -77,10 +79,7 @@ const defaultProps = {
   // internationalization
   displayFormat: () => moment.localeData().longDateFormat('L'),
   monthFormat: 'MMMM YYYY',
-  phrases: {
-    closeDatePicker: 'Close',
-    clearDates: 'Clear Dates',
-  },
+  phrases: DateRangePickerPhrases,
 };
 
 export default class DateRangePicker extends React.Component {

src/components/DateRangePickerInput.jsx

@@ -2,6 +2,9 @@ import React, { PropTypes } from 'react';
 import { forbidExtraProps } from 'airbnb-prop-types';
 import cx from 'classnames';
 
+import { DateRangePickerInputPhrases } from '../defaultPhrases';
+import getPhrasePropTypes from '../utils/getPhrasePropTypes';
+
 import DateInput from './DateInput';
 import RightArrow from '../svg/arrow-right.svg';
 import CloseButton from '../svg/close.svg';
@@ -41,9 +44,7 @@ const propTypes = forbidExtraProps({
   customArrowIcon: PropTypes.node,
 
   // i18n
-  phrases: PropTypes.shape({
-    clearDates: PropTypes.node,
-  }),
+  phrases: PropTypes.shape(getPhrasePropTypes(DateRangePickerInputPhrases)),
 });
 
 const defaultProps = {
@@ -76,9 +77,7 @@ const defaultProps = {
   customArrowIcon: null,
 
   // i18n
-  phrases: {
-    clearDates: 'Clear Dates',
-  },
+  phrases: DateRangePickerInputPhrases,
 };
 
 export default class DateRangePickerInput extends React.Component {
@@ -145,13 +144,16 @@ export default class DateRangePickerInput extends React.Component {
         })}
       >
         {(showDefaultInputIcon || customInputIcon !== null) &&
-          <span
+          <button
+            type="button"
+            aria-label={phrases.focusStartDate}
             className="DateRangePickerInput__calendar-icon"
             onClick={onStartDateFocus}
           >
             {inputIcon}
-          </span>
+          </button>
         }
+
         <DateInput
           id={startDateId}
           placeholder={startDatePlaceholderText}

src/components/DateRangePickerInputController.jsx

@@ -4,6 +4,9 @@ import moment from 'moment';
 import momentPropTypes from 'react-moment-proptypes';
 import { forbidExtraProps } from 'airbnb-prop-types';
 
+import { DateRangePickerInputPhrases } from '../defaultPhrases';
+import getPhrasePropTypes from '../utils/getPhrasePropTypes';
+
 import DateRangePickerInput from './DateRangePickerInput';
 
 import toMomentObject from '../utils/toMomentObject';
@@ -46,9 +49,7 @@ const propTypes = forbidExtraProps({
   customArrowIcon: PropTypes.node,
 
   // i18n
-  phrases: PropTypes.shape({
-    clearDates: PropTypes.node,
-  }),
+  phrases: PropTypes.shape(getPhrasePropTypes(DateRangePickerInputPhrases)),
 });
 
 const defaultProps = {
@@ -82,9 +83,7 @@ const defaultProps = {
   customArrowIcon: null,
 
   // i18n
-  phrases: {
-    clearDates: 'Clear Dates',
-  },
+  phrases: DateRangePickerInputPhrases,
 };
 
 export default class DateRangePickerInputWithHandlers extends React.Component {

src/components/DayPicker.jsx

@@ -5,6 +5,9 @@ import { forbidExtraProps } from 'airbnb-prop-types';
 import moment from 'moment';
 import cx from 'classnames';
 
+import { DayPickerPhrases } from '../defaultPhrases';
+import getPhrasePropTypes from '../utils/getPhrasePropTypes';
+
 import OutsideClickHandler from './OutsideClickHandler';
 import CalendarMonthGrid from './CalendarMonthGrid';
 import DayPickerNavigation from './DayPickerNavigation';
@@ -50,6 +53,7 @@ const propTypes = forbidExtraProps({
 
   // internationalization
   monthFormat: PropTypes.string,
+  phrases: PropTypes.shape(getPhrasePropTypes(DayPickerPhrases)),
 });
 
 const defaultProps = {
@@ -77,6 +81,7 @@ const defaultProps = {
 
   // internationalization
   monthFormat: 'MMMM YYYY',
+  phrases: DayPickerPhrases,
 };
 
 function applyTransformStyles(el, transform, opacity = '') {

src/components/DayPickerNavigation.jsx

@@ -2,6 +2,9 @@ import React, { PropTypes } from 'react';
 import { forbidExtraProps } from 'airbnb-prop-types';
 import cx from 'classnames';
 
+import { DayPickerNavigationPhrases } from '../defaultPhrases';
+import getPhrasePropTypes from '../utils/getPhrasePropTypes';
+
 import LeftArrow from '../svg/arrow-left.svg';
 import RightArrow from '../svg/arrow-right.svg';
 import ChevronUp from '../svg/chevron-up.svg';
@@ -20,6 +23,9 @@ const propTypes = forbidExtraProps({
 
   onPrevMonthClick: PropTypes.func,
   onNextMonthClick: PropTypes.func,
+
+  // internationalization
+  phrases: PropTypes.shape(getPhrasePropTypes(DayPickerNavigationPhrases)),
 });
 
 const defaultProps = {
@@ -29,6 +35,9 @@ const defaultProps = {
 
   onPrevMonthClick() {},
   onNextMonthClick() {},
+
+  // internationalization
+  phrases: DayPickerNavigationPhrases,
 };
 
 export default function DayPickerNavigation(props) {
@@ -38,6 +47,7 @@ export default function DayPickerNavigation(props) {
     onPrevMonthClick,
     onNextMonthClick,
     orientation,
+    phrases,
   } = props;
 
   const isVertical = orientation !== HORIZONTAL_ORIENTATION;
@@ -72,6 +82,7 @@ export default function DayPickerNavigation(props) {
     <div className={navClassNames}>
       {!isVerticalScrollable &&
         <span
+          aria-label={phrases.jumpToPrevMonth}
           className={prevClassNames}
           onClick={onPrevMonthClick}
         >
@@ -80,6 +91,7 @@ export default function DayPickerNavigation(props) {
       }
 
       <span
+        aria-label={phrases.jumpToNextMonth}
         className={nextClassNames}
         onClick={onNextMonthClick}
       >

src/components/DayPickerRangeController.jsx

@@ -3,6 +3,9 @@ import momentPropTypes from 'react-moment-proptypes';
 import { forbidExtraProps } from 'airbnb-prop-types';
 import moment from 'moment';
 
+import { DayPickerPhrases } from '../defaultPhrases';
+import getPhrasePropTypes from '../utils/getPhrasePropTypes';
+
 import isTouchDevice from '../utils/isTouchDevice';
 
 import isInclusivelyAfterDay from '../utils/isInclusivelyAfterDay';
@@ -51,6 +54,7 @@ const propTypes = forbidExtraProps({
 
   // i18n
   monthFormat: PropTypes.string,
+  phrases: PropTypes.shape(getPhrasePropTypes(DayPickerPhrases)),
 });
 
 const defaultProps = {
@@ -86,6 +90,7 @@ const defaultProps = {
 
   // i18n
   monthFormat: 'MMMM YYYY',
+  phrases: DayPickerPhrases,
 };
 
 export default class DayPickerRangeController extends React.Component {

src/components/SingleDatePicker.jsx

@@ -5,6 +5,8 @@ import Portal from 'react-portal';
 import { forbidExtraProps } from 'airbnb-prop-types';
 import { addEventListener, removeEventListener } from 'consolidated-events';
 
+import { SingleDatePickerPhrases } from '../defaultPhrases';
+
 import OutsideClickHandler from './OutsideClickHandler';
 import toMomentObject from '../utils/toMomentObject';
 import toLocalizedDateString from '../utils/toLocalizedDateString';
@@ -70,10 +72,7 @@ const defaultProps = {
   // internationalization props
   displayFormat: () => moment.localeData().longDateFormat('L'),
   monthFormat: 'MMMM YYYY',
-  phrases: {
-    closeDatePicker: 'Close',
-    clearDate: 'Clear Date',
-  },
+  phrases: SingleDatePickerPhrases,
 };
 
 export default class SingleDatePicker extends React.Component {

src/components/SingleDatePickerInput.jsx

@@ -2,6 +2,9 @@ import React, { PropTypes } from 'react';
 import { forbidExtraProps } from 'airbnb-prop-types';
 import cx from 'classnames';
 
+import { SingleDatePickerInputPhrases } from '../defaultPhrases';
+import getPhrasePropTypes from '../utils/getPhrasePropTypes';
+
 import DateInput from './DateInput';
 import CloseButton from '../svg/close.svg';
 
@@ -24,9 +27,7 @@ const propTypes = forbidExtraProps({
   onKeyDownTab: PropTypes.func,
 
   // i18n
-  phrases: PropTypes.shape({
-    clearDate: PropTypes.node,
-  }),
+  phrases: PropTypes.shape(getPhrasePropTypes(SingleDatePickerInputPhrases)),
 });
 
 const defaultProps = {
@@ -47,9 +48,7 @@ const defaultProps = {
   onKeyDownTab() {},
 
   // i18n
-  phrases: {
-    clearDate: 'Clear Date',
-  },
+  phrases: SingleDatePickerInputPhrases,
 };
 
 export default class SingleDatePickerInput extends React.Component {
@@ -122,13 +121,11 @@ export default class SingleDatePickerInput extends React.Component {
               'SingleDatePickerInput__clear-date--hide': !displayValue,
               'SingleDatePickerInput__clear-date--hover': isClearDateHovered,
             })}
+            aria-label={phrases.clearDate}
             onMouseEnter={this.onClearDateMouseEnter}
             onMouseLeave={this.onClearDateMouseLeave}
             onClick={onClearDate}
           >
-            <span className="screen-reader-only">
-              {phrases.clearDate}
-            </span>
             <CloseButton />
           </button>
         }

src/defaultPhrases.js

@@ -0,0 +1,49 @@
+const closeDatePicker = 'Close';
+const focusStartDate = 'Focus on start date';
+const clearDate = 'Clear Date';
+const clearDates = 'Clear Dates';
+const jumpToPrevMonth = 'Jump to previous month';
+const jumpToNextMonth = 'Jump to next month';
+
+export default {
+  closeDatePicker,
+  focusStartDate,
+  clearDate,
+  clearDates,
+  jumpToPrevMonth,
+  jumpToNextMonth,
+};
+
+export const DateRangePickerPhrases = {
+  closeDatePicker,
+  clearDates,
+  focusStartDate,
+  jumpToPrevMonth,
+  jumpToNextMonth,
+};
+
+export const DateRangePickerInputPhrases = {
+  focusStartDate,
+  clearDates,
+};
+
+export const SingleDatePickerPhrases = {
+  closeDatePicker,
+  clearDate,
+  jumpToPrevMonth,
+  jumpToNextMonth,
+};
+
+export const SingleDatePickerInputPhrases = {
+  clearDate,
+};
+
+export const DayPickerPhrases = {
+  jumpToPrevMonth,
+  jumpToNextMonth,
+};
+
+export const DayPickerNavigationPhrases = {
+  jumpToPrevMonth,
+  jumpToNextMonth,
+};

src/shapes/DateRangePickerShape.js

@@ -1,6 +1,9 @@
 import { PropTypes } from 'react';
 import momentPropTypes from 'react-moment-proptypes';
 
+import { DateRangePickerPhrases } from '../defaultPhrases';
+import getPhrasePropTypes from '../utils/getPhrasePropTypes';
+
 import FocusedInputShape from '../shapes/FocusedInputShape';
 import OrientationShape from '../shapes/OrientationShape';
 import anchorDirectionShape from '../shapes/AnchorDirectionShape';
@@ -55,8 +58,5 @@ export default {
   // internationalization props
   displayFormat: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
   monthFormat: PropTypes.string,
-  phrases: PropTypes.shape({
-    closeDatePicker: PropTypes.node,
-    clearDates: PropTypes.node,
-  }),
+  phrases: PropTypes.shape(getPhrasePropTypes(DateRangePickerPhrases)),
 };

src/shapes/SingleDatePickerShape.js

@@ -1,6 +1,9 @@
 import { PropTypes } from 'react';
 import momentPropTypes from 'react-moment-proptypes';
 
+import { SingleDatePickerPhrases } from '../defaultPhrases';
+import getPhrasePropTypes from '../utils/getPhrasePropTypes';
+
 import OrientationShape from '../shapes/OrientationShape';
 import anchorDirectionShape from '../shapes/AnchorDirectionShape';
 
@@ -47,7 +50,5 @@ export default {
   // internationalization props
   displayFormat: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
   monthFormat: PropTypes.string,
-  phrases: PropTypes.shape({
-    closeDatePicker: PropTypes.node,
-  }),
+  phrases: PropTypes.shape(getPhrasePropTypes(SingleDatePickerPhrases)),
 };

src/utils/getPhrasePropTypes.js

@@ -0,0 +1,6 @@
+import { PropTypes } from 'react';
+
+export default function getPhrasePropTypes(defaultPhrases) {
+  return Object.keys(defaultPhrases)
+    .reduce((phrases, key) => ({ ...phrases, [key]: PropTypes.node }), {});
+}