decidim-core 0.32.0 → 0.32.2

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

@@ -1,36 +1,45 @@
+/* eslint max-lines: ["error", 350] */
 /* 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 +48,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 +63,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 +72,265 @@ 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("_setupInertPanels", () => {
+    const nextTick = () => new Promise((resolve) => setTimeout(resolve, 0));
 
-      expect(() => controller.fixPanelRole()).not.toThrow();
+    beforeEach(() => {
+      panel1.setAttribute("inert", "");
+      panel1.setAttribute("aria-hidden", "true");
+      panel1.setAttribute("tabindex", "-1");
+      panel2.setAttribute("aria-hidden", "true");
+    });
+
+    it("only manages panels with the inert attribute", async () => {
+      controller._setupInertPanels();
+      expect(controller._panelObservers.length).toBe(1);
+
+      panel2.setAttribute("aria-hidden", "false");
+      await nextTick();
+      expect(panel2.hasAttribute("inert")).toBe(false);
+      expect("inertManaged" in panel2.dataset).toBe(false);
+    });
+
+    it("removes inert and moves focus to the panel when it gets expanded", async () => {
+      controller._setupInertPanels();
+
+      panel1.setAttribute("aria-hidden", "false");
+      await nextTick();
+      expect(panel1.hasAttribute("inert")).toBe(false);
+      expect(document.activeElement).toBe(panel1);
+    });
+
+    it("restores inert when the panel gets collapsed again", async () => {
+      controller._setupInertPanels();
+
+      panel1.setAttribute("aria-hidden", "false");
+      await nextTick();
+      panel1.setAttribute("aria-hidden", "true");
+      await nextTick();
+      expect(panel1.hasAttribute("inert")).toBe(true);
+    });
+
+    it("keeps managing an expanded panel across teardown and setup", async () => {
+      controller._setupInertPanels();
+
+      panel1.setAttribute("aria-hidden", "false");
+      await nextTick();
+      controller._teardownInertPanels();
+
+      panel1.setAttribute("aria-hidden", "true");
+      controller._setupInertPanels();
+      expect(controller._panelObservers.length).toBe(1);
+      expect(panel1.hasAttribute("inert")).toBe(true);
+    });
+
+    it("stops syncing after teardown", async () => {
+      controller._setupInertPanels();
+      controller._teardownInertPanels();
+      expect(controller._panelObservers.length).toBe(0);
+
+      panel1.setAttribute("aria-hidden", "false");
+      await nextTick();
+      expect(panel1.hasAttribute("inert")).toBe(true);
     });
   });
-});
 
+  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);
+    });
+
+    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
@@ -41,6 +31,8 @@ export default class extends Controller {
 
     this.fixPanelRole();
 
+    this._setupInertPanels();
+
     this.expandIfNeeded();
 
     this.boundReconnect = this.reconnect.bind(this);
@@ -59,20 +51,108 @@ export default class extends Controller {
     }
 
     if (this.boundExpand) {
-      this.toggleButton.addEventListener("click", this.boundExpand);
+      this.toggleButton.removeEventListener("click", this.boundExpand);
     }
+
+    this._teardownInertPanels();
+
+    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) {
@@ -90,6 +170,45 @@ export default class extends Controller {
     this.previouslyExpanded = this.toggleButton.getAttribute("aria-expanded");
   }
 
+  /**
+   * Syncs the `inert` attribute of partially visible panels (those rendered
+   * inert) with their `aria-hidden` state, moving focus to the panel on expand.
+   *
+   * @returns {void}
+   */
+  _setupInertPanels() {
+    this._panelObservers = [];
+
+    this.element.querySelectorAll("[data-controls]").forEach((trigger) => {
+      const panel = document.getElementById(trigger.dataset.controls);
+      if (!panel || (!panel.hasAttribute("inert") && !("inertManaged" in panel.dataset))) {
+        return;
+      }
+
+      panel.dataset.inertManaged = "";
+      panel.toggleAttribute("inert", panel.getAttribute("aria-hidden") === "true");
+
+      const observer = new MutationObserver(() => {
+        if (panel.getAttribute("aria-hidden") === "true") {
+          panel.setAttribute("inert", "");
+        } else {
+          panel.removeAttribute("inert");
+          panel.focus();
+        }
+      });
+      observer.observe(panel, { attributes: true, attributeFilter: ["aria-hidden"] });
+
+      this._panelObservers.push(observer);
+    });
+  }
+
+  _teardownInertPanels() {
+    if (this._panelObservers) {
+      this._panelObservers.forEach((observer) => observer.disconnect());
+      this._panelObservers = [];
+    }
+  }
+
   fixPanelRole() {
     const panelRole = this.element.dataset.panelRole;
     if (!panelRole) {

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

@@ -0,0 +1,30 @@
+import { Controller } from "@hotwired/stimulus"
+import autofocus from "src/decidim/refactor/implementation/autofocus"
+
+export default class extends Controller {
+  connect() {
+    this.handleTabsChange = this.handleTabsChange.bind(this)
+
+    // Foundation tabs (used for translated fields when locales <= 4)
+    this.tabs = Array.from(this.element.querySelectorAll("ul[data-tabs]"))
+    if (typeof $ === "function" && this.tabs.length > 0) {
+      this.tabs.forEach((tabs) => $(tabs).on("change.zf.tabs", this.handleTabsChange))
+    }
+
+    // Language selector dropdown (used for translated fields when locales > 4)
+    if (this.element.querySelector("select.language-change")) {
+      autofocus(this.element)
+    }
+  }
+
+  disconnect() {
+    if (typeof $ === "function" && this.tabs && this.tabs.length > 0) {
+      this.tabs.forEach((tabs) => $(tabs).off("change.zf.tabs", this.handleTabsChange))
+    }
+  }
+
+  handleTabsChange(event) {
+    const activePane = $(event.target).parent().next(".tabs-content").find(".tabs-panel.is-active")[0]
+    autofocus(activePane)
+  }
+}

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");