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

Comparing version 4.3.0 to 4.4.0

inpage-navigation.js

@@ -96,2 +96,4 @@ import Stickyfill from 'stickyfilljs';
     this.isExpanded = false;
+    this.toggleElement = null;
+    this.navLinks = null;
 
@@ -323,4 +325,4 @@ // Bind `this` for use in callbacks
 
-    const toggleElement = queryOne(this.toggleSelector, this.element);
-    const navLinks = queryAll(this.linksSelector, this.element);
+    this.toggleElement = queryOne(this.toggleSelector, this.element);
+    this.navLinks = queryAll(this.linksSelector, this.element);
 
@@ -337,11 +339,11 @@ this.initSticky(this.element);
 
-    if (this.attachClickListener && toggleElement) {
-      toggleElement.addEventListener('click', this.handleClickOnToggler);
+    if (this.attachClickListener && this.toggleElement) {
+      this.toggleElement.addEventListener('click', this.handleClickOnToggler);
     }
-    if (this.attachClickListener && navLinks) {
-      navLinks.forEach((link) =>
+    if (this.attachClickListener && this.navLinks) {
+      this.navLinks.forEach((link) =>
         link.addEventListener('click', this.handleClickOnLink),
       );
       this.element.addEventListener('keydown', this.handleShiftTab);
-      toggleElement.addEventListener('click', this.handleClickOnToggler);
+      this.toggleElement.addEventListener('click', this.handleClickOnToggler);
     }
@@ -419,23 +421,29 @@
   handleClickOnToggler(e) {
-    const togglerElement = queryOne(this.toggleSelector, this.element);
-
     e.preventDefault();
 
-    // Get current status
-    this.isExpanded = togglerElement.getAttribute('aria-expanded') === 'true';
+    if (this.toggleElement) {
+      // Get current status
+      this.isExpanded =
+        this.toggleElement.getAttribute('aria-expanded') === 'true';
 
-    // Toggle the expandable/collapsible
-    togglerElement.setAttribute(
-      'aria-expanded',
-      this.isExpanded ? 'false' : 'true',
-    );
-    if (this.isExpanded) {
-      // Untrap focus
-      this.focusTrap.deactivate();
-    } else {
-      // Trap focus
-      this.focusTrap.activate();
+      // Toggle the expandable/collapsible
+      this.toggleElement.setAttribute(
+        'aria-expanded',
+        this.isExpanded ? 'false' : 'true',
+      );
+      if (this.isExpanded) {
+        // Untrap focus
+        this.focusTrap.deactivate();
+      } else {
+        // Trap focus
+        this.focusTrap.activate();
+
+        // Focus first item
+        if (this.navLinks && this.navLinks.length > 0) {
+          this.navLinks[0].focus();
+        }
+      }
+
+      this.trigger('onToggle', { isExpanded: this.isExpanded });
     }
-
-    this.trigger('onToggle', { isExpanded: this.isExpanded });
   }
@@ -477,10 +485,14 @@
       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();
+      if (element === this.navLinks[0]) {
+        this.handleClickOnToggler(e);
+      } else {
+        const prevItem = element.parentElement.previousSibling;
+        if (
+          prevItem &&
+          prevItem.classList.contains('ecl-inpage-navigation__item')
+        ) {
+          const prevLink = queryOne(this.linksSelector, prevItem);
+          if (prevLink) {
+            prevLink.focus();
+          }
         }
@@ -492,10 +504,14 @@ }
       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();
+      if (element === this.toggleElement) {
+        this.handleClickOnToggler(e);
+      } else {
+        const nextItem = element.parentElement.nextSibling;
+        if (
+          nextItem &&
+          nextItem.classList.contains('ecl-inpage-navigation__item')
+        ) {
+          const nextLink = queryOne(this.linksSelector, nextItem);
+          if (nextLink) {
+            nextLink.focus();
+          }
         }
@@ -502,0 +518,0 @@ }

package.json

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

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

40368

increased by1.18%

Lines of code

489

increased by3.38%

Dependency changes

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

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

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

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

• Updated@ecl/dom-utils@4.4.0

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