@energie360/ui-library 0.1.9 → 0.1.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@energie360/ui-library",
-  "version": "0.1.9",
+  "version": "0.1.10",
   "description": "",
   "type": "module",
   "main": "dist/index.js",
@@ -14,7 +14,7 @@
     "./wizard": "./wizard/index.js",
     "./utility/elements/*": "./dist/elements/*",
     "./utility/layout/*": "./dist/layout/*",
-    "./abstracts": "./base/abstracts/index.scss"
+    "./base/abstracts": "./base/abstracts/index.scss"
   },
   "keywords": [],
   "author": "",

package/utils/a11y/focus-trap.js

@@ -0,0 +1,128 @@
+export const getFocusableElements = (parent) => {
+  const focusableElements = [
+    'button:not([disabled]):not([tabindex="-1"])',
+    '[href]',
+    'input:not([disabled]):not([type="hidden"])',
+    'select:not([disabled])',
+    'textarea:not([disabled])',
+    '[tabindex]:not([tabindex="-1"])',
+    'iframe',
+    'details',
+  ]
+
+  return Array.from(parent.querySelectorAll(focusableElements.join(', ')))
+}
+
+/**
+ *
+ * @param parent
+ * @param {Object} options
+ * @param {Boolean} options.focusFirstElement
+ * @param {Boolean} options.allowArrowUpDown
+ * @param {Boolean} options.allowArrowLeftRight
+ * @returns {{release: release}}
+ */
+export const focusTrap = (parent, options = {}) => {
+  const TAB = 'Tab'
+  const ARROW_DOWN = 'ArrowDown'
+  const ARROW_UP = 'ArrowUp'
+  const ARROW_LEFT = 'ArrowLeft'
+  const ARROW_RIGHT = 'ArrowRight'
+
+  const allFocusable = getFocusableElements(parent)
+  const firstFocusable = allFocusable[0]
+  const lastFocusable = allFocusable[allFocusable.length - 1]
+
+  const focusNext = () => {
+    let currentIdx = allFocusable.findIndex((el) => el === document.activeElement)
+
+    if (currentIdx === allFocusable.length - 1) {
+      currentIdx = 0
+    } else {
+      currentIdx++
+    }
+
+    allFocusable[currentIdx].focus()
+  }
+
+  const focusPrevious = () => {
+    let currentIdx = allFocusable.findIndex((el) => el === document.activeElement)
+
+    if (currentIdx === 0) {
+      currentIdx = allFocusable.length - 1
+    } else {
+      currentIdx--
+    }
+
+    allFocusable[currentIdx].focus()
+  }
+
+  const onKeydown = (e) => {
+    // Tab
+    if (e.code === TAB && !e.shiftKey) {
+      if (document.activeElement === lastFocusable) {
+        firstFocusable.focus()
+        e.preventDefault()
+      }
+
+      return
+    }
+
+    // Shift + Tab
+    if (e.code === TAB && e.shiftKey) {
+      if (document.activeElement === firstFocusable) {
+        lastFocusable.focus()
+        e.preventDefault()
+      }
+
+      return
+    }
+
+    if (options.allowArrowUpDown) {
+      if (e.code === ARROW_DOWN) {
+        focusNext()
+        return
+      }
+
+      if (e.code === ARROW_UP) {
+        focusPrevious()
+        return
+      }
+    }
+
+    if (options.allowArrowLeftRight) {
+      if (e.code === ARROW_RIGHT) {
+        focusNext()
+        return
+      }
+
+      if (e.code === ARROW_LEFT) {
+        focusPrevious()
+      }
+    }
+  }
+
+  const release = () => {
+    parent.removeEventListener('keydown', onKeydown)
+
+    // Is this necessary?
+    document.activeElement.blur()
+  }
+
+  // Set initial focus
+  if (options.focusFirstElement) {
+    firstFocusable.focus()
+  } else {
+    if (parent.tabIndex < 0) {
+      parent.tabIndex = 0
+    }
+
+    parent.focus()
+  }
+
+  parent.addEventListener('keydown', onKeydown)
+
+  return {
+    release,
+  }
+}