@ons/design-system 72.9.1 → 72.9.2

package/components/table-of-contents/_macro.spec.js

@@ -69,6 +69,7 @@ const EXAMPLE_TABLE_OF_CONTENTS_RELATED_LINKS_BUTTON = {
     ],
     relatedLinks: {
         title: 'Related publications',
+        ariaLabel: 'Related publications',
         itemsList: [
             {
                 url: '#0',
@@ -209,6 +210,12 @@ describe('macro: table-of-contents', () => {
             expect($('.ons-table-of-contents__related-links h2').text().trim()).toBe('Related publications');
         });
 
+        it('renders related links section with correct aria-label', () => {
+            const $ = cheerio.load(renderComponent('table-of-contents', EXAMPLE_TABLE_OF_CONTENTS_RELATED_LINKS_BUTTON));
+
+            expect($('.ons-table-of-contents__related-links').attr('aria-label')).toBe('Related publications');
+        });
+
         it('outputs `lists` component for related links with expected parameters', () => {
             const faker = templateFaker();
             const listsSpy = faker.spy('list');

package/components/table-of-contents/table-of-contents.js

@@ -1,39 +1,56 @@
 export default class TableOfContents {
     constructor(component) {
         this.component = component;
-        this.sections = [...this.component.querySelectorAll('section[id]')];
-        this.refreshIntervalId = setInterval(() => this.setCurrent(), 100);
-        this.setCurrent();
-    }
+        this.sections = [...this.component.querySelectorAll('section[id]')].filter((section) => section.id);
+        this.tocLinks = {};
+        this.activeSection = null;
 
-    setCurrent() {
-        let activeSection = this.sections[0];
-        for (let section of this.sections) {
-            const top = section.getBoundingClientRect().top;
-            if (top > 100) {
-                break;
+        this.sections.forEach((section) => {
+            const link = this.component.querySelector(`.ons-list__link[href="#${section.id}"]`);
+            if (link) {
+                this.tocLinks[section.id] = link;
             }
+        });
 
-            activeSection = section;
+        this.observer = new IntersectionObserver(this.handleIntersect.bind(this), {
+            rootMargin: '0px 0px -100% 0px', // trigger when top of section is at the top of viewport
+        });
 
-            if (top >= 0 && top <= 100) {
-                break;
-            }
-        }
+        this.sections.forEach((section) => this.observer.observe(section));
 
-        if (activeSection === this.activeSection) {
-            return;
-        }
+        this.setInitialActiveSection();
+    }
 
-        this.activeSection = activeSection;
+    setInitialActiveSection() {
+        const firstSection = this.sections[0];
+        if (!firstSection) return;
 
-        for (let section of this.sections) {
-            const tocItem = document.querySelector(`.ons-table-of-contents .ons-list__link[href="#${section.id}"]`);
-            if (section === activeSection) {
-                tocItem.classList.add('ons-table-of-contents__link-active');
-            } else {
-                tocItem.classList.remove('ons-table-of-contents__link-active');
-            }
+        this.activeSection = firstSection;
+        this.updateTocLinks();
+    }
+
+    handleIntersect(entries) {
+        // Find the topmost visible section
+        const visibleSections = entries
+            .filter((entry) => entry.isIntersecting)
+            .sort((a, b) => a.target.getBoundingClientRect().top - b.target.getBoundingClientRect().top);
+
+        if (visibleSections.length === 0) return;
+
+        const newActive = visibleSections[0].target;
+
+        if (newActive === this.activeSection) return;
+
+        this.activeSection = newActive;
+        this.updateTocLinks();
+    }
+
+    updateTocLinks() {
+        for (const section of this.sections) {
+            const link = this.tocLinks[section.id];
+
+            // toggle active link class when link id matches current section id
+            link?.classList.toggle('ons-table-of-contents__link-active', section === this.activeSection);
         }
     }
 }