decidim-core 0.31.5 → 0.31.7

data/app/packs/src/decidim/controllers/accordion/accordion.test.js

@@ -1,36 +1,44 @@
 /* global jest */
 
 import AccordionController from "src/decidim/controllers/accordion/controller";
+import { screens } from "tailwindcss/defaultTheme"
 
 jest.mock("a11y-accordion-component", () => ({
   render: jest.fn(),
   destroy: jest.fn()
 }));
 
+const createController = (controllerElement) => {
+  const instance = Object.create(AccordionController.prototype);
+  Reflect.defineProperty(instance, "element", {
+    get: () => controllerElement,
+    configurable: true
+  });
+  return instance;
+};
+
 describe("AccordionController", () => {
   let controller = null;
   let accordionElement = null;
   let panel1 = null;
   let panel2 = null;
 
-  const createController = (controllerElement) => {
-    const ControllerClass = AccordionController;
-    const instance = Object.create(ControllerClass.prototype);
-    Reflect.defineProperty(instance, "element", {
-      get: () => controllerElement,
-      configurable: true
+  const mockMatchMedia = (matchesOrPredicate = false) => {
+    window.matchMedia = jest.fn().mockImplementation((query) => {
+      const matches = typeof matchesOrPredicate === "function"
+        ? matchesOrPredicate(query)
+        : matchesOrPredicate;
+      return {
+        matches,
+        media: query,
+        addEventListener: jest.fn(),
+        removeEventListener: jest.fn()
+      };
     });
-    return instance;
   };
 
   beforeEach(() => {
-    window.matchMedia = jest.fn().mockImplementation((query) => ({
-      matches: false,
-      media: query,
-      addListener: jest.fn(),
-      removeListener: jest.fn()
-    }));
-
+    mockMatchMedia(false);
     document.body.innerHTML = `
       <div id="test-accordion" data-controller="accordion">
         <button id="trigger-1" data-controls="panel-1">Trigger 1</button>
@@ -39,11 +47,9 @@ describe("AccordionController", () => {
         <div id="panel-2">Panel 2 Content</div>
       </div>
     `;
-
     accordionElement = document.getElementById("test-accordion");
     panel1 = document.getElementById("panel-1");
     panel2 = document.getElementById("panel-2");
-
     controller = createController(accordionElement);
   });
 
@@ -56,10 +62,8 @@ describe("AccordionController", () => {
     it("changes role from region to group when data-panel-role is group", () => {
       panel1.setAttribute("role", "region");
       panel2.setAttribute("role", "region");
-
       accordionElement.dataset.panelRole = "group";
       controller.fixPanelRole();
-
       expect(panel1.getAttribute("role")).toBe("group");
       expect(panel2.getAttribute("role")).toBe("group");
     });
@@ -67,52 +71,202 @@ describe("AccordionController", () => {
     it("removes role attribute when data-panel-role is none", () => {
       panel1.setAttribute("role", "region");
       panel2.setAttribute("role", "region");
-
       accordionElement.dataset.panelRole = "none";
       controller.fixPanelRole();
-
       expect(panel1.getAttribute("role")).toBeNull();
       expect(panel2.getAttribute("role")).toBeNull();
     });
 
-    it("does nothing when data-panel-role is not set", () => {
-      panel1.setAttribute("role", "region");
-      panel2.setAttribute("role", "region");
-
-      Reflect.deleteProperty(accordionElement.dataset, "panelRole");
-      controller.fixPanelRole();
-
-      expect(panel1.getAttribute("role")).toBe("region");
-      expect(panel2.getAttribute("role")).toBe("region");
-    });
-
-    it("does nothing when data-panel-role is empty", () => {
+    it("does nothing when data-panel-role is not set or empty", () => {
       panel1.setAttribute("role", "region");
-
-      accordionElement.dataset.panelRole = "";
       controller.fixPanelRole();
-
       expect(panel1.getAttribute("role")).toBe("region");
     });
 
     it("sets custom role value when data-panel-role is set", () => {
       panel1.setAttribute("role", "region");
-
       accordionElement.dataset.panelRole = "navigation";
       controller.fixPanelRole();
-
       expect(panel1.getAttribute("role")).toBe("navigation");
     });
 
     it("handles nonexistent panels gracefully", () => {
       accordionElement.dataset.panelRole = "group";
+      const trigger = document.createElement("button");
+      trigger.dataset.controls = "nonexistent-panel";
+      accordionElement.appendChild(trigger);
+      expect(() => controller.fixPanelRole()).not.toThrow();
+    });
+  });
 
-      const nonExistentTrigger = document.createElement("button");
-      nonExistentTrigger.dataset.controls = "nonexistent-panel";
-      accordionElement.appendChild(nonExistentTrigger);
+  describe("_applyBreakpointOpenAttributes", () => {
+    beforeEach(() => {
+      controller.initialize();
+    });
 
-      expect(() => controller.fixPanelRole()).not.toThrow();
+    it("removes data-open when no breakpoint matches and no original exists", () => {
+      accordionElement.innerHTML = `
+        <button data-controls="panel-1" data-open-lg="true">Trigger</button>
+        <div id="panel-1">Panel 1</div>
+      `;
+      controller._applyBreakpointOpenAttributes();
+      expect(accordionElement.querySelector("[data-controls]").hasAttribute("data-open")).toBe(false);
+    });
+
+    it("sets data-open from breakpoint attribute when viewport matches", () => {
+      mockMatchMedia((query) => query === `(min-width: ${screens.lg})`);
+      accordionElement.innerHTML = `
+        <button data-controls="panel-1" data-open-lg="true">Trigger</button>
+        <div id="panel-1">Panel 1</div>
+      `;
+      controller.initialize();
+      controller._applyBreakpointOpenAttributes();
+      expect(accordionElement.querySelector("[data-controls]").getAttribute("data-open")).toBe("true");
+    });
+
+    it("restores original data-open when breakpoint no longer matches", () => {
+      const lgQuery = `(min-width: ${screens.lg})`;
+      accordionElement.innerHTML = `
+        <button data-controls="panel-1" data-open="false" data-open-lg="true">Trigger</button>
+        <div id="panel-1">Panel 1</div>
+      `;
+      const trigger = accordionElement.querySelector("[data-controls]");
+      controller.initialize();
+
+      mockMatchMedia((query) => query === lgQuery);
+      controller._applyBreakpointOpenAttributes();
+      expect(trigger.getAttribute("data-open")).toBe("true");
+
+      mockMatchMedia(() => false);
+      controller._applyBreakpointOpenAttributes();
+      expect(trigger.getAttribute("data-open")).toBe("false");
+    });
+
+    it("removes data-open when breakpoint stops matching and no original existed", () => {
+      const lgQuery = `(min-width: ${screens.lg})`;
+      accordionElement.innerHTML = `
+        <button data-controls="panel-1" data-open-lg="true">Trigger</button>
+        <div id="panel-1">Panel 1</div>
+      `;
+      const trigger = accordionElement.querySelector("[data-controls]");
+      controller.initialize();
+
+      mockMatchMedia((query) => query === lgQuery);
+      controller._applyBreakpointOpenAttributes();
+      expect(trigger.getAttribute("data-open")).toBe("true");
+
+      mockMatchMedia(() => false);
+      controller._applyBreakpointOpenAttributes();
+      expect(trigger.hasAttribute("data-open")).toBe(false);
+    });
+
+    it("applies the last matching breakpoint when multiple match", () => {
+      mockMatchMedia((query) =>
+        query === `(min-width: ${screens.sm})` || query === `(min-width: ${screens.lg})`
+      );
+      accordionElement.innerHTML = `
+        <button data-controls="panel-1" data-open-sm="false" data-open-lg="true">Trigger</button>
+        <div id="panel-1">Panel 1</div>
+      `;
+      controller.initialize();
+      controller._applyBreakpointOpenAttributes();
+      expect(accordionElement.querySelector("[data-controls]").getAttribute("data-open")).toBe("true");
+    });
+
+    it("leaves triggers without breakpoint attributes unchanged", () => {
+      controller.initialize();
+      controller._applyBreakpointOpenAttributes();
+      expect(accordionElement.querySelector("#trigger-1").hasAttribute("data-open")).toBe(false);
+      expect(accordionElement.querySelector("#trigger-2").hasAttribute("data-open")).toBe(false);
     });
   });
-});
 
+  describe("_listenForBreakpointChanges", () => {
+    beforeEach(() => {
+      controller.initialize();
+    });
+
+    it("registers change listeners for breakpoints with matching triggers", () => {
+      accordionElement.innerHTML = `
+        <button data-controls="panel-1" data-open-lg="true">Trigger</button>
+        <div id="panel-1">Panel 1</div>
+      `;
+      controller._listenForBreakpointChanges();
+      expect(window.matchMedia).toHaveBeenCalledWith(`(min-width: ${screens.lg})`);
+      expect(window.matchMedia.mock.results[0].value.addEventListener).toHaveBeenCalledWith("change", expect.any(Function));
+    });
+
+    it("skips breakpoints without matching triggers", () => {
+      accordionElement.innerHTML = `
+        <button data-controls="panel-1" data-open-lg="true">Trigger</button>
+        <div id="panel-1">Panel 1</div>
+      `;
+      controller._listenForBreakpointChanges();
+      expect(window.matchMedia).toHaveBeenCalledTimes(1);
+    });
+
+    it("registers nothing when there are no breakpoint triggers", () => {
+      controller._listenForBreakpointChanges();
+      expect(controller._mediaQueries.length).toBe(0);
+    });
+
+    it("registers listeners for multiple breakpoints", () => {
+      accordionElement.innerHTML = `
+        <button data-controls="panel-1" data-open-sm="true" data-open-lg="false">Trigger</button>
+        <div id="panel-1">Panel 1</div>
+      `;
+      controller._listenForBreakpointChanges();
+      expect(window.matchMedia).toHaveBeenCalledWith(`(min-width: ${screens.sm})`);
+      expect(window.matchMedia).toHaveBeenCalledWith(`(min-width: ${screens.lg})`);
+      expect(controller._mediaQueries.length).toBe(2);
+    });
+  });
+
+  describe("_stopListeningForBreakpointChanges", () => {
+    beforeEach(() => {
+      controller.initialize();
+    });
+
+    it("removes all registered change listeners", () => {
+      accordionElement.innerHTML = `
+        <button data-controls="panel-1" data-open-lg="true">Trigger</button>
+        <div id="panel-1">Panel 1</div>
+      `;
+      controller._listenForBreakpointChanges();
+      const mql = window.matchMedia.mock.results[0].value;
+      controller._stopListeningForBreakpointChanges();
+      expect(mql.removeEventListener).toHaveBeenCalledWith("change", expect.any(Function));
+      expect(controller._mediaQueries.length).toBe(0);
+    });
+
+    it("does nothing when no listeners exist", () => {
+      expect(() => controller._stopListeningForBreakpointChanges()).not.toThrow();
+    });
+  });
+
+  describe("connect/disconnect/reconnect with breakpoints", () => {
+    beforeEach(() => {
+      controller.initialize();
+    });
+
+    it("connect applies breakpoint attributes and sets up listeners", () => {
+      const applySpy = jest.spyOn(controller, "_applyBreakpointOpenAttributes");
+      const listenSpy = jest.spyOn(controller, "_listenForBreakpointChanges");
+      controller.connect();
+      expect(applySpy).toHaveBeenCalled();
+      expect(listenSpy).toHaveBeenCalled();
+    });
+
+    it("disconnect tears down breakpoint listeners", () => {
+      const spy = jest.spyOn(controller, "_stopListeningForBreakpointChanges");
+      controller.disconnect();
+      expect(spy).toHaveBeenCalled();
+    });
+
+    it("reconnect re-evaluates breakpoint attributes", () => {
+      const spy = jest.spyOn(controller, "_applyBreakpointOpenAttributes");
+      controller.reconnect({});
+      expect(spy).toHaveBeenCalled();
+    });
+  });
+});

data/app/packs/src/decidim/controllers/accordion/controller.js

@@ -2,6 +2,9 @@ import { Controller } from "@hotwired/stimulus"
 import Accordions from "a11y-accordion-component";
 import { screens } from "tailwindcss/defaultTheme"
 export default class extends Controller {
+  initialize() {
+    this._originalOpenValues = new WeakMap();
+  }
 
   /**
    * Create accordion from a component
@@ -16,21 +19,8 @@ export default class extends Controller {
     accordionOptions.isMultiSelectable = this.element.dataset.multiselectable !== "false";
     accordionOptions.isCollapsible = this.element.dataset.collapsible !== "false";
 
-    // This snippet allows to change the OPEN data-attribute based on the current viewport
-    // Just include the breakpoint where the different value will be applied from.
-    // Ex:
-    // data-open="false" data-open-md="true"
-    Object.keys(screens).forEach((key) => {
-      if (!this.isScreenSize(key)) {
-        return;
-      }
-
-      const elementsToOpen = this.element.querySelectorAll(`[data-controls][data-open-${key}]`);
-
-      elementsToOpen.forEach((elem) => {
-        (elem.dataset.open = elem.dataset[`open-${key}`.replace(/-([a-z])/g, (str) => str[1].toUpperCase())])
-      })
-    })
+    this._applyBreakpointOpenAttributes();
+    this._listenForBreakpointChanges();
 
     if (!this.element.id) {
       // when component has no id, we enforce to have it one
@@ -59,20 +49,106 @@ export default class extends Controller {
     }
 
     if (this.boundExpand) {
-      this.toggleButton.addEventListener("click", this.boundExpand);
+      this.toggleButton.removeEventListener("click", this.boundExpand);
     }
+
+    this._stopListeningForBreakpointChanges();
   }
 
   reconnect(event) {
     this.disconnect();
 
-    if (event.detail && event.detail.collapse) {
+    if (event && event.detail && event.detail.collapse) {
       this.previouslyExpanded = false;
     }
 
     this.connect();
   }
 
+  /**
+   * Applies viewport-conditional data-open attributes and resets
+   * previously applied values when the viewport no longer matches.
+   *
+   * @returns {void}
+   */
+  _applyBreakpointOpenAttributes() {
+    const controlledTriggers = new Set();
+
+    Object.keys(screens).forEach((key) => {
+      this.element.querySelectorAll(`[data-controls][data-open-${key}]`).forEach((elem) => {
+        controlledTriggers.add(elem);
+
+        if (!this._originalOpenValues.has(elem)) {
+          this._originalOpenValues.set(elem, elem.getAttribute("data-open"));
+        }
+      });
+    });
+
+    // Reset all controlled triggers to their original data-open state
+    controlledTriggers.forEach((elem) => {
+      const original = this._originalOpenValues.get(elem);
+      if (original === null) {
+        elem.removeAttribute("data-open");
+      } else {
+        elem.setAttribute("data-open", original);
+      }
+    });
+
+    // Apply breakpoint-specific values for the current viewport
+    Object.keys(screens).forEach((key) => {
+      if (!this.isScreenSize(key)) {
+        return;
+      }
+
+      this.element.querySelectorAll(`[data-controls][data-open-${key}]`).forEach((elem) => {
+        elem.dataset.open = elem.getAttribute(`data-open-${key}`);
+      });
+    });
+  }
+
+  /**
+   * Listens for viewport changes that cross breakpoints relevant
+   * to this accordion and reconnects to keep state in sync.
+   *
+   * @returns {void}
+   */
+  _listenForBreakpointChanges() {
+    this._mediaQueries = [];
+
+    Object.keys(screens).forEach((key) => {
+      const hasRelevantTriggers = this.element.querySelector(`[data-controls][data-open-${key}]`);
+      if (!hasRelevantTriggers) {
+        return;
+      }
+
+      const mql = window.matchMedia(`(min-width: ${screens[key]})`);
+      const handler = () => {
+        this.reconnect({ detail: { collapse: true } });
+      };
+
+      if (mql.addEventListener) {
+        mql.addEventListener("change", handler);
+      } else if (mql.addListener) {
+        mql.addListener(handler);
+      }
+
+      this._mediaQueries.push({ mql, handler });
+    });
+  }
+
+  _stopListeningForBreakpointChanges() {
+    if (this._mediaQueries) {
+      this._mediaQueries.forEach(({ mql, handler }) => {
+        if (mql.removeEventListener) {
+          mql.removeEventListener("change", handler);
+        } else if (mql.removeListener) {
+          mql.removeListener(handler);
+        }
+      });
+      this._mediaQueries = [];
+    }
+  }
+
   expandIfNeeded()
   {
     if (!this.toggleButton) {

data/app/packs/src/decidim/controllers/dropdown/controller.js

@@ -47,6 +47,12 @@ export default class extends Controller {
       this.element.id = `dropdown-${Math.random().toString(36).substring(7)}`
     }
 
+    if (!this.element.hasAttribute("aria-expanded")) {
+      this.element.setAttribute("aria-expanded", dropdownOptions.isOpen
+        ? "true"
+        : "false");
+    }
+
     const autofocus = this.element.dataset.autofocus;
     if (autofocus) {
       // set the focus to some inner element, use setTimeout hack due to waiting for element to display

data/app/packs/src/decidim/controllers/dropdown/dropdown.test.js

@@ -142,6 +142,34 @@ describe("DropdownController", () => {
     });
   });
 
+  describe("aria-expanded initialization", () => {
+    it("sets aria-expanded to false when missing and isOpen is false", () => {
+      const testController = createController(element);
+
+      testController.connect();
+
+      expect(element.getAttribute("aria-expanded")).toBe("false");
+    });
+
+    it("sets aria-expanded to true when missing and data-open is true", () => {
+      element.setAttribute("data-open", "true");
+      const testController = createController(element);
+
+      testController.connect();
+
+      expect(element.getAttribute("aria-expanded")).toBe("true");
+    });
+
+    it("does not override existing aria-expanded attribute", () => {
+      element.setAttribute("aria-expanded", "true");
+      const testController = createController(element);
+
+      testController.connect();
+
+      expect(element.getAttribute("aria-expanded")).toBe("true");
+    });
+  });
+
   describe("data-add-aria-roles option", () => {
     it("keeps role menu when data-add-aria-roles is true", () => {
       element.setAttribute("data-add-aria-roles", "true");

data/app/packs/src/decidim/controllers/form_validator/form_validator.js

@@ -419,13 +419,13 @@ class FormValidator {
       return true;
     }
 
-    checkboxGroup.forEach((checkboxElement) => {
-      if (isValid) {
-        this.removeInputErrorClasses(checkboxElement);
-      } else {
+    if (isValid) {
+      this.removeCheckboxGroupErrorClasses(groupName);
+    } else {
+      checkboxGroup.forEach((checkboxElement) => {
         this.addInputErrorClasses(checkboxElement, ["required"]);
-      }
-    });
+      });
+    }
 
     return isValid;
   }

data/app/packs/src/decidim/controllers/form_validator/form_validator.test.js

@@ -1,4 +1,4 @@
-/* eslint max-lines: ["error", 690] */
+/* eslint max-lines: ["error", 712] */
 /* global jest */
 /**
  * @jest-environment jsdom
@@ -253,6 +253,28 @@ describe("FormValidator", () => {
       const isValidTwo = validatorInstance.validateCheckboxGroup("multiCheckboxes");
       expect(isValidTwo).toBe(true);
     });
+
+    it("should remove error classes once for the group, not per checkbox", () => {
+      formElement.innerHTML = `
+        <fieldset>
+          <input type="checkbox" id="cb-1" name="largeGroup" value="1" required>
+          <input type="checkbox" id="cb-2" name="largeGroup" value="2" required>
+          <input type="checkbox" id="cb-3" name="largeGroup" value="3" required>
+        </fieldset>
+        <button type="submit">Submit</button>
+      `;
+      validatorInstance = new FormValidator(formElement);
+      formElement.querySelector("#cb-1").checked = true;
+
+      const removeGroupSpy = jest.spyOn(validatorInstance, "removeCheckboxGroupErrorClasses");
+      const removeInputSpy = jest.spyOn(validatorInstance, "removeInputErrorClasses");
+
+      const isValid = validatorInstance.validateCheckboxGroup("largeGroup");
+
+      expect(isValid).toBe(true);
+      expect(removeGroupSpy).toHaveBeenCalledTimes(1);
+      expect(removeInputSpy).not.toHaveBeenCalled();
+    });
   });
 
   describe("Custom Validators", () => {