Relax strict HTML structure requirement for accordion groups

package.json

@@ -1,6 +1,6 @@
 {
   "name": "webfactory-accordion",
-  "version": "5.1.1",
+  "version": "5.1.2",
   "description": "A tiny script that progressively enhances static HTML with accessible and keyboard-enabled accordion functionality.",
   "main": "src/main.js",
   "repository": {

src/accordion.js

@@ -133,7 +133,7 @@ class wfaccordionGroup {
             ...options
         };
         this.accordions = Array.from(this.group.querySelectorAll(this.settings.accordionRoot))
-            .filter(root => this.group === root.parentElement)
+            .filter(root => this.group === root.closest(this.settings.accordionGroup))
             .map((root) => {
                 return new wfaccordion(root, options);
             });

tests/basic-integration.test.js

@@ -116,6 +116,19 @@ describe('Simple accordion e2e tests', () => {
         expect(isExpanded(accordion)).toBeTruthy();
     });
 
+    test('Accordion with more complicated markup and additional wrappers can be opened', () => {
+        createAccordionGroup({hasAdditionalWrappers: true});
+
+        wfaccordionsInit();
+
+        const accordion = document.querySelector('.js-accordion');
+        const trigger = accordion.querySelector('.js-accordion__trigger');
+
+        simulateClick(trigger);
+
+        expect(isExpanded(accordion)).toBeTruthy();
+    });
+
     test('Nested accordion expands parent accordion if nested accordion is remotely opened', () => {
         const customOuterId = 'outer-accordion';
         const customInnerId = 'nested-inner-accordion';

tests/mocks/accordion.html.js

@@ -7,6 +7,7 @@
  * @param {string} options.placeholder – e.g. `<button class="js-accordion__trigger">…</button>`
  * @param {string} options.placeholderContent – e.g. `I am <strong>`
  * @param {boolean} options.hasPanel – optional param to simulate an accordion without panel
+ * @param {boolean} options.hasAdditionalWrappers – optional param to simulate more complicated markup
  */
 export function createAccordionGroup(options) {
     // set defaults
@@ -16,7 +17,8 @@ export function createAccordionGroup(options) {
             dataAttr: undefined,
             placeholder: undefined,
             placeholderContent: undefined,
-            hasPanel: true
+            hasPanel: true,
+            hasAdditionalWrappers: false,
         },
         ...options
     }
@@ -25,15 +27,19 @@ export function createAccordionGroup(options) {
     let placeholderInnerHtml = options.placeholderContent ? options.placeholderContent : `Title`;
     let placeholderOuterHtml = options.placeholder ? options.placeholder : `<div class="js-accordion__trigger">${placeholderInnerHtml}</div>`;
     let panel = options.hasPanel ? `<div class="js-accordion__panel">Text</div>` : '';
+    let additionalWrapperOpen = options.hasAdditionalWrappers ? '<div class="some"><div class="wrapper">' : '';
+    let additionalWrapperClose = options.hasAdditionalWrappers ? '</div></div>' : '';
 
     document.body.innerHTML = `
         <div class="js-accordion-group">
+            ${additionalWrapperOpen}
             <div ${htmlId} class="js-accordion" ${htmlDataAttr}>
                 <div class="js-accordion__header">
                     ${placeholderOuterHtml}
                 </div>
                 ${panel}
             </div>
+            ${additionalWrapperClose}
         </div>
       `;
 }