@madgex/design-system 1.62.2 → 1.63.0

package/src/components/accordion/accordion.js

@@ -4,6 +4,7 @@ const accordionTriggerLabelClass = 'mds-accordion-trigger__label';
 const accordionTriggerExpandedClass = 'mds-accordion-trigger--expanded';
 const accordionContentExpandedClass = 'mds-accordion-content--expanded';
 const accordionLabelInverseData = 'data-labelinverse';
+const accordionNonClosingClass = 'mds-accordion-trigger--non-closing';
 
 const accordion = {
   init: () => {
@@ -61,6 +62,7 @@ const accordion = {
     const accordionTriggerId = triggerContainer.id;
     const label = triggerContainer.querySelector('.mds-accordion-trigger__label');
     const labelText = label.innerText;
+    const isNonClosing = accordionTrigger.classList.contains(accordionNonClosingClass);
     const triggerButton = accordion.createButton(accordionTriggerId, triggerContainer);
     triggerContainer.classList.remove('mds-display-none');
     if (accordionContent.nodeName.toLowerCase() !== 'fieldset') {
@@ -70,11 +72,11 @@ const accordion = {
     triggerContainer.appendChild(triggerButton);
 
     if (triggerContainer.dataset.expanded) {
-      accordion.toggleExpand(triggerButton, triggerContainer, accordionContent);
+      accordion.toggleExpand(triggerButton, triggerContainer, accordionContent, isNonClosing);
     }
     triggerButton.addEventListener('click', (elem) => {
       elem.preventDefault();
-      accordion.toggleExpand(triggerButton, triggerContainer, accordionContent);
+      accordion.toggleExpand(triggerButton, triggerContainer, accordionContent, isNonClosing);
     });
   },
   createButton: (accordionTriggerId, element) => {
@@ -103,7 +105,7 @@ const accordion = {
     }
     return element;
   },
-  toggleExpand: (triggerButton, triggerContainer, accordionContent) => {
+  toggleExpand: (triggerButton, triggerContainer, accordionContent, isNonClosing) => {
     const accordionTriggerButton = triggerButton;
     const accordionTriggerButtonLabel = triggerButton.querySelector(`.${accordionTriggerLabelClass}`);
 
@@ -111,7 +113,11 @@ const accordion = {
       accordionTriggerButton.setAttribute('aria-expanded', true);
       triggerContainer.classList.add(accordionTriggerExpandedClass);
       accordionContent.classList.add(accordionContentExpandedClass);
-    } else {
+      if (isNonClosing) {
+        accordionTriggerButton.setAttribute('aria-disabled', true);
+        accordionTriggerButton.classList.add('mds-visually-hidden');
+      }
+    } else if (!isNonClosing) {
       accordionTriggerButton.setAttribute('aria-expanded', false);
       triggerContainer.classList.remove(accordionTriggerExpandedClass);
       accordionContent.classList.remove(accordionContentExpandedClass);

package/src/components/accordion/accordion.njk

@@ -9,6 +9,7 @@
   triggerNoJsHidden: triggerNoJsHidden,
   triggerIsHeader: triggerIsHeader,
   triggerClasses: triggerClasses,
+  triggerIsNonClosing: triggerIsNonClosing,
   hideTriggerLabel: hideTriggerLabel,
   breakpoint: breakpoint,
   content: content,