diff --git a/CHANGELOG.md b/CHANGELOG.md index 94e3561..353ff27 100644 --- a/CHANGELOG.md +++ b/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` diff --git a/package.json b/package.json index 3966675..226b7cf 100644 --- a/package.json +++ b/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": { diff --git a/src/accordion.js b/src/accordion.js index 3d1f600..13af68a 100644 --- a/src/accordion.js +++ b/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); diff --git a/tests/basic-integration.test.js b/tests/basic-integration.test.js index 52f3348..1a73d66 100644 --- a/tests/basic-integration.test.js +++ b/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});