Fix a bug where disabled accordions (via data-wf-accordion-disabled) still responded to clicks

CHANGELOG.md

@@ -4,6 +4,10 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [5.1.4]
+### Fixed
+- Fixes a bug where disabled accordions (`data-wf-accordion-disabled`) still responded to clicks — an initialization-order bug caused the click/focus listeners to be attached regardless of the disabled state, because `events()` ran before `isDisabled` was assigned.
+
 ## [5.0.0]
 ### Breaking
 - Changes event name to expand an accordion from `wf.accordion.expandedByHash` to more generic `wf.accordion.expand`

package.json

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

src/accordion.js

@@ -39,16 +39,16 @@ class wfaccordion {
         // get a fresh reference after enhancements
         this.trigger = this.root.querySelector(this.settings.accordionTrigger);
 
-        this.events();
-
-        // Prevent duplicated IDs on root and trigger element
-        this.root.removeAttribute('id');
-
         // Get initial state
         this.isDisabled = this.root.hasAttribute('data-wf-accordion-disabled');
         this.isTargetOfUrlHash = this.triggerId === getUrlHash();
         this.isExpandedOnStartup = this.root.hasAttribute('data-wf-accordion-expanded');
 
+        this.events();
+
+        // Prevent duplicated IDs on root and trigger element
+        this.root.removeAttribute('id');
+
         // Create ARIA relationships between headers and panels and set initial state
         this.trigger.setAttribute('id', this.triggerId);
         this.trigger.setAttribute('aria-controls', this.panelId);

tests/basic-integration.test.js

@@ -167,6 +167,19 @@ describe('Simple accordion e2e tests', () => {
         expect(isExpanded(accordion)).toBeTruthy();
     });
 
+    test('Disabled accordion does not respond to clicks', () => {
+        createAccordionGroup({dataAttr: 'data-wf-accordion-disabled'});
+
+        wfaccordionsInit();
+
+        const accordion = document.querySelector('.js-accordion');
+        const trigger = accordion.querySelector('.js-accordion__trigger');
+
+        simulateClick(trigger);
+
+        expect(isCollapsed(accordion)).toBeTruthy();
+    });
+
     test('Accordion can be disabled and have no panel', () => {
         createAccordionGroup({dataAttr: 'data-wf-accordion-disabled', hasPanel: false});