TMS-1050: Accordion script fixes

devgeniem · Jun 9, 2024 · 29c1004 · 29c1004
1 parent 7763992
commit 29c1004
Show file tree

Hide file tree

Showing 2 changed files with 87 additions and 69 deletions.
diff --git a/CHANGELOG.MD b/CHANGELOG.MD
@@ -7,6 +7,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+- TMS-1050: Add if-statements into accordion script to prevent breaking other elements functionality
+
 ## [1.55.0] - 2024-06-04
 
 - TMS-1044: Accordion-block changes

diff --git a/assets/scripts/accordion.js b/assets/scripts/accordion.js
@@ -51,23 +51,27 @@ export default class Accordion {
 
         if ( this.mainContainer ) {
             for ( let i = 0; i < this.mainContainer.length; i++ ) {
-                this.openAllButton[ i ].addEventListener(
-                    'click',
-                    () => this.openAllDropdowns(
-                        this.mainContainer[ i ],
-                        this.openAllButton[ i ],
-                        this.closeAllButton[ i ]
-                    )
-                );
+                if ( this.openAllButton[ i ] ) {
+                    this.openAllButton[ i ].addEventListener(
+                        'click',
+                        () => this.openAllDropdowns(
+                            this.mainContainer[ i ],
+                            this.openAllButton[ i ],
+                            this.closeAllButton[ i ]
+                        )
+                    );
+                }
 
-                this.closeAllButton[ i ].addEventListener(
-                    'click',
-                    () => this.closeAllDropdowns(
-                        this.mainContainer[ i ],
-                        this.closeAllButton[ i ],
-                        this.openAllButton[ i ]
-                    )
-                );
+                if ( this.closeAllButton[ i ] ) {
+                    this.closeAllButton[ i ].addEventListener(
+                        'click',
+                        () => this.closeAllDropdowns(
+                            this.mainContainer[ i ],
+                            this.closeAllButton[ i ],
+                            this.openAllButton[ i ]
+                        )
+                    );
+                }
 
                 if ( this.dropdownTogglers ) {
                     const togglers = this.mainContainer[ i ].getElementsByClassName( 'accordion__title-button' );
@@ -99,36 +103,38 @@ export default class Accordion {
     openAllDropdowns( mainContainer, openAllButton, closeAllButton ) {
         const dropdowns = mainContainer.getElementsByClassName( 'accordion__title-button' );
 
-        for ( let i = 0; i < dropdowns.length; i++ ) {
-            const containerId = dropdowns[ i ].getAttribute( 'aria-controls' );
-            const dropDownContent = document.querySelector( `#${ containerId }` );
-            const textOpen = dropdowns[ i ].querySelector( '.icon-text--open' );
-            const textClose = dropdowns[ i ].querySelector( '.icon-text--close' );
-
-            textOpen.setAttribute( 'aria-hidden', 'true' );
-            textClose.setAttribute( 'aria-hidden', 'false' );
-            dropdowns[ i ].setAttribute( 'aria-expanded', 'true' );
-            if ( ! dropdowns[ i ].classList.contains( 'active-accordion' ) ) {
-                dropdowns[ i ].classList.add( 'active-accordion' );
-            }
+        if ( dropdowns.length >= 1 ) {
+            for ( let i = 0; i < dropdowns.length; i++ ) {
+                const containerId = dropdowns[ i ].getAttribute( 'aria-controls' );
+                const dropDownContent = document.querySelector( `#${ containerId }` );
+                const textOpen = dropdowns[ i ].querySelector( '.icon-text--open' );
+                const textClose = dropdowns[ i ].querySelector( '.icon-text--close' );
+
+                textOpen.setAttribute( 'aria-hidden', 'true' );
+                textClose.setAttribute( 'aria-hidden', 'false' );
+                dropdowns[ i ].setAttribute( 'aria-expanded', 'true' );
+                if ( ! dropdowns[ i ].classList.contains( 'active-accordion' ) ) {
+                    dropdowns[ i ].classList.add( 'active-accordion' );
+                }
 
-            dropDownContent.classList.remove( 'is-hidden' );
+                dropDownContent.classList.remove( 'is-hidden' );
 
-            if ( ! dropdowns[ i ].classList.contains( 'is-hidden' )
-            && ! dropdowns[ i ].classList.contains( 'accordion--table-initialized' ) ) {
+                if ( ! dropdowns[ i ].classList.contains( 'is-hidden' )
+                && ! dropdowns[ i ].classList.contains( 'accordion--table-initialized' ) ) {
 
-                const accordionTables = dropDownContent.getElementsByTagName( 'table' );
+                    const accordionTables = dropDownContent.getElementsByTagName( 'table' );
 
-                if ( accordionTables.length > 0 ) {
-                    new Indicate( accordionTables, { arrows: true } );
+                    if ( accordionTables.length > 0 ) {
+                        new Indicate( accordionTables, { arrows: true } );
 
-                    dropdowns[ i ].classList.add( 'accordion--table-initialized' );
+                        dropdowns[ i ].classList.add( 'accordion--table-initialized' );
+                    }
                 }
             }
-        }
 
-        closeAllButton.classList.remove( 'is-hidden' );
-        openAllButton.classList.add( 'is-hidden' );
+            closeAllButton.classList.remove( 'is-hidden' );
+            openAllButton.classList.add( 'is-hidden' );
+        }
     }
 
     /**
@@ -143,36 +149,38 @@ export default class Accordion {
     closeAllDropdowns( mainContainer, closeAllButton, openAllButton ) {
         const dropdowns = mainContainer.getElementsByClassName( 'accordion__title-button' );
 
-        for ( let i = 0; i < dropdowns.length; i++ ) {
-            const containerId = dropdowns[ i ].getAttribute( 'aria-controls' );
-            const dropDownContent = document.querySelector( `#${ containerId }` );
-            const textOpen = dropdowns[ i ].querySelector( '.icon-text--open' );
-            const textClose = dropdowns[ i ].querySelector( '.icon-text--close' );
-
-            textOpen.setAttribute( 'aria-hidden', 'false' );
-            textClose.setAttribute( 'aria-hidden', 'true' );
-            dropdowns[ i ].setAttribute( 'aria-expanded', 'false' );
-            if ( dropdowns[ i ].classList.contains( 'active-accordion' ) ) {
-                dropdowns[ i ].classList.remove( 'active-accordion' );
-            }
+        if ( dropdowns.length >= 1 ) {
+            for ( let i = 0; i < dropdowns.length; i++ ) {
+                const containerId = dropdowns[ i ].getAttribute( 'aria-controls' );
+                const dropDownContent = document.querySelector( `#${ containerId }` );
+                const textOpen = dropdowns[ i ].querySelector( '.icon-text--open' );
+                const textClose = dropdowns[ i ].querySelector( '.icon-text--close' );
+
+                textOpen.setAttribute( 'aria-hidden', 'false' );
+                textClose.setAttribute( 'aria-hidden', 'true' );
+                dropdowns[ i ].setAttribute( 'aria-expanded', 'false' );
+                if ( dropdowns[ i ].classList.contains( 'active-accordion' ) ) {
+                    dropdowns[ i ].classList.remove( 'active-accordion' );
+                }
 
-            dropDownContent.classList.add( 'is-hidden' );
+                dropDownContent.classList.add( 'is-hidden' );
 
-            if ( dropdowns[ i ].classList.contains( 'is-hidden' )
-            && dropdowns[ i ].classList.contains( 'accordion--table-initialized' ) ) {
+                if ( dropdowns[ i ].classList.contains( 'is-hidden' )
+                && dropdowns[ i ].classList.contains( 'accordion--table-initialized' ) ) {
 
-                const accordionTables = dropDownContent.getElementsByTagName( 'table' );
+                    const accordionTables = dropDownContent.getElementsByTagName( 'table' );
 
-                if ( accordionTables.length > 0 ) {
-                    new Indicate( accordionTables, { arrows: true } );
+                    if ( accordionTables.length > 0 ) {
+                        new Indicate( accordionTables, { arrows: true } );
 
-                    dropdowns[ i ].classList.remove( 'accordion--table-initialized' );
+                        dropdowns[ i ].classList.remove( 'accordion--table-initialized' );
+                    }
                 }
             }
-        }
 
-        openAllButton.classList.remove( 'is-hidden' );
-        closeAllButton.classList.add( 'is-hidden' );
+            openAllButton.classList.remove( 'is-hidden' );
+            closeAllButton.classList.add( 'is-hidden' );
+        }
     }
 
     /**
@@ -188,13 +196,15 @@ export default class Accordion {
         const dropdowns = mainContainer.getElementsByClassName( 'accordion__title-button' );
         const openDropdowns = mainContainer.getElementsByClassName( 'active-accordion' );
 
-        if ( openDropdowns.length === dropdowns.length ) {
-            closeAllButton.classList.remove( 'is-hidden' );
-            openAllButton.classList.add( 'is-hidden' );
-        }
-        else {
-            openAllButton.classList.remove( 'is-hidden' );
-            closeAllButton.classList.add( 'is-hidden' );
+        if ( openAllButton && closeAllButton ) {
+            if ( openDropdowns.length === dropdowns.length ) {
+                closeAllButton.classList.remove( 'is-hidden' );
+                openAllButton.classList.add( 'is-hidden' );
+            }
+            else {
+                openAllButton.classList.remove( 'is-hidden' );
+                closeAllButton.classList.add( 'is-hidden' );
+            }
         }
     }
 
@@ -211,8 +221,14 @@ export default class Accordion {
         const textOpen = clickedToggler.querySelector( '.icon-text--open' );
         const textClose = clickedToggler.querySelector( '.icon-text--close' );
 
-        this.toggleAriaHidden( textOpen );
-        this.toggleAriaHidden( textClose );
+        if ( textOpen ) {
+            this.toggleAriaHidden( textOpen );
+        }
+
+        if ( textClose ) {
+            this.toggleAriaHidden( textClose );
+        }
+
         this.toggleAriaExpanded( clickedToggler );
         dropDownContent.classList.toggle( 'is-hidden' );