feat(pickerheader): Arrow keys on prev/up/next buttons

Author: mst101

src/components/Datepicker.vue

@@ -79,6 +79,7 @@
                 :first-day-of-week="firstDayOfWeek"
                 :highlighted="highlighted"
                 :is-rtl="isRtl"
+                :is-typeable="typeable"
                 :is-up-disabled="isUpDisabled"
                 :is-minimum-view="isMinimumView"
                 :open-date="computedOpenDate"
@@ -95,6 +96,7 @@
                 :year-range="yearPickerRange"
                 @page-change="handlePageChange"
                 @select="handleSelect"
+                @set-focus="setFocus($event)"
                 @set-transition-name="setTransitionName($event)"
                 @set-view="setView"
               >

src/components/PickerDay.vue

@@ -9,14 +9,19 @@
       :is-next-disabled="isNextDisabled"
       :is-previous-disabled="isPreviousDisabled"
       :is-rtl="isRtl"
+      @focus-input="focusInput"
       @page-change="changePage($event)"
+      @set-focus="$emit('set-focus', $event)"
     >
       <slot slot="prevIntervalBtn" name="prevIntervalBtn" />
       <UpButton
         ref="up"
         :class="{ btn: bootstrapStyling }"
         :is-disabled="isUpDisabled"
+        :is-rtl="isRtl"
+        @focus-input="focusInput"
         @select="$emit('set-view', 'month')"
+        @set-focus="$emit('set-focus', $event)"
       >
         {{ pageTitleDay }}
       </UpButton>

src/components/PickerHeader.vue

@@ -8,6 +8,10 @@
       :disabled="isPreviousDisabled"
       type="button"
       @click="$emit('page-change', previousPage)"
+      @keydown.down.prevent="focusTabbableCell"
+      @keydown.up.prevent="$emit('focus-input')"
+      @keydown.left.prevent="arrowLeftPrev"
+      @keydown.right.prevent="arrowRightPrev"
     >
       <slot name="prevIntervalBtn">
         <span class="default">&lt;</span>
@@ -22,6 +26,10 @@
       :disabled="isNextDisabled"
       type="button"
       @click="$emit('page-change', nextPage)"
+      @keydown.down.prevent="focusTabbableCell"
+      @keydown.up.prevent="$emit('focus-input')"
+      @keydown.left.prevent="arrowLeftNext"
+      @keydown.right.prevent="arrowRightNext"
     >
       <slot name="nextIntervalBtn">
         <span class="default">&gt;</span>
@@ -57,5 +65,50 @@ export default {
       nextPage: { incrementBy: 1, focusRefs: ['next'] },
     }
   },
+  methods: {
+    /**
+     * Changes the page, or sets focus to the adjacent button
+     */
+    arrowLeftPrev() {
+      if (this.isRtl) {
+        this.$emit('set-focus', ['up', 'next', 'tabbableCell'])
+        return
+      }
+      this.$emit('page-change', this.previousPage)
+    },
+    /**
+     * Changes the page, or sets focus to the adjacent button
+     */
+    arrowRightPrev() {
+      if (this.isRtl) {
+        this.$emit('page-change', this.previousPage)
+        return
+      }
+      this.$emit('set-focus', ['up', 'next', 'tabbableCell'])
+    },
+    /**
+     * Changes the page, or sets focus to the adjacent button
+     */
+    arrowLeftNext() {
+      if (this.isRtl) {
+        this.$emit('page-change', this.nextPage)
+        return
+      }
+      this.$emit('set-focus', ['up', 'prev', 'tabbableCell'])
+    },
+    /**
+     * Changes the page, or sets focus to the adjacent button
+     */
+    arrowRightNext() {
+      if (this.isRtl) {
+        this.$emit('set-focus', ['up', 'prev', 'tabbableCell'])
+        return
+      }
+      this.$emit('page-change', this.nextPage)
+    },
+    focusTabbableCell() {
+      this.$emit('set-focus', ['tabbableCell'])
+    },
+  },
 }
 </script>

src/components/PickerMonth.vue

@@ -9,14 +9,19 @@
       :is-next-disabled="isNextDisabled"
       :is-previous-disabled="isPreviousDisabled"
       :is-rtl="isRtl"
+      @focus-input="focusInput"
       @page-change="changePage($event)"
