decidim-core 0.31.2 → 0.32.1

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
@@ -76,6 +82,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,215 @@
+/* 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("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");
+      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();
       }
     }
 
@@ -418,13 +419,13 @@ class FormValidator {
       return true;
     }
 
-    checkboxGroup.forEach((checkboxElement) => {
-      if (isValid) {
-        this.removeInputErrorClasses(checkboxElement);
-      } else {
+    if (isValid) {
+      this.removeCheckboxGroupErrorClasses(groupName);
+    } else {
+      checkboxGroup.forEach((checkboxElement) => {
         this.addInputErrorClasses(checkboxElement, ["required"]);
-      }
-    });
+      });
+    }
 
     return isValid;
   }

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

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

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

@@ -0,0 +1,152 @@
+import { Controller } from "@hotwired/stimulus"
+
+const OPEN_DELAY_MS = 50
+
+const FOCUSABLE_SELECTORS = "a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex='-1'])"
+
+const getFocusableElements = (container) => {
+  return Array.from(container.querySelectorAll(FOCUSABLE_SELECTORS)).filter(
+    (el) => el.offsetParent !== null
+  );
+}
+
+/**
+ * Main menu dropdown controller and traps page scroll while the menu is open.
+ *
+ * Expected markup:
+ * - The controller element has a `data-target` attribute with the menu container id.
+ * - The menu container uses `aria-hidden="true|false"` for visibility.
+ * - An optional close button exists with id `main-dropdown-summary-desktop-close`.
+ */
+export default class extends Controller {
+  connect() {
+    this.menuButton = this.element
+    this.menuContainer = document.getElementById(this.element.dataset.target)
+    this.closeButton = document.getElementById(this.element.dataset.closeButton)
+
+    if (!this.menuContainer) {
+      return;
+    }
+
+    this.handleContainerClick = this.handleContainerClick.bind(this)
+    this.handleButtonClick = this.handleButtonClick.bind(this)
+    this.handleKeydown = this.handleKeydown.bind(this)
+    this.handleCloseButtonClick = this.handleCloseButtonClick.bind(this)
+    this.focusTrapHandler = this.focusTrapHandler.bind(this)
+
+    if (!this.menuButton.hasAttribute("aria-expanded")) {
+      this.menuButton.setAttribute("aria-expanded", "false");
+    }
+
+    this.menuButton.addEventListener("click", this.handleButtonClick)
+    this.menuContainer.addEventListener("click", this.handleContainerClick)
+
+
+    document.addEventListener("keydown", this.handleKeydown)
+    if (this.closeButton) {
+      this.closeButton.addEventListener("click", this.handleCloseButtonClick)
+    }
+  }
+
+  disconnect() {
+    if (!this.menuContainer) {
+      return;
+    }
+
+    this.menuButton.removeEventListener("click", this.handleButtonClick)
+    this.menuContainer.removeEventListener("click", this.handleContainerClick)
+    document.removeEventListener("keydown", this.handleKeydown)
+    if (this.closeButton) {
+      this.closeButton.removeEventListener("click", this.handleCloseButtonClick)
+    }
+    if (!this.isHidden()) {
+      this.closeMenu();
+    }
+  }
+
+
+  handleContainerClick(event) {
+    if (this.isHidden()) {
+      return;
+    }
+    if (event.target !== this.menuContainer) {
+      return;
+    }
+    this.closeMenu()
+  }
+
+  handleButtonClick() {
+    if (!this.isHidden()) {
+      return;
+    }
+
+    setTimeout(() => {
+      this.openMenu()
+      window.scrollTo({ top: 0, behavior: "smooth" })
+    }, OPEN_DELAY_MS)
+  }
+
+  handleKeydown(event) {
+    if (event.key !== "Escape") {
+      return;
+    }
+    if (this.isHidden()) {
+      return;
+    }
+
+    this.closeMenu()
+  }
+
+  handleCloseButtonClick() {
+    if (this.isHidden()) {
+      return;
+    }
+
+    this.closeMenu();
+  }
+
+  isHidden() {
+    return this.menuContainer.getAttribute("aria-hidden") === "true"
+  }
+
+  focusTrapHandler(event) {
+    if (event.key !== "Tab") {
+      return;
+    }
+    const focusable = getFocusableElements(this.menuContainer);
+    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 });
+    }
+  }
+
+  openMenu() {
+    if (typeof this.previousBodyOverflow === "undefined") {
+      this.previousBodyOverflow = document.body.style.overflow;
+    }
+    document.body.style.overflow = "hidden"
+    this.element.setAttribute("aria-expanded", "true")
+    this.menuContainer.setAttribute("aria-hidden", "false")
+    this.menuContainer.setAttribute("aria-modal", "true")
+    this.menuContainer.addEventListener("keydown", this.focusTrapHandler)
+
+    const focusable = getFocusableElements(this.menuContainer);
+    if (focusable.length > 0) {
+      focusable[0].focus({ preventScroll: true });
+    }
+  }
+
+  closeMenu() {
+    this.menuContainer.removeEventListener("keydown", this.focusTrapHandler)
+    document.body.style.overflow = this.previousBodyOverflow ?? ""
+    this.element.setAttribute("aria-expanded", "false")
+    this.menuContainer.setAttribute("aria-hidden", "true")
+    this.menuContainer.removeAttribute("aria-modal")
+  }
+}