feat(datepicker): Build an array of navElements to focus trap

Author: mst101

src/components/Datepicker.vue

@@ -60,7 +60,7 @@
           @mousedown.prevent
         >
           <Transition name="view">
-            <div :key="view">
+            <div ref="view" :key="view">
               <slot name="beforeCalendarHeader" />
               <Component
                 :is="picker"
@@ -442,6 +442,7 @@ export default {
       this.setInitialView()
       this.$nextTick(() => {
         this.setTabbableCell()
+        this.setNavElements()
       })
 
       this.$emit('opened')

src/mixins/navMixin.vue

@@ -2,10 +2,98 @@
 export default {
   data() {
     return {
+      navElements: [],
       tabbableCell: null,
     }
   },
   methods: {
+    /**
+     * Returns true if the calendar has been passed the given slot
+     * @param  {String} slotName The name of the slot
+     * @return {Boolean}
+     */
+    hasSlot(slotName) {
+      return !!this.$slots[slotName]
+    },
+    /**
+     * Returns an array of all HTML elements which should be focus-trapped in the specified slot
+     * @returns {Array}   An array of HTML elements
+     */
+    getElementsFromSlot(slotName) {
+      if (!this.hasSlot(slotName)) {
+        return []
+      }
+
+      if (slotName === 'beforeCalendarHeader') {
+        return this.getFocusableElements(this.$refs.view.children[0])
+      }
+
+      if (slotName === 'calendarFooter') {
+        return this.getFocusableElements(this.$refs.view.children[2])
+      }
+
+      const isBeforeHeader = slotName.indexOf('beforeCalendarHeader') > -1
+      const picker = this.$refs.picker.$el
+      const index = isBeforeHeader ? 0 : picker.children.length - 1
+
+      return this.getFocusableElements(picker.children[index])
+    },
+    /**
+     * Returns an array of all HTML elements which should be focus-trapped in the header
+     * @returns {Array}   An array of HTML elements
+     */
+    getElementsFromHeader() {
+      const view = this.ucFirst(this.view)
+      const beforeCalendarSlotName = `beforeCalendarHeader${view}`
+      const picker = this.$refs.picker.$el
+      const index = this.hasSlot(beforeCalendarSlotName) ? 1 : 0
+      const fragment = picker.children[index]
+
+      return this.showHeader ? this.getFocusableElements(fragment) : []
+    },
+    /**
+     * Returns an array of focusable elements in a given HTML fragment
+     * @param   {Element} fragment The HTML fragment to search
+     * @returns {Array}
+     */
+    getFocusableElements(fragment) {
+      const navNodeList = fragment.querySelectorAll(
+        'button:enabled, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
+      )
+
+      return [...Array.prototype.slice.call(navNodeList)]
+    },
+    /**
+     * Returns the input element (when typeable)
+     * @returns {Element}
+     */
+    getInputField() {
+      if (!this.typeable || this.inline) {
+        return null
+      }
+
+      return this.$refs.dateInput.$refs[this.refName]
+    },
+    /**
+     * Determines which elements in datepicker should be focus-trapped
+     */
+    setNavElements() {
+      if (!this.view) return
+
+      const view = this.ucFirst(this.view)
+
+      this.navElements = [
+        this.getInputField(),
+        this.getElementsFromSlot('beforeCalendarHeader'),
+        this.getElementsFromSlot(`beforeCalendarHeader${view}`),
+        this.getElementsFromHeader(),
+        this.tabbableCell,
+        this.getElementsFromSlot(`calendarFooter${view}`),
+        this.getElementsFromSlot('calendarFooter'),
+      ]
+        .filter((item) => !!item)
+        .reduce((acc, val) => acc.concat(val), [])
+    },
     /**
      * Sets the focus-trapped cell in the picker
      */

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

@@ -96,6 +96,55 @@ describe('Datepicker mounted', () => {
   })
 })
 
+describe('Datepicker mounted with slots', () => {
+  let wrapper
+
+  beforeEach(() => {
+    const beforeCalendarHeader =
+      '<div key="0">Example <a href="#">beforeCalendarHeader</a> slot</div>'
+    const beforeCalendarHeaderDay =
+      '<div key="1">Example <a href="#">beforeCalendarHeaderDay</a> slot</div>'
+    const calendarFooterDay =
+      '<div key="2">Example <a href="#">calendarFooterDay</a> slot</div>'
+    const beforeCalendarHeaderMonth =
+      '<div key="3">Example <a href="#">beforeCalendarHeaderMonth</a> slot</div>'
+    const calendarFooterMonth =
+      '<div key="4">Example <a href="#">calendarFooterMonth</a> slot</div>'
+    const beforeCalendarHeaderYear =
+      '<div key="5">Example <a href="#">beforeCalendarHeaderYear</a> slot</div>'
+    const calendarFooterYear =
+      '<div key="6">Example <a href="#">calendarFooterYear</a> slot</div>'
+    const calendarFooter =
+      '<div key="7">Example <a href="#">calendarFooter</a> slot</div>'
+
+    wrapper = mount(Datepicker, {
+      slots: {
+        beforeCalendarHeader,
+        beforeCalendarHeaderDay,
+        calendarFooterDay,
+        beforeCalendarHeaderMonth,
+        calendarFooterMonth,
+        beforeCalendarHeaderYear,
+        calendarFooterYear,
+        calendarFooter,
+      },
+    })
+  })
+
+  afterEach(() => {
+    wrapper.destroy()
+  })
+
+  it('knows how many navElements there are', async () => {
+    expect(wrapper.vm.navElements.length).toEqual(0)
+
+    const input = wrapper.find('input')
+    await input.trigger('click')
+
+    expect(wrapper.vm.navElements.length).toEqual(8)
+  })
+})
+
 describe('Datepicker shallowMounted', () => {
   let wrapper
   let date