@ecl/vanilla-component-inpage-navigation - npm Package Compare versions

Comparing version 4.2.3 to 4.3.0

inpage-navigation.js

@@ -5,2 +5,3 @@ import Stickyfill from 'stickyfilljs';
 import EventManager from '@ecl/event-manager';
+import { createFocusTrap } from 'focus-trap';
 
@@ -21,2 +22,3 @@ /**
  * @param {Boolean} options.attachClickListener Whether or not to bind click events
+ * @param {Boolean} options.attachKeyListener Whether or not to bind click events
  */
@@ -65,2 +67,3 @@ export class InpageNavigation {
       attachClickListener = true,
+      attachKeyListener = true,
       contentClass = 'inpage-navigation__heading--active',
@@ -80,2 +83,3 @@ } = {},
     this.attachClickListener = attachClickListener;
+    this.attachKeyListener = attachKeyListener;
     this.stickySelector = stickySelector;
@@ -100,6 +104,5 @@ this.containerSelector = containerSelector;
     this.handleClickOnLink = this.handleClickOnLink.bind(this);
+    this.handleKeyboard = this.handleKeyboard.bind(this);
     this.initScrollSpy = this.initScrollSpy.bind(this);
     this.initObserver = this.initObserver.bind(this);
-    this.handleEsc = this.handleEsc.bind(this);
-    this.handleShiftTab = this.handleShiftTab.bind(this);
     this.activateScrollSpy = this.activateScrollSpy.bind(this);
@@ -110,2 +113,4 @@ this.deactivateScrollSpy = this.deactivateScrollSpy.bind(this);
     this.destroyObserver = this.destroyObserver.bind(this);
+    this.openList = this.openList.bind(this);
+    this.closeList = this.closeList.bind(this);
   }
@@ -330,2 +335,8 @@
 
+    // Create focus trap
+    this.focusTrap = createFocusTrap(this.element, {
+      onActivate: () => this.openList(),
+      onDeactivate: () => this.closeList(),
+    });
+
     if (this.attachClickListener && toggleElement) {
@@ -342,3 +353,3 @@ toggleElement.addEventListener('click', this.handleClickOnToggler);
 
-    document.addEventListener('keydown', this.handleEsc);
+    document.addEventListener('keydown', this.handleKeyboard);
 
@@ -388,2 +399,22 @@ // Set ecl initialized attribute
   /**
+   * Open mobile list link.
+   */
+  openList() {
+    const currentList = queryOne(this.inPageList, this.element);
+    const togglerElement = queryOne(this.toggleSelector, this.element);
+    currentList.classList.add('ecl-inpage-navigation__list--visible');
+    togglerElement.setAttribute('aria-expanded', 'true');
+  }
+
+  /**
+   * Close mobile list link.
+   */
+  closeList() {
+    const currentList = queryOne(this.inPageList, this.element);
+    const togglerElement = queryOne(this.toggleSelector, this.element);
+    currentList.classList.remove('ecl-inpage-navigation__list--visible');
+    togglerElement.setAttribute('aria-expanded', 'false');
+  }
+
+  /**
    * Invoke event listeners on toggle click.
@@ -394,3 +425,2 @@ *
   handleClickOnToggler(e) {
-    const currentList = queryOne(this.inPageList, this.element);
     const togglerElement = queryOne(this.toggleSelector, this.element);
@@ -409,5 +439,7 @@
     if (this.isExpanded) {
-      currentList.classList.remove('ecl-inpage-navigation__list--visible');
+      // Untrap focus
+      this.focusTrap.deactivate();
     } else {
-      currentList.classList.add('ecl-inpage-navigation__list--visible');
+      // Trap focus
+      this.focusTrap.activate();
     }
@@ -424,4 +456,2 @@
   handleClickOnLink(e) {
-    const currentList = queryOne(this.inPageList, this.element);
-    const togglerElement = queryOne(this.toggleSelector, this.element);
     const { href } = e.target;
@@ -438,4 +468,4 @@ let heading = null;
 
-    currentList.classList.remove('ecl-inpage-navigation__list--visible');
-    togglerElement.setAttribute('aria-expanded', 'false');
+    // Untrap focus
+    this.focusTrap.deactivate();
 
@@ -447,18 +477,34 @@ const eventData = { target: heading || href, e };
   /**
+   * Handle keyboard
+   *
    * @param {Event} e
    */
-  handleEsc(e) {
-    if (e.key === 'Escape') {
-      this.handleClickOnLink();
+  handleKeyboard(e) {
+    const element = e.target;
+
+    if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      const prevItem = element.parentElement.previousSibling;
+      if (
+        prevItem &&
+        prevItem.classList.contains('ecl-inpage-navigation__item')
+      ) {
+        const prevLink = queryOne(this.linksSelector, prevItem);
+        if (prevLink) {
+          prevLink.focus();
+        }
+      }
     }
-  }
 
-  /**
-   * @param {Event} e
-   */
-  handleShiftTab(e) {
-    if (e.key === 'Tab' && e.shiftKey) {
-      const links = queryAll(this.linksSelector, this.element);
-      if (Array.isArray(links) && links.length > 0 && e.target === links[0]) {
-        this.handleClickOnLink();
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      const nextItem = element.parentElement.nextSibling;
+      if (
+        nextItem &&
+        nextItem.classList.contains('ecl-inpage-navigation__item')
+      ) {
+        const nextLink = queryOne(this.linksSelector, nextItem);
+        if (nextLink) {
+          nextLink.focus();
+        }
       }
@@ -483,9 +529,10 @@ }
     }
+    if (this.attachKeyListener) {
+      document.removeEventListener('keydown', this.handleKeyboard);
+    }
     this.destroyScrollSpy();
     this.destroySticky();
     this.destroyObserver();
-    document.removeEventListener('keydown', this.handleEsc);
 
     if (this.element) {
-      this.element.removeEventListener('keydown', this.handleShiftTab);
       this.element.removeAttribute('data-ecl-auto-initialized');
@@ -492,0 +539,0 @@ ECL.components.delete(this.element);

package.json

@@ -5,3 +5,3 @@ {
   "license": "EUPL-1.2",
-  "version": "4.2.3",
+  "version": "4.3.0",
   "description": "ECL In-page Navigation",
@@ -13,4 +13,5 @@ "main": "inpage-navigation.js",
   "dependencies": {
-    "@ecl/dom-utils": "4.2.3",
-    "@ecl/vanilla-layout-grid": "4.2.3",
+    "@ecl/dom-utils": "4.3.0",
+    "@ecl/vanilla-layout-grid": "4.3.0",
+    "focus-trap": "7.5.4",
     "gumshoejs": "5.1.2",
@@ -35,3 +36,3 @@ "stickyfilljs": "2.1.0"
   ],
-  "gitHead": "be7888815b5afda8914621ceda6e7e65585f5245"
+  "gitHead": "b7033270655bc121727196148097069ab50e41b6"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

39899

increased by3.04%

Lines of code

473

increased by10%

Worsened metrics

Dependency count

5

increased by25%

Dependency changes

• + Addedfocus-trap@7.5.4

• + Added@ecl/dom-utils@4.3.0(transitive)

• + Added@ecl/vanilla-layout-grid@4.3.0(transitive)

• + Addedfocus-trap@7.5.4(transitive)

• + Addedtabbable@6.2.0(transitive)

• - Removed@ecl/dom-utils@4.2.3(transitive)

• - Removed@ecl/vanilla-layout-grid@4.2.3(transitive)

• Updated@ecl/dom-utils@4.3.0

• Updated@ecl/vanilla-layout-grid@4.3.0