decidim-core 0.31.7 → 0.32.0.rc1

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

@@ -1,44 +1,36 @@
 /* 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 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()
-      };
+  const createController = (controllerElement) => {
+    const ControllerClass = AccordionController;
+    const instance = Object.create(ControllerClass.prototype);
+    Reflect.defineProperty(instance, "element", {
+      get: () => controllerElement,
+      configurable: true
     });
+    return instance;
   };
 
   beforeEach(() => {
-    mockMatchMedia(false);
+    window.matchMedia = jest.fn().mockImplementation((query) => ({
+      matches: false,
+      media: query,
+      addListener: jest.fn(),
+      removeListener: jest.fn()
+    }));
+
     document.body.innerHTML = `
       <div id="test-accordion" data-controller="accordion">
         <button id="trigger-1" data-controls="panel-1">Trigger 1</button>
@@ -47,9 +39,11 @@ 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);
   });
 
@@ -62,8 +56,10 @@ 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");
     });
@@ -71,202 +67,52 @@ 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 or empty", () => {
+    it("does nothing when data-panel-role is not set", () => {
       panel1.setAttribute("role", "region");
-      controller.fixPanelRole();
-      expect(panel1.getAttribute("role")).toBe("region");
-    });
+      panel2.setAttribute("role", "region");
 
-    it("sets custom role value when data-panel-role is set", () => {
-      panel1.setAttribute("role", "region");
-      accordionElement.dataset.panelRole = "navigation";
+      Reflect.deleteProperty(accordionElement.dataset, "panelRole");
       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();
-    });
-  });
-
-  describe("_applyBreakpointOpenAttributes", () => {
-    beforeEach(() => {
-      controller.initialize();
-    });
-
-    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);
+      expect(panel1.getAttribute("role")).toBe("region");
+      expect(panel2.getAttribute("role")).toBe("region");
     });
 
-    it("registers nothing when there are no breakpoint triggers", () => {
-      controller._listenForBreakpointChanges();
-      expect(controller._mediaQueries.length).toBe(0);
-    });
+    it("does nothing when data-panel-role is empty", () => {
+      panel1.setAttribute("role", "region");
 
-    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);
-    });
-  });
+      accordionElement.dataset.panelRole = "";
+      controller.fixPanelRole();
 
-  describe("_stopListeningForBreakpointChanges", () => {
-    beforeEach(() => {
-      controller.initialize();
+      expect(panel1.getAttribute("role")).toBe("region");
     });
 
-    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("sets custom role value when data-panel-role is set", () => {
+      panel1.setAttribute("role", "region");
 
-    it("does nothing when no listeners exist", () => {
-      expect(() => controller._stopListeningForBreakpointChanges()).not.toThrow();
-    });
-  });
+      accordionElement.dataset.panelRole = "navigation";
+      controller.fixPanelRole();
 
-  describe("connect/disconnect/reconnect with breakpoints", () => {
-    beforeEach(() => {
-      controller.initialize();
+      expect(panel1.getAttribute("role")).toBe("navigation");
     });
 
-    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("handles nonexistent panels gracefully", () => {
+      accordionElement.dataset.panelRole = "group";
 
-    it("disconnect tears down breakpoint listeners", () => {
-      const spy = jest.spyOn(controller, "_stopListeningForBreakpointChanges");
-      controller.disconnect();
-      expect(spy).toHaveBeenCalled();
-    });
+      const nonExistentTrigger = document.createElement("button");
+      nonExistentTrigger.dataset.controls = "nonexistent-panel";
+      accordionElement.appendChild(nonExistentTrigger);
 
-    it("reconnect re-evaluates breakpoint attributes", () => {
-      const spy = jest.spyOn(controller, "_applyBreakpointOpenAttributes");
-      controller.reconnect({});
-      expect(spy).toHaveBeenCalled();
+      expect(() => controller.fixPanelRole()).not.toThrow();
     });
   });
 });
+

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

@@ -2,9 +2,6 @@ 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
@@ -19,8 +16,21 @@ export default class extends Controller {
     accordionOptions.isMultiSelectable = this.element.dataset.multiselectable !== "false";
     accordionOptions.isCollapsible = this.element.dataset.collapsible !== "false";
 
-    this._applyBreakpointOpenAttributes();
-    this._listenForBreakpointChanges();
+    // 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())])
+      })
+    })
 
     if (!this.element.id) {
       // when component has no id, we enforce to have it one
@@ -49,106 +59,20 @@ export default class extends Controller {
     }
 
     if (this.boundExpand) {
-      this.toggleButton.removeEventListener("click", this.boundExpand);
+      this.toggleButton.addEventListener("click", this.boundExpand);
     }
-
-    this._stopListeningForBreakpointChanges();
   }
 
   reconnect(event) {
     this.disconnect();
 
-    if (event && event.detail && event.detail.collapse) {
+    if (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/assign_role/assign_role.test.js

@@ -0,0 +1,80 @@
+/* global global, jest */
+
+import { Application } from "@hotwired/stimulus";
+import AssignRoleController from "src/decidim/controllers/assign_role/controller";
+
+describe("AssignRoleController", () => {
+  let application = null;
+  let element = null;
+  let controller = null;
+
+  beforeEach(() => {
+    document.body.innerHTML = `
+      <div data-controller="assign-role" data-role="navigation"></div>
+    `;
+
+    application = Application.start();
+    application.register("assign-role", AssignRoleController);
+
+    element = document.querySelector('[data-controller="assign-role"]');
+
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        controller = application.getControllerForElementAndIdentifier(element, "assign-role");
+        resolve();
+      }, 0);
+    });
+  });
+
+  afterEach(() => {
+    application.stop();
+    document.body.innerHTML = "";
+    jest.useRealTimers();
+    jest.restoreAllMocks();
+  });
+
+  describe("connect", () => {
+    it("sets the role attribute after the delay", () => {
+      controller.disconnect();
+      jest.useFakeTimers();
+
+      controller.connect();
+
+      expect(element.getAttribute("role")).toBeNull();
+      jest.advanceTimersByTime(300);
+      expect(element.getAttribute("role")).toBe("navigation");
+    });
+
+    it("returns early when no data-role is provided", () => {
+      controller.disconnect();
+
+      element.dataset.role = "";
+      const setTimeoutSpy = jest.spyOn(global, "setTimeout");
+      jest.useFakeTimers();
+
+      controller.connect();
+
+      expect(element.getAttribute("role")).toBeNull();
+      expect(setTimeoutSpy).not.toHaveBeenCalled();
+      jest.advanceTimersByTime(300);
+      expect(element.getAttribute("role")).toBeNull();
+    });
+  });
+
+  describe("disconnect", () => {
+    it("clears any pending timeout", () => {
+      controller.disconnect();
+      jest.useFakeTimers();
+
+      const clearTimeoutSpy = jest.spyOn(global, "clearTimeout");
+
+      controller.connect();
+      controller.disconnect();
+
+      expect(clearTimeoutSpy).toHaveBeenCalled();
+
+      jest.advanceTimersByTime(300);
+      expect(element.getAttribute("role")).toBeNull();
+    });
+  });
+});

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