+      @set-focus="$emit('set-focus', $event)"
     >
       <slot slot="prevIntervalBtn" name="prevIntervalBtn" />
       <UpButton
         ref="up"
         :class="{ btn: bootstrapStyling }"
         :is-disabled="isUpDisabled"
+        :is-rtl="isRtl"
+        @focus-input="focusInput"
         @select="$emit('set-view', 'year')"
+        @set-focus="$emit('set-focus', $event)"
       >
         {{ pageTitleMonth }}
       </UpButton>

src/components/PickerYear.vue

@@ -9,10 +9,17 @@
       :is-next-disabled="isNextDisabled"
       :is-previous-disabled="isPreviousDisabled"
       :is-rtl="isRtl"
+      @focus-input="focusInput"
       @page-change="changePage($event)"
+      @set-focus="$emit('set-focus', $event)"
     >
       <slot slot="prevIntervalBtn" name="prevIntervalBtn" />
-      <UpButton ref="up" :class="{ btn: bootstrapStyling }" :is-disabled="true">
+      <UpButton
+        ref="up"
+        :class="{ btn: bootstrapStyling }"
+        :is-disabled="true"
+        :is-rtl="isRtl"
+      >
         {{ pageTitleYear }}
       </UpButton>
       <slot slot="nextIntervalBtn" name="nextIntervalBtn" />

src/components/UpButton.vue

@@ -5,6 +5,10 @@
     :disabled="isDisabled"
     type="button"
     @click="$emit('select')"
+    @keydown.down.prevent="$emit('set-focus', ['tabbableCell'])"
+    @keydown.up.prevent="$emit('focus-input')"
+    @keydown.left.prevent="$emit('set-focus', [isRtl ? 'next' : 'prev'])"
+    @keydown.right.prevent="$emit('set-focus', [isRtl ? 'prev' : 'next'])"
   >
     <slot />
   </button>
@@ -18,6 +22,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    isRtl: {
+      type: Boolean,
+      required: true,
+    },
   },
 }
 </script>

src/mixins/pickerMixin.vue

@@ -21,6 +21,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    isTypeable: {
+      type: Boolean,
+      default: false,
+    },
     isUpDisabled: {
       type: Boolean,
       default: false,
@@ -115,6 +119,14 @@ export default {
 
       this.$emit('page-change', { focusRefs, pageDate })
     },
+    /**
+     * Focuses the input field, if typeable
+     */
+    focusInput() {
+      if (this.isTypeable) {
+        this.$emit('set-focus', ['input'])
+      }
+    },
     /**
      * Determines which transition to use (for edge dates) and emits a 'select' event
      * @param {Object} cell

test/unit/specs/DateInput/typedDates.spec.js

@@ -235,3 +235,56 @@ describe('Datepicker mount', () => {
     expect(wrapper.vm.selectedDate).toEqual(new Date(2016, 1, 15))
   })
 })
+
+describe('Datepicker mounted to document body', () => {
+  let wrapper
+
+  beforeEach(() => {
+    wrapper = mount(Datepicker, {
+      attachTo: document.body,
+      propsData: {
+        typeable: true,
+      },
+    })
+  })
+
+  afterEach(() => {
+    wrapper.destroy()
+  })
+
+  it('arrows up from the previous button to the input field', async () => {
+    const input = wrapper.find('input')
+
+    await input.trigger('click')
+    await wrapper.vm.$nextTick()
+
+    const prevButton = wrapper.find('button.prev')
+    await prevButton.trigger('keydown.up')
+
+    expect(document.activeElement).toBe(input.element)
+  })
+
+  it('arrows up from the next button to the input field', async () => {
+    const input = wrapper.find('input')
+
+    await input.trigger('click')
+    await wrapper.vm.$nextTick()
+
+    const nextButton = wrapper.find('button.next')
+    await nextButton.trigger('keydown.up')
+
+    expect(document.activeElement).toBe(input.element)
+  })
+
+  it('arrows up from the up button to the input field', async () => {
+    const input = wrapper.find('input')
+
+    await input.trigger('click')
+    await wrapper.vm.$nextTick()
+
+    const upButton = wrapper.find('button.vdp-datepicker__up')
+    await upButton.trigger('keydown.up')
+
+    expect(document.activeElement).toBe(input.element)
+  })
+})