decidim-core 0.31.2 → 0.32.1

data/app/packs/src/decidim/a11y.js

@@ -8,6 +8,13 @@ import Dialogs from "a11y-dialog-component";
  * @return {void}
  */
 const createDialog = (component) => {
+  const getFocusableElements = (container) => {
+    const selectors = "a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex='-1'])";
+    return Array.from(container.querySelectorAll(selectors)).filter(
+      (el) => el.offsetParent !== null
+    );
+  };
+
   const {
     dataset: { dialog, ...attrs }
   } = component;
@@ -29,11 +36,33 @@ const createDialog = (component) => {
     backdropSelector: `[data-dialog="${dialog}"]`,
     enableAutoFocus: false,
     onOpen: (params, trigger) => {
+      const keyHandler = (event) => {
+        if (event.key !== "Tab") {
+          return;
+        }
+        const focusable = getFocusableElements(params);
+        if (focusable.length === 0) {
+          return;
+        }
+        if (event.shiftKey && document.activeElement === focusable[0]) {
+          event.preventDefault();
+          focusable[focusable.length - 1].focus({ preventScroll: true });
+        } else if (!event.shiftKey && document.activeElement === focusable[focusable.length - 1]) {
+          event.preventDefault();
+          focusable[0].focus({ preventScroll: true });
+        }
+      };
+      params._focusTrapHandler = keyHandler;
+      params.addEventListener("keydown", keyHandler);
       setFocusOnTitle(params);
       window.focusGuard.trap(params, trigger);
       params.dispatchEvent(new CustomEvent("open.dialog"));
     },
     onClose: (params) => {
+      if (params._focusTrapHandler) {
+        params.removeEventListener("keydown", params._focusTrapHandler);
+        Reflect.deleteProperty(params, "_focusTrapHandler");
+      }
       window.focusGuard.disable();
       params.dispatchEvent(new CustomEvent("close.dialog"));
     },

data/app/packs/src/decidim/a11y.test.js

@@ -0,0 +1,81 @@
+/* global jest */
+
+import { createDialog } from "src/decidim/a11y"
+
+describe("a11y dialog focus trap", () => {
+  const dialogHtml = `
+    <button id="open-btn" data-dialog-open="testDialog">Open</button>
+    <div id="test-dialog" data-dialog="testDialog">
+      <div data-dialog-container>
+        <h2 id="dialog-title-testDialog" tabindex="-1" data-dialog-title>Test Dialog</h2>
+        <a href="#">Link 1</a>
+        <button>Button 1</button>
+        <input type="text" />
+        <button>Button 2</button>
+        <a href="#">Link 2</a>
+      </div>
+      <div data-dialog-actions>
+        <button data-dialog-close="testDialog">Close</button>
+      </div>
+    </div>
+  `;
+
+  beforeEach(() => {
+    document.body.innerHTML = dialogHtml;
+    window.Decidim = {
+      currentDialogs: {}
+    };
+    window.focusGuard = {
+      trap: jest.fn(),
+      disable: jest.fn()
+    };
+  });
+
+  describe("keydown handler", () => {
+    let dialogEl = null;
+
+    beforeEach(() => {
+      const component = document.querySelector("[data-dialog]");
+      createDialog(component);
+      dialogEl = document.querySelector("[data-dialog='testDialog']");
+      // Get the dialog from Decidim.currentDialogs and open it
+      const dialog = window.Decidim.currentDialogs.testDialog;
+      dialog.open();
+    });
+
+    it("adds keydown handler on open", () => {
+      expect(dialogEl._focusTrapHandler).toBeDefined();
+    });
+
+    it("handles Tab key", () => {
+      const selectors = "a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex='-1'])";
+      const tabbableElements = Array.from(dialogEl.querySelectorAll(selectors)).filter(
+        (el) => el.offsetParent || el.offsetParent === null
+      );
+      tabbableElements[tabbableElements.length - 1].focus();
+
+      const event = new KeyboardEvent("keydown", { key: "Tab", bubbles: true });
+      const preventDefault = jest.fn();
+      event.preventDefault = preventDefault;
+
+      dialogEl.dispatchEvent(event);
+
+      expect(preventDefault).toHaveBeenCalled();
+    });
+  });
+
+  describe("onClose cleanup", () => {
+    it("removes the keydown handler on close", () => {
+      const component = document.querySelector("[data-dialog]");
+      createDialog(component);
+      const dialogEl = document.querySelector("[data-dialog='testDialog']");
+
+      const dialog = window.Decidim.currentDialogs.testDialog;
+      dialog.open();
+      expect(dialogEl._focusTrapHandler).toBeDefined();
+
+      dialog.close();
+      expect(dialogEl._focusTrapHandler).toBeUndefined();
+    });
+  });
+});

data/app/packs/src/decidim/confirm.js

@@ -169,7 +169,9 @@ export const initializeConfirm = () => {
     return handleDocumentEvent(ev, [
       Rails.linkClickSelector,
       Rails.buttonClickSelector,
-      Rails.formInputClickSelector
+      Rails.formInputClickSelector,
+      'button[data-confirm][type="button"]',
+      "form button[data-confirm]"
     ]);
   });
   document.addEventListener("change", (ev) => {
@@ -187,6 +189,11 @@ export const initializeConfirm = () => {
     $(Rails.formInputClickSelector).on("click.confirm", (ev) => {
       handleConfirm(ev, getMatchingEventTarget(ev, Rails.formInputClickSelector));
     });
+
+    // Handle button[type="button"] with data-confirm inside forms
+    $('button[data-confirm][type="button"]').on("click.confirm", (ev) => {
+      handleConfirm(ev, ev.currentTarget);
+    });
   });
 };
 

data/app/packs/src/decidim/confirm.test.js

@@ -0,0 +1,225 @@
+/* global jest */
+
+jest.mock("src/decidim/refactor/moved/icon", () => () => "<svg></svg>");
+
+describe("Confirm dialog for button[type='button']", () => {
+  let mockRails = null;
+  let mockDecidim = null;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    document.body.innerHTML = `
+      <div id="confirm-modal" style="display: none;">
+        <div data-dialog-title></div>
+        <div class="confirm-modal-icon"></div>
+        <div data-confirm-modal-content></div>
+        <button data-confirm-ok>Confirm</button>
+        <button data-confirm-cancel>Cancel</button>
+      </div>
+    `;
+
+    mockRails = {
+      linkClickSelector: "a[data-confirm]",
+      buttonClickSelector: "button[data-confirm]:not([form])",
+      formInputClickSelector: 'form button[type="submit"], form button:not([type])',
+      inputChangeSelector: "input[data-confirm], select[data-confirm]",
+      formSubmitSelector: "form[data-confirm]",
+      stopEverything: jest.fn(),
+      fire: jest.fn((el, event) => {
+        const evt = new CustomEvent(event);
+        el.dispatchEvent(evt);
+        return true;
+      }),
+      matches: function(element, selector) {
+        if (element instanceof Element) {
+          return element.matches(selector);
+        }
+        return false;
+      }
+    };
+
+    mockDecidim = {
+      currentDialogs: {
+        "confirm-modal": {
+          open: jest.fn(),
+          close: jest.fn()
+        }
+      }
+    };
+
+    window.Rails = mockRails;
+    window.Decidim = mockDecidim;
+  });
+
+  afterEach(() => {
+    document.body.innerHTML = "";
+  });
+
+  describe("selector matching for button[type='button'] with data-confirm", () => {
+    it("matches button[data-confirm][type='button'] selector", () => {
+      const button = document.createElement("button");
+      button.type = "button";
+      button.setAttribute("data-confirm", "Are you sure?");
+
+      expect(button.matches('button[data-confirm][type="button"]')).toBe(true);
+    });
+
+    it("matches form button[data-confirm] selector", () => {
+      const form = document.createElement("form");
+      const button = document.createElement("button");
+      button.setAttribute("data-confirm", "Are you sure?");
+      form.appendChild(button);
+
+      expect(button.matches("form button[data-confirm]")).toBe(true);
+    });
+
+    it("does not match regular button without data-confirm", () => {
+      const button = document.createElement("button");
+      button.type = "button";
+
+      expect(button.matches('button[data-confirm][type="button"]')).toBe(false);
+    });
+
+    it("does not match button[type='submit'] with the type='button' selector", () => {
+      const button = document.createElement("button");
+      button.type = "submit";
+      button.setAttribute("data-confirm", "Are you sure?");
+
+      expect(button.matches('button[data-confirm][type="button"]')).toBe(false);
+    });
+
+    it("matches button[type='button'] inside form", () => {
+      document.body.innerHTML = `
+        <form>
+          <button type="button" data-confirm="Test message">Click me</button>
+        </form>
+      `;
+
+      const button = document.querySelector('button[type="button"]');
+      expect(button.matches('button[data-confirm][type="button"]')).toBe(true);
+      expect(button.matches("form button[data-confirm]")).toBe(true);
+    });
+
+    it("does not match button[type='button'] without data-confirm inside form", () => {
+      document.body.innerHTML = `
+        <form>
+          <button type="button">Click me</button>
+        </form>
+      `;
+
+      const button = document.querySelector('button[type="button"]');
+      expect(button.matches('button[data-confirm][type="button"]')).toBe(false);
+      expect(button.matches("form button[data-confirm]")).toBe(false);
+    });
+  });
+
+  describe("initializeConfirm - selectors registration", () => {
+    it("adds click event listener with proper selectors including button[type='button'] support", async () => {
+      const { initializeConfirm } = await import("src/decidim/confirm.js");
+
+      const addEventListenerSpy = jest.spyOn(document, "addEventListener");
+
+      initializeConfirm();
+
+      expect(addEventListenerSpy).toHaveBeenCalledWith("click", expect.any(Function));
+    });
+
+    it("adds change event listener for input change selector", async () => {
+      const { initializeConfirm } = await import("src/decidim/confirm.js");
+
+      const addEventListenerSpy = jest.spyOn(document, "addEventListener");
+
+      initializeConfirm();
+
+      const changeHandlerCalls = addEventListenerSpy.mock.calls.filter(
+        (call) => call[0] === "change"
+      );
+      expect(changeHandlerCalls.length).toBeGreaterThan(0);
+    });
+
+    it("adds submit event listener for form submit selector", async () => {
+      const { initializeConfirm } = await import("src/decidim/confirm.js");
+
+      const addEventListenerSpy = jest.spyOn(document, "addEventListener");
+
+      initializeConfirm();
+
+      const submitHandlerCalls = addEventListenerSpy.mock.calls.filter(
+        (call) => call[0] === "submit"
+      );
+      expect(submitHandlerCalls.length).toBeGreaterThan(0);
+    });
+
+    it("adds turbo:load event listener for Foundation Abide compatibility", async () => {
+      const { initializeConfirm } = await import("src/decidim/confirm.js");
+
+      const addEventListenerSpy = jest.spyOn(document, "addEventListener");
+
+      initializeConfirm();
+
+      const turboLoadCalls = addEventListenerSpy.mock.calls.filter(
+        (call) => call[0] === "turbo:load"
+      );
+      expect(turboLoadCalls.length).toBeGreaterThan(0);
+    });
+  });
+
+  describe("handleDocumentEvent with button[type='button'] support", () => {
+    it("handles click on button[type='button'] with data-confirm and form attribute", async () => {
+      const { initializeConfirm } = await import("src/decidim/confirm.js");
+
+      document.body.innerHTML = `
+        <form id="my-form">
+          <button type="button" form="my-form" data-confirm="Are you sure?">Click me</button>
+        </form>
+      `;
+
+      const button = document.querySelector('button[type="button"]');
+      const openSpy = jest.spyOn(mockDecidim.currentDialogs["confirm-modal"], "open");
+
+      initializeConfirm();
+
+      button.click();
+
+      expect(openSpy).toHaveBeenCalled();
+    });
+
+    it("handles click on button[type='button'] with data-confirm outside form", async () => {
+      const { initializeConfirm } = await import("src/decidim/confirm.js");
+
+      document.body.innerHTML = `
+        <button type="button" data-confirm="Are you sure?">Click me</button>
+      `;
+
+      const button = document.querySelector('button[type="button"]');
+      const openSpy = jest.spyOn(mockDecidim.currentDialogs["confirm-modal"], "open");
+
+      initializeConfirm();
+
+      button.click();
+
+      expect(openSpy).toHaveBeenCalled();
+    });
+
+    it("does not trigger confirm for button without data-confirm attribute", async () => {
+      const { initializeConfirm } = await import("src/decidim/confirm.js");
+
+      document.body.innerHTML = `
+        <form>
+          <button type="button">Click me</button>
+        </form>
+      `;
+
+      const button = document.querySelector('button[type="button"]');
+      const openSpy = jest.spyOn(mockDecidim.currentDialogs["confirm-modal"], "open");
+
+      initializeConfirm();
+
+      button.click();
+
+      expect(openSpy).not.toHaveBeenCalled();
+    });
+  });
+});
+
+/* dummy end */

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

@@ -0,0 +1,272 @@
+/* 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()
+      };
+    });
+  };
+
+  beforeEach(() => {
+    mockMatchMedia(false);
+    document.body.innerHTML = `
+      <div id="test-accordion" data-controller="accordion">
+        <button id="trigger-1" data-controls="panel-1">Trigger 1</button>
+        <div id="panel-1">Panel 1 Content</div>
+        <button id="trigger-2" data-controls="panel-2">Trigger 2</button>
+        <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);
+  });
+
+  afterEach(() => {
+    document.body.innerHTML = "";
+    Reflect.deleteProperty(window, "matchMedia");
+  });
+
+  describe("fixPanelRole", () => {
+    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");
+    });
+
+    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", () => {
+      panel1.setAttribute("role", "region");
+      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();
+    });
+  });
+
+  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();
+    });
+  });
+});