@@ -0,0 +1,27 @@
+import { Controller } from "@hotwired/stimulus"
+
+/**
+ * This controller is used to set a role attribute for any element where is being assigned.
+ * It requires a data-role attribute with the value of the role attribute to be set.
+ * We are using to change the value "menu" of role attribute set by a11y on div dropdown-menu-account and
+ * dropdown-menu-account-mobile which are inappropriate for accessibility
+ */
+export default class extends Controller {
+  connect() {
+    const role = this.element.dataset.role
+
+    if (!role) {
+      return
+    }
+
+    this.timeoutId = setTimeout(() => {
+      this.element.setAttribute("role", role)
+    }, 300)
+  }
+
+  disconnect() {
+    if (this.timeoutId) {
+      clearTimeout(this.timeoutId)
+    }
+  }
+}

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

@@ -47,12 +47,6 @@ 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,34 +142,6 @@ 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;
     }
 
-    if (isValid) {
-      this.removeCheckboxGroupErrorClasses(groupName);
-    } else {
-      checkboxGroup.forEach((checkboxElement) => {
+    checkboxGroup.forEach((checkboxElement) => {
+      if (isValid) {
+        this.removeInputErrorClasses(checkboxElement);
+      } else {
         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", 712] */
+/* eslint max-lines: ["error", 690] */
 /* global jest */
 /**
  * @jest-environment jsdom
@@ -253,28 +253,6 @@ 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", () => {