decidim-core 0.31.2 → 0.31.4

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,118 @@
+/* global jest */
+
+import AccordionController from "src/decidim/controllers/accordion/controller";
+
+jest.mock("a11y-accordion-component", () => ({
+  render: jest.fn(),
+  destroy: jest.fn()
+}));
+
+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
+    });
+    return instance;
+  };
+
+  beforeEach(() => {
+    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>
+        <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", () => {
+      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", () => {
+      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 nonExistentTrigger = document.createElement("button");
+      nonExistentTrigger.dataset.controls = "nonexistent-panel";
+      accordionElement.appendChild(nonExistentTrigger);
+
+      expect(() => controller.fixPanelRole()).not.toThrow();
+    });
+  });
+});
+

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

@@ -39,6 +39,8 @@ export default class extends Controller {
 
     Accordions.render(this.element.id, accordionOptions);
 
+    this.fixPanelRole();
+
     this.expandIfNeeded();
 
     this.boundReconnect = this.reconnect.bind(this);
@@ -88,6 +90,28 @@ export default class extends Controller {
     this.previouslyExpanded = this.toggleButton.getAttribute("aria-expanded");
   }
 
+  fixPanelRole() {
+    const panelRole = this.element.dataset.panelRole;
+    if (!panelRole) {
+      return;
+    }
+
+    const panels = this.element.querySelectorAll("[data-controls]");
+    panels.forEach((trigger) => {
+      const panelId = trigger.dataset.controls;
+      const panel = document.getElementById(panelId);
+      if (!panel) {
+        return;
+      }
+
+      if (panelRole === "none") {
+        panel.removeAttribute("role");
+      } else {
+        panel.setAttribute("role", panelRole);
+      }
+    });
+  }
+
   /**
    * Checks if a key is in the current viewport
    *

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

@@ -76,6 +76,32 @@ export default class extends Controller {
     }
 
     Dropdowns.render(this.element.id, dropdownOptions);
+
+    const addAriaRoles = this.element.dataset.addAriaRoles !== "false";
+    if (!addAriaRoles) {
+      this.removeAriaRoles();
+    }
+  }
+
+  removeAriaRoles() {
+    const target = this.element.dataset.target;
+    const dropdownMenu = document.getElementById(target);
+    if (!dropdownMenu) {
+      return;
+    }
+
+    dropdownMenu.removeAttribute("role");
+    dropdownMenu.removeAttribute("aria-labelledby");
+    dropdownMenu.removeAttribute("tabindex");
+
+    dropdownMenu.querySelectorAll("li").forEach((li) => {
+      li.removeAttribute("role");
+    });
+
+    dropdownMenu.querySelectorAll("a").forEach((anchor) => {
+      anchor.removeAttribute("role");
+      anchor.removeAttribute("tabindex");
+    });
   }
 
   /**

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

@@ -0,0 +1,187 @@
+/* global jest */
+/* eslint max-lines: ["error", 400] */
+
+import DropdownController from "src/decidim/controllers/dropdown/controller";
+
+jest.mock("a11y-dropdown-component", () => ({
+  render: jest.fn(),
+  destroy: jest.fn()
+}));
+
+describe("DropdownController", () => {
+  let element = null;
+  let dropdownMenuEl = null;
+  let controller = null;
+
+  const createController = (controllerElement) => {
+    const ControllerClass = DropdownController;
+    const instance = Object.create(ControllerClass.prototype);
+    Reflect.defineProperty(instance, "element", {
+      get: () => controllerElement,
+      configurable: true
+    });
+    return instance;
+  };
+
+  beforeEach(() => {
+    window.matchMedia = jest.fn().mockImplementation((query) => ({
+      matches: false,
+      media: query,
+      addListener: jest.fn(),
+      removeListener: jest.fn()
+    }));
+
+    document.body.innerHTML = `
+      <button
+        id="dropdown-trigger"
+        data-controller="dropdown"
+        data-target="dropdown-menu"
+        data-open-md="true"
+        data-auto-close="true"
+      >
+        Dropdown Trigger
+      </button>
+      <ul id="dropdown-menu" class="dropdown-menu">
+        <li><a href="/link1">Link 1</a></li>
+        <li><a href="/link2">Link 2</a></li>
+        <li><a href="/link3">Link 3</a></li>
+      </ul>
+    `;
+
+    element = document.getElementById("dropdown-trigger");
+    dropdownMenuEl = document.getElementById("dropdown-menu");
+    controller = createController(element);
+  });
+
+  afterEach(() => {
+    document.body.innerHTML = "";
+    Reflect.deleteProperty(window, "matchMedia");
+  });
+
+  describe("removeAriaRoles", () => {
+    it("removes role attribute from dropdown menu", () => {
+      dropdownMenuEl.setAttribute("role", "menu");
+
+      controller.removeAriaRoles();
+
+      expect(dropdownMenuEl.getAttribute("role")).toBeNull();
+    });
+
+    it("removes aria-labelledby attribute from dropdown menu", () => {
+      dropdownMenuEl.setAttribute("aria-labelledby", "trigger");
+
+      controller.removeAriaRoles();
+
+      expect(dropdownMenuEl.getAttribute("aria-labelledby")).toBeNull();
+    });
+
+    it("removes tabindex attribute from dropdown menu", () => {
+      dropdownMenuEl.setAttribute("tabindex", "-1");
+
+      controller.removeAriaRoles();
+
+      expect(dropdownMenuEl.getAttribute("tabindex")).toBeNull();
+    });
+
+    it("removes role from li elements", () => {
+      const li = dropdownMenuEl.querySelector("li");
+      li.setAttribute("role", "none");
+
+      controller.removeAriaRoles();
+
+      expect(li.getAttribute("role")).toBeNull();
+    });
+
+    it("removes role from all li elements", () => {
+      const listItems = dropdownMenuEl.querySelectorAll("li");
+      listItems.forEach((li) => {
+        li.setAttribute("role", "none");
+      });
+
+      controller.removeAriaRoles();
+
+      listItems.forEach((li) => {
+        expect(li.getAttribute("role")).toBeNull();
+      });
+    });
+
+    it("removes role from anchor elements", () => {
+      const anchor = dropdownMenuEl.querySelector("a");
+      anchor.setAttribute("role", "menuitem");
+
+      controller.removeAriaRoles();
+
+      expect(anchor.getAttribute("role")).toBeNull();
+    });
+
+    it("removes tabindex from anchor elements", () => {
+      const anchor = dropdownMenuEl.querySelector("a");
+      anchor.setAttribute("tabindex", "-1");
+
+      controller.removeAriaRoles();
+
+      expect(anchor.getAttribute("tabindex")).toBeNull();
+    });
+
+    it("handles missing dropdown menu gracefully", () => {
+      const mockElement = document.createElement("button");
+      mockElement.dataset.target = "nonexistent-menu";
+      const mockController = createController(mockElement);
+
+      expect(() => {
+        mockController.removeAriaRoles();
+      }).not.toThrow();
+    });
+
+    it("handles elements without the attributes gracefully", () => {
+      expect(() => {
+        controller.removeAriaRoles();
+      }).not.toThrow();
+
+      expect(dropdownMenuEl.getAttribute("role")).toBeNull();
+    });
+  });
+
+  describe("data-add-aria-roles option", () => {
+    it("keeps role menu when data-add-aria-roles is true", () => {
+      element.setAttribute("data-add-aria-roles", "true");
+      dropdownMenuEl.setAttribute("role", "menu");
+      dropdownMenuEl.querySelector("li").setAttribute("role", "none");
+      dropdownMenuEl.querySelector("a").setAttribute("role", "menuitem");
+      const testController = createController(element);
+
+      testController.connect();
+
+      expect(dropdownMenuEl.getAttribute("role")).toBe("menu");
+      expect(dropdownMenuEl.querySelector("li").getAttribute("role")).toBe("none");
+      expect(dropdownMenuEl.querySelector("a").getAttribute("role")).toBe("menuitem");
+    });
+
+    it("keeps role menu when data-add-aria-roles is not set (default)", () => {
+      dropdownMenuEl.setAttribute("role", "menu");
+      dropdownMenuEl.querySelector("li").setAttribute("role", "none");
+      dropdownMenuEl.querySelector("a").setAttribute("role", "menuitem");
+      const testController = createController(element);
+
+      testController.connect();
+
+      expect(dropdownMenuEl.getAttribute("role")).toBe("menu");
+      expect(dropdownMenuEl.querySelector("li").getAttribute("role")).toBe("none");
+      expect(dropdownMenuEl.querySelector("a").getAttribute("role")).toBe("menuitem");
+    });
+
+    it("removes role menu when data-add-aria-roles is false", () => {
+      element.setAttribute("data-add-aria-roles", "false");
+      dropdownMenuEl.setAttribute("role", "menu");
+      dropdownMenuEl.querySelector("li").setAttribute("role", "none");
+      dropdownMenuEl.querySelector("a").setAttribute("role", "menuitem");
+      const testController = createController(element);
+
+      testController.connect();
+
+      expect(dropdownMenuEl.getAttribute("role")).toBeNull();
+      expect(dropdownMenuEl.querySelector("li").getAttribute("role")).toBeNull();
+      expect(dropdownMenuEl.querySelector("a").getAttribute("role")).toBeNull();
+    });
+  });
+});

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

@@ -104,7 +104,7 @@ class FormValidator {
     let announceElement = this.element.querySelector(".sr-announce");
 
     if (announceElement) {
-      announceElement.remove();
+      return;
     }
 
     announceElement = document.createElement("div");
@@ -113,7 +113,7 @@ class FormValidator {
     this.element.prepend(announceElement);
 
     setTimeout(() => {
-      announceElement.textContent = getDictionary("forms.correct_errors");
+      announceElement.textContent = getDictionary("forms").correct_errors;
     }, 100);
   }
 
@@ -259,6 +259,7 @@ class FormValidator {
         this.removeInputErrorClasses(inputElement);
       } else {
         this.addInputErrorClasses(inputElement, failedValidatorNames);
+        this.announceFormErrorForScreenReader();
       }
     }
 

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

@@ -522,6 +522,11 @@ describe("FormValidator", () => {
       validatorInstance.validateSingleInput(textInput);
       expect(textInput.classList.contains("is-invalid-input")).toBe(true);
 
+      const announceElement = formElement.querySelector(".sr-announce");
+      expect(announceElement).toBeTruthy();
+      expect(announceElement.getAttribute("aria-live")).toBe("assertive");
+      expect(announceElement.classList.contains("sr-only")).toBe(true);
+
       // Reset validation
       validatorInstance.resetFormValidation();
 

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

@@ -10,6 +10,7 @@ export default class extends Controller {
   connect() {
     this.handleChange = this.handleChange.bind(this);
     this.element.addEventListener("change", this.handleChange);
+    this.element.dispatchEvent(new Event("change"));
   }
 
   disconnect() {

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

@@ -72,6 +72,19 @@ describe("LanguageChangeController", () => {
       expect(removeSpy).toHaveBeenCalledWith("change", controller.handleChange);
       removeSpy.mockRestore();
     });
+
+    it("activates the selected option's panel on connect", () => {
+      const options = selectElement.querySelectorAll("option");
+      options[1].selected = true;
+
+      controller.disconnect();
+      controller.connect();
+
+      expect(panel0.classList.contains("is-active")).toBe(false);
+      expect(panel0.ariaHidden).toBe("true");
+      expect(panel1.classList.contains("is-active")).toBe(true);
+      expect(panel1.ariaHidden).toBe("false");
+    });
   });
 
   describe("handleChange", () => {