feat(pickercells): Handle arrow keys

Author: mst101

src/components/Datepicker.vue

@@ -88,6 +88,7 @@
                 :show-edge-dates="showEdgeDates"
                 :show-full-month-name="fullMonthName"
                 :show-header="showHeader"
+                :slide-duration="slideDuration"
                 :tabbable-cell-id="tabbableCellId"
                 :transition-name="transitionName"
                 :translation="translation"

src/components/PickerCells.vue

@@ -11,6 +11,10 @@
       :disabled="cell.isDisabled"
       type="button"
       @click="$emit('select', cell)"
+      @keydown.up.prevent="handleArrow(id, -columns)"
+      @keydown.down.prevent="handleArrow(id, columns)"
+      @keydown.left.prevent="handleArrow(id, isRtl ? 1 : -1)"
+      @keydown.right.prevent="handleArrow(id, isRtl ? -1 : 1)"
     >
       <slot :cell="cell" />
     </button>
@@ -29,6 +33,10 @@ export default {
       type: Array,
       required: true,
     },
+    isRtl: {
+      type: Boolean,
+      default: false,
+    },
     showEdgeDates: {
       type: Boolean,
       default: true,
@@ -43,6 +51,15 @@ export default {
       required: true,
     },
   },
+  computed: {
+    /**
+     * The number of columns in the picker
+     * @return {Number}
+     */
+    columns() {
+      return this.view === 'day' ? 7 : 3
+    },
+  },
   methods: {
     /**
      * Set the classes for a specific cell
@@ -73,6 +90,12 @@ export default {
         },
       ]
     },
+    /**
+     * Emits an `arrow` event
+     */
+    handleArrow(cellId, delta) {
+      this.$emit('arrow', { cellId, delta })
+    },
   },
 }
 </script>

src/components/PickerDay.vue

@@ -43,9 +43,11 @@
             v-slot="{ cell }"
             :bootstrap-styling="bootstrapStyling"
             :cells="cells"
+            :is-rtl="isRtl"
             :show-edge-dates="showEdgeDates"
             :tabbable-cell-id="tabbableCellId"
             view="day"
+            @arrow="handleArrow($event)"
             @select="select($event)"
           >
             <slot name="dayCellContent" :cell="cell">

src/components/PickerMonth.vue

@@ -36,8 +36,10 @@
           v-slot="{ cell }"
           :bootstrap-styling="bootstrapStyling"
           :cells="cells"
+          :is-rtl="isRtl"
           :tabbable-cell-id="tabbableCellId"
           view="month"
+          @arrow="handleArrow($event)"
           @select="select($event)"
         >
           {{ cell.month }}

src/components/PickerYear.vue

@@ -33,8 +33,10 @@
           v-slot="{ cell }"
           :bootstrap-styling="bootstrapStyling"
           :cells="cells"
+          :is-rtl="isRtl"
           :tabbable-cell-id="tabbableCellId"
           view="year"
+          @arrow="handleArrow($event)"
           @select="select($event)"
         >
           {{ cell.year }}

src/mixins/navMixin.vue

@@ -147,10 +147,21 @@ export default {
         this.setTabbableCell()
       }
     },
