Add other keyboard interactions

Author: Maja Wichrowska

css/CalendarDay.scss

@@ -1,21 +1,5 @@
 @import "variables";
 
-//   position: relative;
-//   height: 100%;
-//   width: 100%;
-//   text-align: center;
-//   background: none;
-//   border: 0;
-//   margin: 0;
-//   padding: 0;
-//   color: inherit;
-//   font: inherit;
-//   line-height: normal;
-//   overflow: visible;
-//   cursor: pointer;
-//   box-sizing: border-box;
-
-// This order is important.
 .CalendarDay {
   border: 1px solid lighten($react-dates-color-border-light, 3);
   padding: 0;
@@ -24,12 +8,31 @@
   cursor: pointer;
   width: 39px;
   height: 38px;
+}
+
+.CalendarDay__button {
+  position: relative;
+  height: 100%;
+  width: 100%;
+  text-align: center;
+  background: none;
+  border: 0;
+  margin: 0;
+  padding: 0;
+  color: inherit;
+  font: inherit;
+  line-height: normal;
+  overflow: visible;
+  cursor: pointer;
+  box-sizing: border-box;
 
   &:active {
     background: darken($react-dates-color-white, 5%);
+    outline: 0;
   }
 }
 
+// This order is important.
 .CalendarDay--highlighted-calendar {
   background: $react-dates-color-highlighted;
   color: $react-dates-color-gray;

css/DayPickerNavigation.scss

@@ -23,6 +23,7 @@
 
   &:active {
     background: darken($react-dates-color-white, 5%);
+    outline: 0;
   }
 }
 

src/components/CalendarDay.jsx

@@ -64,22 +64,25 @@ export default class CalendarDay extends React.Component {
       isOutsideDay,
       modifiers,
       renderDay,
+      isFocused,
     } = this.props;
 
     const className = cx('CalendarDay', {
       'CalendarDay--outside': !day || isOutsideDay,
     }, getModifiersForDay(modifiers, day).map(mod => `CalendarDay--${mod}`));
 
     return (day ?
-      <td>
+      <td className={className}>
         <button
-          ref={(ref) => { this.buttonRef = ref; }}
           type="button"
-          className={className}
-          aria-label={day.format('LL')}
+          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)}
+          tabIndex={isFocused ? 0 : -1}
         >
           {renderDay ? renderDay(day) : day.format('D')}
         </button>

src/components/CalendarMonthGrid.jsx

