feat(datepicker): Focus correct element on view change

Author: mst101

src/components/Datepicker.vue

@@ -332,6 +332,9 @@ export default {
       const parsedValue = this.parseValue(value)
       this.setValue(parsedValue)
     },
+    view(newView, oldView) {
+      this.handleViewChange(newView, oldView)
+    },
   },
   mounted() {
     this.init()
@@ -410,6 +413,26 @@ export default {
     handleTypedDate(date) {
       this.selectDate(date.valueOf())
     },
+    /**
+     * Focus the relevant element when the view changes
+     * @param {String} newView
+     * @param {String} oldView
+     */
+    handleViewChange(newView, oldView) {
+      const isClosing = newView === ''
+      const isOpeningInline = oldView === '' && this.isInline
+
+      if (isClosing || isOpeningInline) {
+        return
+      }
+
+      if (!this.isRevertingToOpenDate) {
+        this.setViewChangeFocusRefs(newView, oldView)
+        this.reviewFocus()
+      }
+
+      this.isRevertingToOpenDate = false
+    },
     /**
      * Initiate the component
      */
@@ -539,6 +562,28 @@ export default {
         this.view = view
       }
     },
+    /**
+     * Sets the array of `refs` that might be focused following a view change
+     * @param {String} newView The view being changed to
+     * @param {String} oldView The previous view
+     */
+    setViewChangeFocusRefs(newView, oldView) {
+      if (oldView === '') {
+        this.focus.refs = []
+        return
+      }
+
+      const views = ['day', 'month', 'year']
+      const isNewView = (view) => view === newView
+      const isOldView = (view) => view === oldView
+      const newViewIndex = views.findIndex(isNewView)
+      const oldViewIndex = views.findIndex(isOldView)
+      const isViewChangeUp = newViewIndex - oldViewIndex > 0
+
+      this.focus.refs = isViewChangeUp
+        ? ['up', 'tabbableCell']
+        : ['tabbableCell', 'up']
+    },
     /**
      * Set the view to the next view down e.g. from `month` to `day`
      * @param {Object} cell The currently focused cell

test/unit/specs/Datepicker/Datepicker.spec.js

@@ -94,6 +94,19 @@ describe('Datepicker mounted', () => {
     await calendarButton.trigger('click')
     expect(wrapper.vm.isOpen).toBeFalsy()
   })
+
+  it('selects an edge date', async () => {
+    await wrapper.setProps({
+      value: new Date(2020, 0, 1),
+    })
+
+    const cells = wrapper.findAll('button.cell')
+    const lastCell = cells.at(cells.length - 1)
+
+    await lastCell.trigger('click')
+
+    expect(wrapper.vm.selectedDate).toStrictEqual(new Date(2020, 1, 1))
+  })
 })
 
 describe('Datepicker mounted with slots', () => {
@@ -171,6 +184,40 @@ describe('Datepicker mounted to body', () => {
     expect(todayCell.text()).toBe(new Date().getDate().toString())
     expect(document.activeElement).toStrictEqual(todayCell.element)
   })
+
+  it('focuses the up button on increasing the view', async () => {
+    const input = wrapper.find('input')
+    await input.trigger('click')
+
+    jest.advanceTimersByTime(250)
+    let upButton = wrapper.find('button.vdp-datepicker__up')
+
+    await upButton.trigger('click')
+    jest.advanceTimersByTime(250)
+    upButton = wrapper.find('button.vdp-datepicker__up')
+
+    expect(document.activeElement).toBe(upButton.element)
+  })
+
+  it('focuses the tabbable-cell on decreasing the view', async () => {
+    const input = wrapper.find('input')
+    await input.trigger('click')
+    await wrapper.vm.$nextTick()
+    jest.advanceTimersByTime(250)
+
+    const upButton = wrapper.find('button.vdp-datepicker__up')
+
+    await upButton.trigger('click')
+    jest.advanceTimersByTime(250)
+    const firstCell = wrapper.find('button.cell')
+
+    await firstCell.trigger('click')
+    await wrapper.vm.$nextTick()
+    jest.advanceTimersByTime(250)
+
+    const tabbableCell = wrapper.find('button.cell[data-test-tabbable-cell]')
+    expect(document.activeElement).toBe(tabbableCell.element)
+  })
 })
 
 describe('Datepicker shallowMounted', () => {