Address some issues introduced by the a11y PR

andreasgreen · Apr 27, 2017 · e301ced · e301ced
1 parent 3815516
commit e301ced
Show file tree

Hide file tree

Showing 18 changed files with 69 additions and 25 deletions.
diff --git a/css/CalendarMonth.scss b/css/CalendarMonth.scss
@@ -7,7 +7,7 @@
 
   &:first-of-type {
     position: absolute;
-    z-index: -1;
+    z-index: $react-dates-z-index - 1;
     opacity: 0;
     pointer-events: none;
   }

diff --git a/css/CalendarMonthGrid.scss b/css/CalendarMonthGrid.scss
@@ -2,15 +2,15 @@
 
 .CalendarMonthGrid {
   background: $react-dates-color-white;
-  z-index: 0;
+  z-index: $react-dates-z-index;
   text-align: left;
 }
 
 .CalendarMonthGrid--animating {
   -webkit-transition: -webkit-transform 0.2s ease-in-out;
   -moz-transition: -moz-transform 0.2s ease-in-out;
   transition: transform 0.2s ease-in-out;
-  z-index: 1;
+  z-index: $react-dates-z-index + 1;
 }
 
 .CalendarMonthGrid--horizontal {

diff --git a/css/DateInput.scss b/css/DateInput.scss
@@ -25,7 +25,7 @@ $caret-top: $react-dates-spacing-vertical-picker - $react-dates-width-tooltip-ar
   border: $react-dates-width-tooltip-arrow / 2 solid transparent;
   border-top: 0;
   left: 22px;
-  z-index: 2;
+  z-index: $react-dates-z-index + 2;
 }
 
 .DateInput--with-caret::before {

diff --git a/css/DateRangePicker.scss b/css/DateRangePicker.scss
@@ -17,7 +17,7 @@
 }
 
 .DateRangePicker__picker {
-  z-index: 1;
+  z-index: $react-dates-z-index + 1;
   background-color: $react-dates-color-white;
   position: absolute;
   top: $react-dates-spacing-vertical-picker;
@@ -58,7 +58,7 @@
   top: 0;
   right: 0;
   padding: 15px;
-  z-index: 2;
+  z-index: $react-dates-z-index + 2;
 
   svg {
     height: 15px;

diff --git a/css/DayPicker.scss b/css/DayPicker.scss
@@ -40,7 +40,7 @@
   color: $react-dates-color-placeholder-text;
   position: absolute;
   top: 62px;
-  z-index: 2;
+  z-index: $react-dates-z-index + 2;
   padding: 0 13px;
   text-align: left;
 

diff --git a/css/DayPickerKeyboardShortcuts.scss b/css/DayPickerKeyboardShortcuts.scss
@@ -17,10 +17,11 @@
 .DayPickerKeyboardShortcuts__show {
   width: 22px;
   position: absolute;
+  z-index: $react-dates-z-index + 2;
 }
 
 .DayPickerKeyboardShortcuts__show--bottom-right {
-  border-top: 26px solid $react-dates-color-white;
+  border-top: 26px solid transparent;
   border-right: 33px solid $react-dates-color-primary;
   bottom: 0;
   right: 0;
@@ -36,7 +37,7 @@
 }
 
 .DayPickerKeyboardShortcuts__show--top-right {
-  border-bottom: 26px solid $react-dates-color-white;
+  border-bottom: 26px solid transparent;
   border-right: 33px solid $react-dates-color-primary;
   top: 0;
   right: 0;
@@ -52,7 +53,7 @@
 }
 
 .DayPickerKeyboardShortcuts__show--top-left {
-  border-bottom: 26px solid $react-dates-color-white;
+  border-bottom: 26px solid transparent;
   border-left: 33px solid $react-dates-color-primary;
   top: 0;
   left: 0;
@@ -73,6 +74,7 @@
 }
 
 .DayPickerKeyboardShortcuts__panel {
+  overflow: auto;
   background: $react-dates-color-white;
   border: 1px solid $react-dates-color-border;
   border-radius: 2px;
@@ -81,7 +83,7 @@
   bottom: 0;
   right: 0;
   left: 0;
-  z-index: 2;
+  z-index: $react-dates-z-index + 2;
   padding: 22px;
   margin: 33px;
 }
@@ -102,7 +104,7 @@
   position: absolute;
   right: 22px;
   top: 22px;
-  z-index: 2;
+  z-index: $react-dates-z-index + 2;
 
   svg {
     height: 15px;
@@ -126,7 +128,6 @@
 
 .KeyboardShortcutRow__key-container {
   display: inline-block;
-  width: 15%;
   white-space: nowrap;
   text-align: right;
   margin-right: 6px;
@@ -141,7 +142,9 @@
 }
 
 .KeyboardShortcutRow__action {
-  display: inline-block;
+  display: inline;
+  word-break: break-word;
+  margin-left: 8px;
 }
 
 .DayPickerKeyboardShortcuts__panel--block {

diff --git a/css/DayPickerNavigation.scss b/css/DayPickerNavigation.scss
@@ -34,7 +34,7 @@
     border-radius: 3px;
     padding: 6px 9px;
     top: 18px;
-    z-index: 2;
+    z-index: $react-dates-z-index + 2;
     position: absolute;
   }
 
@@ -64,7 +64,7 @@
   left: 0;
   height: 52px;
   width: 100%;
-  z-index: 2;
+  z-index: $react-dates-z-index + 2;
 
   .DayPickerNavigation__prev,
   .DayPickerNavigation__next {

diff --git a/css/SingleDatePicker.scss b/css/SingleDatePicker.scss
@@ -6,7 +6,7 @@
 }
 
 .SingleDatePicker__picker {
-  z-index: 1;
+  z-index: $react-dates-z-index + 1;
   background-color: $react-dates-color-white;
   position: absolute;
   top: $react-dates-spacing-vertical-picker;
@@ -47,7 +47,7 @@
   top: 0;
   right: 0;
   padding: 15px;
-  z-index: 2;
+  z-index: $react-dates-z-index + 2;
 
   svg {
     height: 15px;

diff --git a/css/variables.scss b/css/variables.scss
@@ -26,3 +26,5 @@ $react-dates-color-placeholder-text: #757575 !default;
 $react-dates-color-text: #484848 !default;
 $react-dates-color-text-focus: #007a87 !default;
 $react-dates-color-focus: #99ede6 !default;
+
+$react-dates-z-index: 0 !default;
diff --git a/src/components/DateRangePicker.jsx b/src/components/DateRangePicker.jsx
@@ -65,6 +65,7 @@ const defaultProps = {
   keepOpenOnDateSelect: false,
   reopenPickerOnClearDates: false,
   renderCalendarInfo: null,
+  hideKeyboardShortcutsPanel: false,
   daySize: DAY_SIZE,
 
   // navigation related props
@@ -298,6 +299,7 @@ export default class DateRangePicker extends React.Component {
       renderDay,
       renderCalendarInfo,
       initialVisibleMonth,
+      hideKeyboardShortcutsPanel,
       customCloseIcon,
       onClose,
       phrases,
@@ -336,6 +338,7 @@ export default class DateRangePicker extends React.Component {
           withPortal={withPortal || withFullScreenPortal}
           daySize={daySize}
           initialVisibleMonth={initialVisibleMonthThunk}
+          hideKeyboardShortcutsPanel={hideKeyboardShortcutsPanel}
           navPrev={navPrev}
           navNext={navNext}
           minimumNights={minimumNights}

diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx
@@ -48,6 +48,7 @@ const propTypes = forbidExtraProps({
   hidden: PropTypes.bool,
   initialVisibleMonth: PropTypes.func,
   renderCalendarInfo: PropTypes.func,
+  hideKeyboardShortcutsPanel: PropTypes.bool,
   daySize: nonNegativeInteger,
 
   // navigation props
@@ -84,6 +85,7 @@ export const defaultProps = {
   hidden: false,
   initialVisibleMonth: () => moment(),
   renderCalendarInfo: null,
+  hideKeyboardShortcutsPanel: false,
   daySize: DAY_SIZE,
 
   // navigation props
@@ -385,6 +387,7 @@ export default class DayPicker extends React.Component {
     this.setState({
       monthTransition: PREV_TRANSITION,
       translationValue,
+      focusedDate: null,
       nextFocusedDate,
     });
   }
@@ -401,6 +404,7 @@ export default class DayPicker extends React.Component {
     this.setState({
       monthTransition: NEXT_TRANSITION,
       translationValue,
+      focusedDate: null,
       nextFocusedDate,
     });
   }
@@ -488,7 +492,13 @@ export default class DayPicker extends React.Component {
   }
 
   updateStateAfterMonthTransition() {
-    const { currentMonth, monthTransition, focusedDate, nextFocusedDate } = this.state;
+    const {
+      currentMonth,
+      monthTransition,
+      focusedDate,
+      nextFocusedDate,
+      withMouseInteractions,
+    } = this.state;
 
     if (!monthTransition) return;
 
@@ -502,7 +512,7 @@ export default class DayPicker extends React.Component {
     let newFocusedDate = null;
     if (nextFocusedDate) {
       newFocusedDate = nextFocusedDate;
-    } else if (focusedDate) {
+    } else if (!focusedDate && !withMouseInteractions) {
       newFocusedDate = this.getFocusedDay(newMonth);
     }
 
@@ -522,7 +532,7 @@ export default class DayPicker extends React.Component {
     }, () => {
       // we don't want to focus on the relevant calendar day after a month transition
       // if the user is navigating around using a mouse
-      if (this.state.withMouseInteractions) {
+      if (withMouseInteractions) {
         const activeElement = getActiveElement();
         if (activeElement && activeElement !== document.body) {
           activeElement.blur();
@@ -674,6 +684,7 @@ export default class DayPicker extends React.Component {
       onDayMouseLeave,
       renderDay,
       renderCalendarInfo,
+      hideKeyboardShortcutsPanel,
       onOutsideClick,
       monthFormat,
       daySize,
@@ -792,7 +803,7 @@ export default class DayPicker extends React.Component {
               {verticalScrollable && this.renderNavigation()}
             </div>
 
-            {!isTouch &&
+            {!isTouch && !hideKeyboardShortcutsPanel &&
               <DayPickerKeyboardShortcuts
                 block={this.isVertical() && !withPortal}
                 buttonLocation={keyboardShortcutButtonLocation}

diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx
@@ -46,6 +46,7 @@ const propTypes = forbidExtraProps({
   orientation: ScrollableOrientationShape,
   withPortal: PropTypes.bool,
   initialVisibleMonth: PropTypes.func,
+  hideKeyboardShortcutsPanel: PropTypes.bool,
   daySize: nonNegativeInteger,
 
   navPrev: PropTypes.node,
@@ -87,7 +88,7 @@ const defaultProps = {
   numberOfMonths: 1,
   orientation: HORIZONTAL_ORIENTATION,
   withPortal: false,
-
+  hideKeyboardShortcutsPanel: false,
   initialVisibleMonth: DayPickerDefaultProps.initialVisibleMonth,
   daySize: DAY_SIZE,
 
@@ -315,6 +316,7 @@ export default class DayPickerRangeController extends React.Component {
       withPortal,
       enableOutsideDays,
       initialVisibleMonth,
+      hideKeyboardShortcutsPanel,
       daySize,
       focusedInput,
       renderDay,
@@ -381,6 +383,7 @@ export default class DayPickerRangeController extends React.Component {
         navNext={navNext}
         renderDay={renderDay}
         renderCalendarInfo={renderCalendarInfo}
+        hideKeyboardShortcutsPanel={hideKeyboardShortcutsPanel}
         isFocused={isFocused}
         getFirstFocusableDay={this.getFirstFocusableDay}
         onBlur={onBlur}

diff --git a/src/components/SingleDatePicker.jsx b/src/components/SingleDatePicker.jsx
@@ -58,6 +58,7 @@ const defaultProps = {
   keepOpenOnDateSelect: false,
   reopenPickerOnClearDate: false,
   renderCalendarInfo: null,
+  hideKeyboardShortcutsPanel: false,
   daySize: DAY_SIZE,
 
   // navigation related props
@@ -392,6 +393,7 @@ export default class SingleDatePicker extends React.Component {
       renderCalendarInfo,
       date,
       initialVisibleMonth,
+      hideKeyboardShortcutsPanel,
       customCloseIcon,
       phrases,
       daySize,
@@ -434,6 +436,7 @@ export default class SingleDatePicker extends React.Component {
           withPortal={withPortal || withFullScreenPortal}
           hidden={!focused}
           initialVisibleMonth={initialVisibleMonthThunk}
+          hideKeyboardShortcutsPanel={hideKeyboardShortcutsPanel}
           navPrev={navPrev}
           navNext={navNext}
           renderDay={renderDay}

diff --git a/src/shapes/DateRangePickerShape.js b/src/shapes/DateRangePickerShape.js
@@ -47,6 +47,7 @@ export default {
   keepOpenOnDateSelect: PropTypes.bool,
   reopenPickerOnClearDates: PropTypes.bool,
   renderCalendarInfo: PropTypes.func,
+  hideKeyboardShortcutsPanel: PropTypes.bool,
 
   // navigation related props
   navPrev: PropTypes.node,

diff --git a/src/shapes/SingleDatePickerShape.js b/src/shapes/SingleDatePickerShape.js
@@ -36,6 +36,7 @@ export default {
   keepOpenOnDateSelect: PropTypes.bool,
   reopenPickerOnClearDate: PropTypes.bool,
   renderCalendarInfo: PropTypes.func,
+  hideKeyboardShortcutsPanel: PropTypes.bool,
   daySize: nonNegativeInteger,
 
   // navigation related props

diff --git a/stories/DateRangePicker_calendar.js b/stories/DateRangePicker_calendar.js
@@ -129,4 +129,10 @@ storiesOf('DRP - Calendar Props', module)
       )}
       autoFocus
     />
+  ))
+  .addWithInfo('with keyboard shorcuts panel hidden', () => (
+    <DateRangePickerWrapper
+      hideKeyboardShortcutsPanel
+      autoFocus
+    />
   ));
diff --git a/stories/SingleDatePicker_calendar.js b/stories/SingleDatePicker_calendar.js
@@ -120,4 +120,10 @@ storiesOf('SDP - Calendar Props', module)
       )}
       autoFocus
     />
+  ))
+  .addWithInfo('with keyboard shorcuts panel hidden', () => (
+    <SingleDatePickerWrapper
+      hideKeyboardShortcutsPanel
+      autoFocus
+    />
   ));