@@ -161,15 +161,17 @@ export default class CalendarMonthGrid extends React.Component {
 
     const { months } = this.state;
 
+    const isHorizontal = orientation === HORIZONTAL_ORIENTATION;
+
     const className = cx('CalendarMonthGrid', {
-      'CalendarMonthGrid--horizontal': orientation === HORIZONTAL_ORIENTATION,
+      'CalendarMonthGrid--horizontal': isHorizontal,
       'CalendarMonthGrid--vertical': orientation === VERTICAL_ORIENTATION,
       'CalendarMonthGrid--vertical-scrollable': orientation === VERTICAL_SCROLLABLE,
       'CalendarMonthGrid--animating': isAnimating,
     });
 
     const style = Object.assign({
-      width: (numberOfMonths + 1) * calendarMonthWidth,
+      width: isHorizontal ? (numberOfMonths + 1) * calendarMonthWidth : calendarMonthWidth,
     }, getTransformStyles(transformValue));
 
     return (

src/components/DateInput.jsx

@@ -61,10 +61,10 @@ export default class DateInput extends React.Component {
   }
 
   componentDidUpdate(prevProps) {
-    const { focused } = this.props;
-    if (prevProps.focused === focused) return;
+    const { focused, hasFocus } = this.props;
+    if (prevProps.focused === focused && prevProps.hasFocus === hasFocus) return;
 
-    if (focused) {
+    if (focused && hasFocus) {
       this.inputRef.focus();
       this.inputRef.select();
     } else {

src/components/DateRangePicker.jsx

@@ -80,6 +80,8 @@ const defaultProps = {
   phrases: {
     closeDatePicker: 'Close',
     clearDates: 'Clear Dates',
+    jumpToPrevMonth: 'Jump to previous month',
+    jumpToNextMonth: 'Jump to next month',
   },
 };
 
@@ -88,12 +90,14 @@ export default class DateRangePicker extends React.Component {
     super(props);
     this.state = {
       dayPickerContainerStyles: {},
+      isDateRangePickerInputFocused: false,
       isDayPickerFocused: false,
     };
 
     this.onOutsideClick = this.onOutsideClick.bind(this);
-    this.onFocusDayPicker = this.onFocusDayPicker.bind(this);
-    this.onBlurDayPicker = this.onBlurDayPicker.bind(this);
+    this.onDateRangePickerInputFocus = this.onDateRangePickerInputFocus.bind(this);
+    this.onDayPickerFocus = this.onDayPickerFocus.bind(this);
+    this.onDayPickerBlur = this.onDayPickerBlur.bind(this);
 
     this.responsivizePickerPosition = this.responsivizePickerPosition.bind(this);
   }
@@ -108,6 +112,10 @@ export default class DateRangePicker extends React.Component {
     this.responsivizePickerPosition();
   }
 
+  componentWillReceiveProps(nextProps) {
+    // set daterangepickinputfocused to true if focusedinput went from nothing to something
+  }
+
   shouldComponentUpdate(nextProps, nextState) {
     return shallowCompare(this, nextProps, nextState);
   }
@@ -127,17 +135,37 @@ export default class DateRangePicker extends React.Component {
     const { onFocusChange } = this.props;
     if (!this.isOpened()) return;
 
+    this.setState({
+      isDateRangePickerInputFocused: false,
+      isDayPickerFocused: false,
+    });
+
     onFocusChange(null);
   }
 
-  onFocusDayPicker() {
+  onDateRangePickerInputFocus(focusedInput) {
+    const { onFocusChange } = this.props;
+
+    if (focusedInput) {
+      this.setState({
+        isDateRangePickerInputFocused: true,
+        isDayPickerFocused: false,
+      });
+    }
+
+    onFocusChange(focusedInput);
+  }
+
+  onDayPickerFocus() {
     this.setState({
+      isDateRangePickerInputFocused: false,
       isDayPickerFocused: true,
     });
   }
 
-  onBlurDayPicker() {
+  onDayPickerBlur() {
     this.setState({
+      isDateRangePickerInputFocused: true,
       isDayPickerFocused: false,
     });
   }
@@ -238,6 +266,7 @@ export default class DateRangePicker extends React.Component {
       keepOpenOnDateSelect,
       renderDay,
       initialVisibleMonth,
+      phrases: { jumpToPrevMonth, jumpToNextMonth },
     } = this.props;
     const { dayPickerContainerStyles, isDayPickerFocused } = this.state;
 
@@ -278,7 +307,11 @@ export default class DateRangePicker extends React.Component {
           keepOpenOnDateSelect={keepOpenOnDateSelect}
           renderDay={renderDay}
           isFocused={isDayPickerFocused}
-          onBlur={this.onBlurDayPicker}
+          onBlur={this.onDayPickerBlur}
+          phrases={{
+            jumpToPrevMonth,
+            jumpToNextMonth,
+          }}
         />
 
         {withFullScreenPortal &&
@@ -321,10 +354,10 @@ export default class DateRangePicker extends React.Component {
       reopenPickerOnClearDates,
       keepOpenOnDateSelect,
       onDatesChange,
-      onFocusChange,
-      renderDay,
     } = this.props;
 
+    const { isDateRangePickerInputFocused } = this.state;
+
     const onOutsideClick = (!withPortal && !withFullScreenPortal) ? this.onOutsideClick : undefined;
 
     return (
@@ -352,11 +385,11 @@ export default class DateRangePicker extends React.Component {
             isOutsideRange={isOutsideRange}
             withFullScreenPortal={withFullScreenPortal}
             onDatesChange={onDatesChange}
-            onFocusChange={onFocusChange}
-            renderDay={renderDay}
-            onArrowDown={this.onFocusDayPicker}
+            onFocusChange={this.onDateRangePickerInputFocus}
+            onArrowDown={this.onDayPickerFocus}
             phrases={phrases}
             screenReaderMessage={screenReaderInputMessage}
+            isFocused={isDateRangePickerInputFocused}
           />
 
           {this.maybeRenderDayPickerWithPortal()}

src/components/DateRangePickerInput.jsx

@@ -26,7 +26,6 @@ const propTypes = forbidExtraProps({
   onClearDates: PropTypes.func,
   onArrowDown: PropTypes.func,
 
-
   startDate: PropTypes.string,
   startDateValue: PropTypes.string,
   endDate: PropTypes.string,
@@ -44,6 +43,7 @@ const propTypes = forbidExtraProps({
 
   // i18n
   phrases: PropTypes.shape({
+    focusStartDate: PropTypes.node,
     clearDates: PropTypes.node,
   }),
 });
@@ -80,7 +80,8 @@ const defaultProps = {
 
   // i18n
   phrases: {
-    clearDates: 'Clear Dates',
+    focusStartDate: 'Focus on start date',
+    clearDates: 'Clear dates',
   },
 };
 
@@ -137,6 +138,7 @@ export default class DateRangePickerInput extends React.Component {
       customInputIcon,
       customArrowIcon,
       phrases,
+      isFocused,
     } = this.props;
 
     const inputIcon = customInputIcon || (<CalendarIcon />);
@@ -149,12 +151,14 @@ export default class DateRangePickerInput extends React.Component {
         })}
       >
         {(showDefaultInputIcon || customInputIcon !== null) &&
-          <span
+          <button
+            type="button"
             className="DateRangePickerInput__calendar-icon"
+            aria-label={phrases.focusStartDate}
             onClick={onStartDateFocus}
           >
             {inputIcon}
-          </span>
+          </button>
         }
         <DateInput
           id={startDateId}
@@ -163,6 +167,7 @@ export default class DateRangePickerInput extends React.Component {
           inputValue={startDateValue}
           screenReaderMessage={screenReaderMessage}
           focused={isStartDateFocused}
+          hasFocus={isFocused}
           disabled={disabled}
           required={required}
           showCaret={showCaret}
@@ -173,7 +178,11 @@ export default class DateRangePickerInput extends React.Component {
           onKeyDownArrowDown={onArrowDown}
         />
 
-        <div className="DateRangePickerInput__arrow">
+        <div
+          className="DateRangePickerInput__arrow"
+          aria-hidden="true"
+          role="presentation"
+        >
           {arrowIcon}
         </div>
 
@@ -184,6 +193,7 @@ export default class DateRangePickerInput extends React.Component {
           inputValue={endDateValue}
           screenReaderMessage={screenReaderMessage}
           focused={isEndDateFocused}
+          hasFocus={isFocused}
           disabled={disabled}
           required={required}
           showCaret={showCaret}
@@ -197,6 +207,7 @@ export default class DateRangePickerInput extends React.Component {
         {showClearDates &&
           <button
             type="button"
+            aria-label={phrases.clearDates}
             className={cx('DateRangePickerInput__clear-dates', {
               'DateRangePickerInput__clear-dates--hide': !(startDate || endDate),
               'DateRangePickerInput__clear-dates--hover': isClearDatesHovered,
@@ -205,9 +216,6 @@ export default class DateRangePickerInput extends React.Component {
             onMouseLeave={this.onClearDatesMouseLeave}
             onClick={onClearDates}
           >
-            <span className="screen-reader-only">
-              {phrases.clearDates}
-            </span>
             <CloseButton />
           </button>
         }

src/components/DateRangePickerInputController.jsx

@@ -210,6 +210,7 @@ export default class DateRangePickerInputWithHandlers extends React.Component {
       required,
       phrases,
       onArrowDown,
+      isFocused,
     } = this.props;
 
     const startDateString = this.getDateString(startDate);
@@ -246,6 +247,7 @@ export default class DateRangePickerInputWithHandlers extends React.Component {
         onClearDates={this.clearDates}
         screenReaderMessage={screenReaderMessage}
         onArrowDown={onArrowDown}
+        isFocused={isFocused}
       />
     );
   }