Adds availability information to CalendarDay aria label

react-dates · Mar 7, 2017 · 7c1e502 · 7c1e502
1 parent 1509c25
commit 7c1e502
Show file tree

Hide file tree

Showing 13 changed files with 89 additions and 48 deletions.
diff --git a/constants.js b/constants.js
@@ -11,4 +11,6 @@ module.exports = {
 
   ANCHOR_LEFT: 'left',
   ANCHOR_RIGHT: 'right',
+
+  BLOCKED_MODIFIER: 'blocked',
 };
diff --git a/css/DayPickerNavigation.scss b/css/DayPickerNavigation.scss
@@ -23,7 +23,6 @@
 
   &:active {
     background: darken($react-dates-color-white, 5%);
-    // outline: 0;
   }
 }
 

diff --git a/css/variables.scss b/css/variables.scss
@@ -17,7 +17,7 @@ $react-dates-color-gray: #565a5c !default;
 $react-dates-color-gray-dark: darken($react-dates-color-gray, 10.5%) !default;
 $react-dates-color-gray-light: lighten($react-dates-color-gray, 17.8%) !default;   // #82888a
 $react-dates-color-gray-lighter: lighten($react-dates-color-gray, 45%) !default;     // #cacccd
-$react-dates-color-gray-lightest: #eeeeee;
+$react-dates-color-gray-lightest: lighten($react-dates-color-gray, 60%) !default;
 $react-dates-color-highlighted: #ffe8bc !default;
 
 $react-dates-color-border: #dbdbdb !default;

diff --git a/src/components/CalendarDay.jsx b/src/components/CalendarDay.jsx
@@ -5,6 +5,11 @@ import { forbidExtraProps } from 'airbnb-prop-types';
 import moment from 'moment';
 import cx from 'classnames';
 
