diff --git a/CHANGELOG.MD b/CHANGELOG.MD index 58aaa7b..37f9e7b 100644 --- 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.8.14] - 2024-06-04 - TMS-1044: Accordion-block changes diff --git a/assets/scripts/accordion.js b/assets/scripts/accordion.js index ff58556..9c988c8 100644 --- 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,6 +103,10 @@ export default class Accordion { openAllDropdowns( mainContainer, openAllButton, closeAllButton ) { const dropdowns = mainContainer.getElementsByClassName( 'accordion__title-button' ); + if ( dropdowns.length === 0 ) { + return; + } + for ( let i = 0; i < dropdowns.length; i++ ) { const containerId = dropdowns[ i ].getAttribute( 'aria-controls' ); const dropDownContent = document.querySelector( `#${ containerId }` ); @@ -143,6 +151,10 @@ export default class Accordion { closeAllDropdowns( mainContainer, closeAllButton, openAllButton ) { const dropdowns = mainContainer.getElementsByClassName( 'accordion__title-button' ); + if ( dropdowns.length === 0 ) { + return; + } + for ( let i = 0; i < dropdowns.length; i++ ) { const containerId = dropdowns[ i ].getAttribute( 'aria-controls' ); const dropDownContent = document.querySelector( `#${ containerId }` ); @@ -188,13 +200,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 +225,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' );