Merge pull request #1186 from City-of-Helsinki/UHF-11427_accordion_state

UHF-11427: Fix for the accordion state saving mechanism
City-of-Helsinki · Feb 14, 2025 · 2c80079 · 2c80079
2 parents e8ba06e + 2f9f87c
commit 2c80079
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 5 deletions.
diff --git a/dist/js/accordion.min.js b/dist/js/accordion.min.js
diff --git a/src/js/accordion/accordion-item.js b/src/js/accordion/accordion-item.js
@@ -19,7 +19,7 @@ export default class AccordionItem {
     this.parentCallback = parentCallback;
 
     // Use header id as this objects id since header id is unique.
-    this._id = element.querySelector('.helfi-accordion__header').id;
+    this._id = element.dataset.accordionId;
     this._isOpen = this.localState.loadItemState(this._id);
 
     this.element.style = '--js-accordion-open-time:0s'; // do not animate accordions on pageload

diff --git a/src/js/accordion/accordion.js b/src/js/accordion/accordion.js
@@ -21,9 +21,10 @@ const getAccordionType = (classes) => {
 
 const callback = (mutations, observer) => {
   const items = document.querySelectorAll(`.${HelfiAccordion.accordionWrapper}`);
+
   if (items.length > window.helfiAccordions.length) {
     try {
-        items.forEach((accordionElement, index) => {
+      items.forEach((accordionElement, index) => {
         const type = getAccordionType(Array.from(accordionElement.classList));
         const isHeaderless = HelfiAccordion.isHeaderless(type);
 

diff --git a/templates/component/accordion.twig b/templates/component/accordion.twig
@@ -10,9 +10,10 @@
 
 {% set controlled_content_id = "accordion-item-content--" ~ random() %}
 {% set close_button_labelled_by_id = "accordion-item__button--close--" ~ random() %}
+{% set unique_id = heading[0]['#context']['value']|clean_class|clean_unique_id %}
 
-<div class="accordion__wrapper helfi-accordion-item" data-accordion-id="{{heading[0]['#context']['value']|clean_class}}">
-  <{{ heading_level|default('h2') }} class="accordion-item__header helfi-accordion__header" data-accordion-id="{{heading[0]['#context']['value']|clean_class}}">
+<div class="accordion__wrapper helfi-accordion-item" data-accordion-id="{{unique_id}}">
+  <{{ heading_level|default('h2') }} class="accordion-item__header helfi-accordion__header" data-accordion-id="{{unique_id}}">
     <button type="button" class="accordion-item__button accordion-item__button--toggle helfi-accordion__header__button" aria-expanded="true" aria-controls="{{ controlled_content_id }}">
       {% if heading_icon %}
         <div class="accordion-item__icon">