+import { CalendarDayPhrases } from '../defaultPhrases';
+import getPhrasePropTypes from '../utils/getPhrasePropTypes';
+
+import { BLOCKED_MODIFIER } from '../../constants';
+
 const propTypes = forbidExtraProps({
   day: momentPropTypes.momentObj,
   isOutsideDay: PropTypes.bool,
@@ -14,6 +19,9 @@ const propTypes = forbidExtraProps({
   onDayMouseEnter: PropTypes.func,
   onDayMouseLeave: PropTypes.func,
   renderDay: PropTypes.func,
+
+  // internationalization
+  phrases: PropTypes.shape(getPhrasePropTypes(CalendarDayPhrases)),
 });
 
 const defaultProps = {
@@ -25,6 +33,9 @@ const defaultProps = {
   onDayMouseEnter() {},
   onDayMouseLeave() {},
   renderDay: null,
+
+  // internationalization
+  phrases: CalendarDayPhrases,
 };
 
 export function getModifiersForDay(modifiers, day) {
@@ -65,30 +76,41 @@ export default class CalendarDay extends React.Component {
       modifiers,
       renderDay,
       isFocused,
+      phrases: { unavailable, available },
     } = this.props;
 
+    if (!day) return <td />;
+
+    const modifiersForDay = getModifiersForDay(modifiers, day);
+
     const className = cx('CalendarDay', {
-      'CalendarDay--outside': !day || isOutsideDay,
-    }, getModifiersForDay(modifiers, day).map(mod => `CalendarDay--${mod}`));
+      'CalendarDay--outside': isOutsideDay,
+    }, modifiersForDay.map(mod => `CalendarDay--${mod}`));
+
+
+    let availabilityText = '';
+    if (BLOCKED_MODIFIER in modifiers) {
+      availabilityText = modifiers[BLOCKED_MODIFIER](day) ? unavailable : available;
+    }
+
+    const ariaLabel = `${availabilityText} ${day.format('dddd')}. ${day.format('LL')}`;
 
-    return (day ?
+    return (
       <td className={className}>
         <button
           type="button"
           ref={(ref) => { this.buttonRef = ref; }}
           className="CalendarDay__button"
-          aria-label={`${day.format('dddd')}. ${day.format('LL')}`}
-          onMouseEnter={e => this.onDayMouseEnter(day, e)}
-          onMouseLeave={e => this.onDayMouseLeave(day, e)}
-          onMouseUp={e => e.currentTarget.blur()}
-          onClick={e => this.onDayClick(day, e)}
+          aria-label={ariaLabel}
+          onMouseEnter={(e) => { this.onDayMouseEnter(day, e); }}
+          onMouseLeave={(e) => { this.onDayMouseLeave(day, e); }}
+          onMouseUp={(e) => { e.currentTarget.blur(); }}
+          onClick={(e) => { this.onDayClick(day, e); }}
           tabIndex={isFocused ? 0 : -1}
         >
           {renderDay ? renderDay(day) : day.format('D')}
         </button>
       </td>
-      :
-      <td />
     );
   }
 }

diff --git a/src/components/CalendarMonth.jsx b/src/components/CalendarMonth.jsx
@@ -7,6 +7,9 @@ import { forbidExtraProps } from 'airbnb-prop-types';
 import moment from 'moment';
 import cx from 'classnames';
 
+import { CalendarDayPhrases } from '../defaultPhrases';
+import getPhrasePropTypes from '../utils/getPhrasePropTypes';
+
 import CalendarDay from './CalendarDay';
 
 import getCalendarMonthWeeks from '../utils/getCalendarMonthWeeks';
@@ -35,6 +38,7 @@ const propTypes = forbidExtraProps({
 
   // i18n
   monthFormat: PropTypes.string,
+  phrases: PropTypes.shape(getPhrasePropTypes(CalendarDayPhrases)),
 });
 
 const defaultProps = {
@@ -52,6 +56,7 @@ const defaultProps = {
 
   // i18n
   monthFormat: 'MMMM YYYY', // english locale
+  phrases: CalendarDayPhrases,
 };
 
 export default class CalendarMonth extends React.Component {
@@ -87,6 +92,7 @@ export default class CalendarMonth extends React.Component {
       onDayMouseLeave,
       renderDay,
       focusedDate,
+      phrases,
     } = this.props;
 
     const { weeks } = this.state;
@@ -119,6 +125,7 @@ export default class CalendarMonth extends React.Component {
                     onDayMouseLeave={onDayMouseLeave}
                     onDayClick={onDayClick}
                     renderDay={renderDay}
+                    phrases={phrases}
                   />
                 ))}
               </tr>

diff --git a/src/components/CalendarMonthGrid.jsx b/src/components/CalendarMonthGrid.jsx
@@ -6,6 +6,9 @@ import moment from 'moment';
 import cx from 'classnames';
 import { addEventListener, removeEventListener } from 'consolidated-events';
 
+import { CalendarDayPhrases } from '../defaultPhrases';
+import getPhrasePropTypes from '../utils/getPhrasePropTypes';
+
 import CalendarMonth from './CalendarMonth';
 
 import isTransitionEndSupported from '../utils/isTransitionEndSupported';
@@ -38,6 +41,7 @@ const propTypes = forbidExtraProps({
 
   // i18n
   monthFormat: PropTypes.string,
+  phrases: PropTypes.shape(getPhrasePropTypes(CalendarDayPhrases)),
 });
 
 const defaultProps = {
@@ -59,6 +63,7 @@ const defaultProps = {
 
   // i18n
   monthFormat: 'MMMM YYYY', // english locale
+  phrases: CalendarDayPhrases,
 };
 
 function getMonths(initialMonth, numberOfMonths) {
@@ -158,6 +163,7 @@ export default class CalendarMonthGrid extends React.Component {
       onMonthTransitionEnd,
       focusedDate,
       calendarMonthWidth,
+      phrases,
     } = this.props;
 
 
@@ -172,9 +178,10 @@ export default class CalendarMonthGrid extends React.Component {
       'CalendarMonthGrid--animating': isAnimating,
     });
 
-    const style = Object.assign({
+    const style = {
       width: isHorizontal ? (numberOfMonths + 1) * calendarMonthWidth : calendarMonthWidth,
-    }, getTransformStyles(transformValue));
+      ...getTransformStyles(transformValue),
+    };
 
     return (
       <div
@@ -200,6 +207,7 @@ export default class CalendarMonthGrid extends React.Component {
               onDayClick={onDayClick}
               renderDay={renderDay}
               focusedDate={isVisible ? focusedDate : null}
+              phrases={phrases}
             />
           );
         })}