+    /**
+     * Returns true if the user has arrowed to a new page
+     * @return {Boolean}
+     */
+    hasArrowedToNewPage() {
+      return this.focus.refs && this.focus.refs[0] === 'arrow-to-cell'
+    },
     /**
      * Sets the correct focus on next tick
      */
     reviewFocus() {
+      if (this.hasArrowedToNewPage()) {
+        return
+      }
+
       this.$nextTick(() => {
         this.setTabbableCell()
         this.setNavElements()

src/mixins/pickerMixin.vue

@@ -54,6 +54,10 @@ export default {
       type: Boolean,
       default: true,
     },
+    slideDuration: {
+      type: Number,
+      default: 250,
+    },
     tabbableCellId: {
       type: Number,
       default: null,
@@ -99,6 +103,16 @@ export default {
     },
   },
   methods: {
+    /**
+     * Used when an arrow key press would cause the focus to land on a disabled date
+     * @param {Object} options
+     */
+    addMoreSteps(options) {
+      if (options.stepsRemaining <= 0 && Math.abs(options.delta) > 1) {
+        return Math.abs(options.delta)
+      }
+      return options.stepsRemaining
+    },
     /**
      * Changes the page up or down
      * @param {Number} incrementBy
@@ -119,6 +133,29 @@ export default {
 
       this.$emit('page-change', { focusRefs, pageDate })
     },
+    /**
+     * Changes the page and focuses the cell that is being 'arrowed' to
+     * @param {Object} options
+     */
+    changePageAndSetFocus(options) {
+      const { delta } = options
+      const isPageDisabled =
+        (delta > 0 && this.isNextDisabled) ||
+        (delta < 0 && this.isPreviousDisabled)
+
+      if (isPageDisabled) {
+        return
+      }
+
+      this.changePage({
+        incrementBy: Math.sign(delta),
+        focusRefs: ['arrow-to-cell'],
+      })
+
+      this.$nextTick(() => {
+        this.setFocusOnNewPage(options)
+      })
+    },
     /**
      * Focuses the input field, if typeable
      */
@@ -127,6 +164,75 @@ export default {
         this.$emit('set-focus', ['input'])
       }
     },
+    /**
+     * Returns the element that should be focused when navigating via an arrow key
+     * @param  {HTMLElement} currentElement  The element currently being iterated on
+     * @param  {Number}      delta           The number of cells that the focus should move
+     * @param  {Number}      stepsRemaining  The number of steps remaining in the iteration
+     * @return {HTMLElement}
+     */
+    getElement({ currentElement, delta, stepsRemaining }) {
+      const element = this.getElementSibling(currentElement, delta)
+      const options = {
+        currentElement: element,
+        delta,
+        stepsRemaining: stepsRemaining - 1,
+      }
+
+      if (!element) {
+        return this.changePageAndSetFocus(options)
+      }
+
+      if (this.isMutedOrDisabled(element)) {
+        options.stepsRemaining = this.addMoreSteps(options)
+
+        return this.getElement(options)
+      }
+
+      if (stepsRemaining > 1 && options.currentElement) {
+        return this.getElement(options)
+      }
+
+      return element
+    },
+    /**
+     * Returns the element directly next to the currentElement
+     * @param  {HTMLElement} currentElement  The element currently being iterated on
+     * @param  {Number}      delta           The number of cells that the focus should move
+     * @return {HTMLElement}
+     */
+    getElementSibling(currentElement, delta) {
+      const isNext = delta > 0
+
+      return isNext
+        ? currentElement.nextElementSibling
+        : currentElement.previousElementSibling
+    },
+    /**
+     * Returns the first or last cell, depending on the direction of the search
+     * @param  {Number} delta The number of cells that the focus should move
+     * @return {HTMLElement}
+     */
+    getFirstOrLastElement(delta) {
+      const isNext = delta > 0
+      const elements = this.$refs.cells.$el.children
+
+      return isNext ? elements[0] : elements[elements.length - 1]
+    },
+    /**
+     * Moves the focused cell up/down/left/right
+     * @param {Object}
+     */
+    handleArrow({ delta }) {
+      const stepsRemaining = Math.abs(delta)
+      const options = {
+        currentElement: document.activeElement,
+        delta,
+        stepsRemaining,
+      }
+
+      this.setFocusToAvailableCell(options)
+    },
     /**
      * Determines which transition to use (for edge dates) and emits a 'select' event
      * @param {Object} cell
@@ -142,6 +248,62 @@ export default {
 
       this.$emit('select', cell)
     },
+    /**
+     * Returns true if the given element cannot be focused
+     * @param {HTMLElement} element The element in question
+     * @return {Boolean}
+     */
+    isMutedOrDisabled(element) {
+      const isMuted = element.classList.value.split(' ').includes('muted')
+      const isDisabled = element.disabled
+
+      return isMuted || isDisabled
+    },
+    /**
+     * Sets the focus on the correct cell following a page change
+     * @param {Object} options
+     */
+    setFocusOnNewPage({ delta, stepsRemaining }) {
+      const currentElement = this.getFirstOrLastElement(delta)
+      const options = {
+        currentElement,
+        delta,
+        stepsRemaining,
+      }
+
+      if (stepsRemaining <= 0) {
+        if (this.isMutedOrDisabled(currentElement)) {
+          options.stepsRemaining = Math.abs(options.delta)
+
+          setTimeout(() => {
+            this.setFocusToAvailableCell(options)
+          }, this.slideDuration)
+
+          return
+        }
+
+        setTimeout(() => {
+          currentElement.focus()
+        }, this.slideDuration)
+
+        return
+      }
+
+      setTimeout(() => {
+        this.setFocusToAvailableCell(options)
+      }, this.slideDuration)
+    },
+    /**
+     * Sets the focus on the next focusable cell when an arrow key is pressed
+     * @param {Object} options
+     */
+    setFocusToAvailableCell(options) {
+      const element = this.getElement(options)
+
+      if (element) {
+        element.focus()
+      }
+    },
   },
 }
 </script>