refactor(DatePicker, DateRangePicker): add focus trap for better accessibility handling

Author: mrholek

js/src/date-picker.js

@@ -140,7 +140,7 @@ class DatePicker extends DateRangePicker {
       const composedPath = event.composedPath()
 
       if (
-        composedPath.includes(context._element)
+        composedPath.includes(context._element) || composedPath.includes(context._menu)
       ) {
         continue
       }

js/src/date-range-picker.js

@@ -13,6 +13,7 @@ import EventHandler from './dom/event-handler.js'
 import Manipulator from './dom/manipulator.js'
 import SelectorEngine from './dom/selector-engine.js'
 import { defineJQueryPlugin, getElement, isRTL } from './util/index.js'
+import FocusTrap from './util/focustrap.js'
 import {
   convertToDateObject, getDateBySelectionType, getLocalDateFromString, isDateDisabled
 } from './util/calendar.js'
@@ -218,6 +219,8 @@ class DateRangePicker extends BaseComponent {
     this._createDateRangePickerCalendars()
     this._addEventListeners()
     this._addCalendarEventListeners()
+
+    this._focustrap = this._initializeFocusTrap()
   }
 
   // Getters
@@ -254,6 +257,7 @@ class DateRangePicker extends BaseComponent {
       this._menu.classList.add(CLASS_NAME_SHOW)
     }
 
+    this._focustrap.activate()
     EventHandler.trigger(this._element, EVENT_SHOWN)
 
     this._createPopper()
@@ -273,6 +277,7 @@ class DateRangePicker extends BaseComponent {
       this._menu.classList.remove(CLASS_NAME_SHOW)
     }
 
+    this._focustrap.deactivate()
     EventHandler.trigger(this._element, EVENT_HIDDEN)
   }
 
@@ -289,6 +294,8 @@ class DateRangePicker extends BaseComponent {
       clearTimeout(this._endInputTimeout)
     }
 
+    this._focustrap.deactivate()
+
     super.dispose()
   }
 
@@ -335,6 +342,13 @@ class DateRangePicker extends BaseComponent {
   }
 
   // Private
+  _initializeFocusTrap() {
+    return new FocusTrap({
+      additionalElement: this._config.container ? this._menu : null,
+      trapElement: this._element
+    })
+  }
+
   _addEventListeners() {
     EventHandler.on(this._indicatorElement, EVENT_CLICK, () => {
       if (!this._config.disabled) {
@@ -357,6 +371,7 @@ class DateRangePicker extends BaseComponent {
     EventHandler.on(this._element, EVENT_KEYDOWN, event => {
       if (event.key === ESCAPE_KEY) {
         this.hide()
+        this._startInput.focus()
       }
     })
 
@@ -460,7 +475,7 @@ class DateRangePicker extends BaseComponent {
   }
 
   _addCalendarEventListeners() {
-    for (const calendar of SelectorEngine.find(SELECTOR_CALENDAR, this._element)) {
+    for (const calendar of SelectorEngine.find(SELECTOR_CALENDAR, this._menu)) {
       EventHandler.on(calendar, 'startDateChange.coreui.calendar', event => {
         this._changeStartDate(event.date)
 
@@ -1068,7 +1083,7 @@ class DateRangePicker extends BaseComponent {
       const composedPath = event.composedPath()
 
       if (
-        composedPath.includes(context._element)
+        composedPath.includes(context._element) || composedPath.includes(context._menu)
       ) {
         continue
       }

js/src/util/focustrap.js

@@ -27,11 +27,13 @@ const TAB_NAV_FORWARD = 'forward'
 const TAB_NAV_BACKWARD = 'backward'
 
 const Default = {
+  additionalElement: null,
   autofocus: true,
   trapElement: null // The element to trap focus inside of
 }
 
 const DefaultType = {
+  additionalElement: '(element|null|undefined)',
   autofocus: 'boolean',
   trapElement: 'element'
 }
@@ -89,12 +91,16 @@ class FocusTrap extends Config {
 
   // Private
   _handleFocusin(event) {
-    const { trapElement } = this._config
+    const { additionalElement, trapElement } = this._config
 
     if (event.target === document || event.target === trapElement || trapElement.contains(event.target)) {
       return
     }
 
+    if (additionalElement && (event.target === additionalElement || additionalElement.contains(event.target))) {
+      return
+    }
+
     const elements = SelectorEngine.focusableChildren(trapElement)
 
     if (elements.length === 0) {
@@ -112,6 +118,40 @@ class FocusTrap extends Config {
     }
 
     this._lastTabNavDirection = event.shiftKey ? TAB_NAV_BACKWARD : TAB_NAV_FORWARD
+
+    const { additionalElement, trapElement } = this._config
+
+    if (!additionalElement) {
+      return
+    }
+
+    const trapElements = SelectorEngine.focusableChildren(trapElement)
+    const additionalElements = SelectorEngine.focusableChildren(additionalElement)
+
+    if (trapElements.length === 0 || additionalElements.length === 0) {
+      return
+    }
+
+    event.preventDefault()
+
+    if (trapElements.indexOf(event.target) === trapElements.length - 1 && !event.shiftKey) {
+      additionalElements[0].focus()
+      return
+    }
+
+    if (trapElements.indexOf(event.target) === 0 && event.shiftKey) {
+      additionalElements[additionalElements.length - 1].focus()
+      return
+    }
+
+    if (additionalElements.indexOf(event.target) === additionalElements.length - 1 && !event.shiftKey) {
+      trapElements[0].focus()
+      return
+    }
+
+    if (additionalElements.indexOf(event.target) === 0 && event.shiftKey) {
+      trapElements[trapElements.length - 1].focus()
+    }
   }
 }