diff --git a/src/components/DateInput.jsx b/src/components/DateInput.jsx
@@ -29,8 +29,8 @@ const defaultProps = {
   displayValue: '',
   inputValue: '',
   screenReaderMessage: '',
-  focused: false, // handles actual DOM focus
-  selected: false, // stylizes the input to indicate that it will be filled
+  focused: false,
+  selected: false,
   disabled: false,
   required: false,
   showCaret: false,
@@ -94,22 +94,17 @@ export default class DateInput extends React.Component {
       onKeyDownQuestionMark,
     } = this.props;
 
-    switch (e.key) {
-      case 'Tab':
-        if (e.shiftKey) {
-          onKeyDownShiftTab(e);
-        } else {
-          onKeyDownTab(e);
-        }
-        break;
-      case 'ArrowDown':
-        onKeyDownArrowDown(e);
-        break;
-      case '?':
-        onKeyDownQuestionMark(e);
-        break;
-      default:
-        // do nothing
+    const { key } = e;
+    if (key === 'Tab') {
+      if (e.shiftKey) {
+        onKeyDownShiftTab(e);
+      } else {
+        onKeyDownTab(e);
+      }
+    } else if (key === 'ArrowDown') {
+      onKeyDownArrowDown(e);
+    } else if (key === '?') {
+      onKeyDownQuestionMark(e);
     }
   }
 

diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx
@@ -511,12 +511,12 @@ export default class DayPicker extends React.Component {
     if (orientation === VERTICAL_SCROLLABLE) {
       onNextMonthClick = this.multiplyScrollableMonths;
     } else {
-      onNextMonthClick = e => this.onNextMonthClick(null, e);
+      onNextMonthClick = (e) => { this.onNextMonthClick(null, e); };
     }
 
     return (
       <DayPickerNavigation
-        onPrevMonthClick={e => this.onPrevMonthClick(null, e)}
+        onPrevMonthClick={(e) => { this.onPrevMonthClick(null, e); }}
         onNextMonthClick={onNextMonthClick}
         navPrev={navPrev}
         navNext={navNext}
@@ -675,6 +675,7 @@ export default class DayPicker extends React.Component {
                 onMonthTransitionEnd={this.updateStateAfterMonthTransition}
                 monthFormat={monthFormat}
                 focusedDate={shouldFocusDate ? focusedDate : null}
+                phrases={phrases}
               />
 
               {verticalScrollable && this.renderNavigation()}

diff --git a/src/components/DayPickerKeyboardShortcuts.jsx b/src/components/DayPickerKeyboardShortcuts.jsx
@@ -117,12 +117,6 @@ export default function DayPickerKeyboardShortcuts({
             {phrases.keyboardShortcuts}
           </div>
 
-          <ul className="DayPickerKeyboardShortcuts__list">
-            {keyboardShortcuts.map(({ unicode, label, action }) => (
-              <KeyboardShortcutRow key={label} unicode={unicode} label={label} action={action} />
-            ))}
-          </ul>
-
           <button
             className="DayPickerKeyboardShortcuts__close"
             type="button"
@@ -131,6 +125,12 @@ export default function DayPickerKeyboardShortcuts({
           >
             <CloseButton />
           </button>
+
+          <ul className="DayPickerKeyboardShortcuts__list">
+            {keyboardShortcuts.map(({ unicode, label, action }) => (
+              <KeyboardShortcutRow key={label} unicode={unicode} label={label} action={action} />
+            ))}
+          </ul>
         </div>
       }
     </div>

diff --git a/src/components/SingleDatePicker.jsx b/src/components/SingleDatePicker.jsx
@@ -5,8 +5,6 @@ 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';

diff --git a/src/defaultPhrases.js b/src/defaultPhrases.js
@@ -23,6 +23,8 @@ const moveFocustoStartAndEndOfWeek = 'Navigate to the beginning or end of the cu
 const returnFocusToInput = 'Return focus to the input field';
 const keyboardNavigationInstructions = `Press the down arrow to select a date using the calendar
   interface. Press ? to explore a list of all possible keyboard shortcuts.`;
+const available = 'Available.';
+const unavailable = 'Unavailable.';
 
 export default {
   closeDatePicker,
@@ -49,6 +51,8 @@ export default {
   moveFocustoStartAndEndOfWeek,
   returnFocusToInput,
   keyboardNavigationInstructions,
+  available,
+  unavailable,
 };
 
 export const DateRangePickerPhrases = {
@@ -75,6 +79,8 @@ export const DateRangePickerPhrases = {
   moveFocustoStartAndEndOfWeek,
   returnFocusToInput,
   keyboardNavigationInstructions,
+  available,
+  unavailable,
 };
 
 export const DateRangePickerInputPhrases = {
@@ -106,6 +112,8 @@ export const SingleDatePickerPhrases = {
   moveFocustoStartAndEndOfWeek,
   returnFocusToInput,
   keyboardNavigationInstructions,
+  available,
+  unavailable,
 };
 
 export const SingleDatePickerInputPhrases = {
@@ -133,6 +141,8 @@ export const DayPickerPhrases = {
   moveFocusByOneMonth,
   moveFocustoStartAndEndOfWeek,
   returnFocusToInput,
+  available,
+  unavailable,
 };
 
 export const DayPickerKeyboardShortcutsPhrases = {
@@ -159,3 +169,8 @@ export const DayPickerNavigationPhrases = {
   jumpToPrevMonth,
   jumpToNextMonth,
 };
+
+export const CalendarDayPhrases = {
+  available,
+  unavailable,
+};
diff --git a/src/shapes/DateRangePickerShape.js b/src/shapes/DateRangePickerShape.js
@@ -8,9 +8,6 @@ import FocusedInputShape from '../shapes/FocusedInputShape';
 import OrientationShape from '../shapes/OrientationShape';
 import anchorDirectionShape from '../shapes/AnchorDirectionShape';
 
-import { DateRangePickerPhrases } from '../defaultPhrases';
-import getPhrasePropTypes from '../utils/getPhrasePropTypes';
-
 export default {
   // required props for a functional interactive DateRangePicker
   startDate: momentPropTypes.momentObj,

diff --git a/src/shapes/SingleDatePickerShape.js b/src/shapes/SingleDatePickerShape.js
@@ -7,9 +7,6 @@ import getPhrasePropTypes from '../utils/getPhrasePropTypes';
 import OrientationShape from '../shapes/OrientationShape';
 import anchorDirectionShape from '../shapes/AnchorDirectionShape';
 
-import { SingleDatePickerPhrases } from '../defaultPhrases';
-import getPhrasePropTypes from '../utils/getPhrasePropTypes';
-
 export default {
   // required props for a functional interactive SingleDatePicker
   date: momentPropTypes.momentObj,