fix: UIG-2490 - vl-side-navigation - terug werkbaar gemaakt in shadow…

… dom

- opnieuw fix toegevoegd die ervoor zorgt dat side-navigation ook werkt binnen een shadow dom
- storybook verbeterd & cypress tests toegevoegd

apps/storybook-e2e/src/e2e/elements/side-navigation/vl-side-navigation.stories.cy.ts

@@ -123,15 +123,16 @@ describe('story vl-side-navigation mobile', () => {
         cy.get('button.vl-button.js-vl-scrollspy__toggle').should('have.attr', 'aria-expanded', 'false');
         cy.get('nav[is="vl-side-navigation"]').should('have.attr', 'data-vl-sticky-dressed', 'true');
         cy.get('nav[is="vl-side-navigation"]').should('not.be.visible');
+        // eslint-disable-next-line cypress/no-unnecessary-waiting
         cy.wait(500); // Het zou niet mogen, maar deze wait maakt de test 100% succesvol terwijl hij anders flaky is.
         cy.get('button.vl-button.js-vl-scrollspy__toggle').click();
         cy.get('nav[is="vl-side-navigation"]').should('be.visible');
     });
 
     it('should be able to switch between mobile & desktop', () => {
+        cy.viewport(320, 480);
         cy.visit(sideNavigationUrl);
 
-        cy.viewport(320, 480);
         cy.get('button.vl-button.js-vl-scrollspy__toggle').should('be.visible');
         cy.get('nav[is="vl-side-navigation"]').should('not.be.visible');
 

apps/storybook-e2e/src/e2e/sections/privacy/vl-privacy.stories.cy.ts

@@ -45,6 +45,24 @@ describe('story vl-privacy', () => {
 
         cy.get('vl-privacy').shadow().find('section').find('span').contains('v24');
     });
+
+    it('should show child links on scroll', () => {
+        cy.visit(privacyUrl);
+
+        const shouldHaveExpandedToggle = (href: string, expanded: boolean) => {
+            cy.get('vl-privacy')
+                .shadow()
+                .find('nav[is="vl-side-navigation"]')
+                .find(`a[is="vl-side-navigation-toggle"][href="${href}"]`)
+                .should('have.attr', 'aria-expanded', `${expanded}`);
+        };
+
+        shouldHaveExpandedToggle('#privacy-declaration', false);
+
+        cy.get('vl-privacy').shadow().find('h2#privacy-declaration').scrollIntoView();
+
+        shouldHaveExpandedToggle('#privacy-declaration', true);
+    });
 });
 
 describe('story vl-privacy - header slot', () => {

libs/elements/src/lib/side-navigation/vl-side-navigation.lib.js

@@ -4,7 +4,7 @@ import ScrollSpy from './vl-side-navigation.scrollspy.lib';
 window.vl = window.vl || {};
 
 // sticky.js - start
-// source code copied from node_modules/@govflanders/vl-ui-side-navigation/src/js/side-navigation.js "version": "14.0.2"
+// source code copied from node_modules/@govflanders/vl-ui-side-navigation/src/js/modules/sticky.js "version": "14.0.2"
 // er zijn echter enkele aanpassingen gebeurd om te kunnen switchen tussen mobile & desktop
 // idealiter importeren we sticky.js als aparte file, maar wegens issues met rollup imports staat deze nu binnen de .lib
 const stiClass = `js-${vl.ns}sticky`,
@@ -417,6 +417,8 @@ class Sticky {
         this.sidebar.addEventListener('update.sticky', this);
 
         /*
+        // UIG-2286 - deze code werd gedeactiveerd omdat ResizeSensor problemen geeft in onze build-setup
+        // in plaats daarvan gebruiken we de native resize-gebeurtenis in het vl-side-navigation.element om de responsiviteit te verwerken
         if (vl.util.exists(ResizeSensor)) {
             new ResizeSensor(this.sidebarInner, this.handleEvent);
         }
@@ -443,8 +445,8 @@ class Sticky {
             offsetLeft;
 
         do {
-            offsetTop = element.offsetTop;
-            offsetLeft = element.offsetLeft;
+            offsetTop = element && element.offsetTop;
+            offsetLeft = element && element.offsetLeft;
 
             if (!isNaN(offsetTop)) {
                 result.top += offsetTop;
@@ -454,7 +456,7 @@ class Sticky {
                 result.left += offsetLeft;
             }
 
-            element = element.tagName === 'body' ? element.parentElement : element.offsetParent;
+            element = element && element.tagName === 'body' ? element.parentElement : element && element.offsetParent;
         } while (element);
 
         return result;
@@ -474,7 +476,7 @@ class Sticky {
 
         // Container of sticky sidebar dimensions.
         dims.containerTop = this._offsetRelative(this.container).top;
-        dims.containerHeight = this.container.clientHeight;
+        dims.containerHeight = this.container && this.container.clientHeight;
         dims.containerBottom = dims.containerTop + dims.containerHeight;
 
         // Sidebar dimensions.
@@ -606,6 +608,8 @@ class Sticky {
 
         // Detach ResizeSensor
         /*
+        // UIG-2286 - deze code werd gedeactiveerd omdat ResizeSensor problemen geeft in onze build-setup
+        // in plaats daarvan gebruiken we de native resize-gebeurtenis in het vl-side-navigation.element om de responsiviteit te verwerken
         if (vl.util.exists(ResizeSensor)) {
             ResizeSensor.detach(this.sidebarInner, this.handleEvent);
         }
@@ -637,15 +641,21 @@ class SideNavigation {
     dress(sideNav) {
         if (sideNav.hasAttribute(snScrollSpyAtt) || vl.util.hasClass(sideNav, snScrollSpyClass)) {
             vl.scrollspy = new ScrollSpy();
-            vl.scrollspy.dressAll();
+            // UIG-2490 - omdat we geen toegang kunnen krijgen tot het element wanneer de schaduwdom er omheen is gewikkeld, moeten we het op deze manier ophalen
+            // vl.scrollspy.dressAll();
+            vl.scrollspy.dress(sideNav);
         }
 
         if (sideNav.hasAttribute(snStickyAtt) || vl.util.hasClass(sideNav, snStickyClass)) {
             vl.sticky = new Sticky();
-            vl.sticky.dressAll();
+            // UIG-2490 - omdat we geen toegang kunnen krijgen tot het element wanneer de schadow dom er omheen is gewikkeld, moeten we het op deze manier ophalen
+            // vl.sticky.dressAll();
+            vl.sticky.dress(sideNav);
         }
 
         /*
+        // UIG-2286 - deze code werd gedeactiveerd omdat ResizeSensor problemen geeft in onze build-setup
+        // in plaats daarvan gebruiken we de native resize-gebeurtenis in het vl-side-navigation.element om de responsiviteit te verwerken
         if (vl.util.exists(ResizeSensor) && vl.util.exists(vl.sticky)) {
             new ResizeSensor(
                 document.querySelectorAll(`[${snScrollSpyContentAtt}]`),

libs/elements/src/lib/side-navigation/vl-side-navigation.scrollspy.lib.js

@@ -1,8 +1,12 @@
+// source code copied from node_modules/@govflanders/vl-ui-side-navigation/src/js/modules/scrollspy.js "version": "14.0.2"
+// de veranderingen zijn gemarkeerd met referentie naar specifiek ticket
+
 /**
  * Scrollspy navigation
  * We assume that in a sticky element items with an anchor link should have a scrollspy functionality
  */
 
+// UIG-2278: vl lijkt niet in alle gevallen defined te zijn, terwijl deze lib daar precies wel op steunt
 window.vl = window.vl || {};
 
 // Private variables
@@ -40,7 +44,8 @@ const _closePopup = (placeholder, button) => {
 
 // Gets an element height
 const _getHeight = (element) => {
-    return Math.max(element.scrollHeight, element.offsetHeight, element.clientHeight);
+    // UIG-2490 - null checks toegevoegd op element (element > element?)
+    return Math.max(element?.scrollHeight, element?.offsetHeight, element?.clientHeight);
 };
 
 const _scrollSpyMobile = (elements, wrapper, contentWrapper) => {
@@ -182,7 +187,9 @@ class ScrollSpy {
     }
 
     _checkScrollSpy(element) {
-        let hasBreadcrumb = document.querySelector(`.${globalHvisibleClass}`),
+        // UIG-2490 - omdat we geen toegang kunnen krijgen tot het element wanneer de schaduwdom er omheen is gewikkeld, moeten we het op deze manier ophalen
+        // let hasBreadcrumb = document.querySelector(`.${globalHvisibleClass}`),
+        let hasBreadcrumb = element.getRootNode().querySelector(`.${globalHvisibleClass}`),
             initialOffset = this.scrollSpyWrapper.getAttribute(stickyOffsetTopAtt) || 75,
             target,
             currentScrollPosition,
@@ -207,7 +214,9 @@ class ScrollSpy {
         }
 
         // Check if global header breadcrumb is shown
-        target = document.querySelector(href);
+        // UIG-2490 - omdat we geen toegang kunnen krijgen tot het element wanneer de schaduwdom er omheen is gewikkeld, moeten we het op deze manier ophalen
+        // target = document.querySelector(href);
+        target = element.getRootNode().querySelector(href);
         currentScrollPosition = document.documentElement.scrollTop || document.body.scrollTop;
 
         bounds = {
@@ -248,13 +257,14 @@ class ScrollSpy {
     _getOffsetTop(element) {
         let location = 0;
 
-        if (element.offsetParent) {
+        // UIG-2490 - null checks toegevoegd op element (element > element?)
+        if (element?.offsetParent) {
             do {
-                location += element.offsetTop;
-                element = element.offsetParent;
+                location += element?.offsetTop;
+                element = element?.offsetParent;
             } while (element);
         } else {
-            location = element.offsetTop;
+            location = element?.offsetTop;
         }
 
         location = location - this.parameters.offset;
@@ -265,10 +275,10 @@ class ScrollSpy {
     dress(wrapper) {
         let id = vl.util.uniqueId(),
             correspondingRegion = wrapper.closest(`.${regionClass}`),
-            scrollSpyContentWrapper = correspondingRegion.querySelector(`[${ssContentAtt}]`);
+            scrollSpyContentWrapper = correspondingRegion && correspondingRegion.querySelector(`[${ssContentAtt}]`);
 
         if (!vl.util.exists(scrollSpyContentWrapper)) {
-            scrollSpyContentWrapper = correspondingRegion.querySelector(`.${ssContentClass}`);
+            scrollSpyContentWrapper = correspondingRegion && correspondingRegion.querySelector(`.${ssContentClass}`);
         }
 
         this.scrollSpyWrapper = wrapper;