decidim-core 0.31.3 → 0.31.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c44cbb210028e54b7a2bcc3a10fc79e041e355eac55e81b9a4b934f5fb5b42db
-  data.tar.gz: 0d87937801924b8d92ef31e2b136019090118d89b46ddbe5f2ce4052eef207b0
+  metadata.gz: 513dc9560cc17e12439bcef89efbb034edc6300b791810f2037bbb64191805a6
+  data.tar.gz: 99d7f076a772765592d34f5164659c5f4d0826edb4d146d5917fff28e02dc922
 SHA512:
-  metadata.gz: 508ad856daf2345e66f3c6b0b01c1a0c851d225eca8d0e4e739d79f5584dacb6de8c0155b8a3f28ac80961f6346c31ef3d6fdc14f80299fd80184ea64697b4ef
-  data.tar.gz: 931b27cfcafe94a6f922d26c2c419dbf89386f64147234d5cf129641b52e2651e877cbfff63ec13f9844c5e6f91c12730df30f0fea2a5dffe2f6c61551bee522
+  metadata.gz: d8928571dc994667af951c63981ce2472ce1be5db0c477beb27cadfc2ac43b6cfa87f1a8ab6854483cd00ce46fb1856adacf593ad4e159e7e1a46dc3ae099b87
+  data.tar.gz: e03706f2aadaac2165c6a513a5b1284011bda181ab5a29683fe5983e616c880fd9c7a6ff15cbf1619fb6d6f658eb30df40e4d151cb81f12b0bdbd16c7848b224

data/app/cells/decidim/nav_links/show.erb

@@ -1,12 +1,12 @@
 <div class="participatory-space__nav-container">
-  <button id="dropdown-trigger-participatory-space" data-controller="dropdown" data-target="dropdown-menu-participatory-space" data-auto-close="true" data-scroll-to-menu="true">
+  <button id="dropdown-trigger-participatory-space" data-controller="dropdown" data-target="dropdown-menu-participatory-space" data-auto-close="true" data-scroll-to-menu="true" data-add-aria-roles="false" data-open-md="true">
     <span><%= t("decidim.searches.filters.jump_to") %></span>
     <%= icon "arrow-down-s-line" %>
     <%= icon "arrow-up-s-line" %>
   </button>
-  <ul id="dropdown-menu-participatory-space" class="participatory-space__nav" aria-hidden="true">
+  <ul id="dropdown-menu-participatory-space" class="participatory-space__nav">
     <% model.each do |item| %>
-      <li role="menuitem">
+      <li>
         <%= link_to item[:url], class: "participatory-space__nav-item" do %>
           <%= decidim_escape_translated(item[:name]) %>
           <%= icon "arrow-right-line" %>

data/app/cells/decidim/participatory_space_private_user/show.erb

@@ -1,13 +1,13 @@
-<div class="profile__user">
+<%= link_to profile_url, class: "profile__user" do %>
   <div class="profile__user-avatar-container">
-    <div class="<%= has_profile? ? "profile__user-avatar" : "profile__user-avatar !border-0" %>">
-      <%= image_tag(has_profile? ? model.avatar_url(:big) : model.non_user_avatar_path, alt: "member-avatar") %>
+    <div class="profile__user-avatar">
+      <%= image_tag(model.avatar_url(:big), alt: "member-avatar") %>
     </div>
   </div>
   <div>
-    <div class="<%= has_profile? ? "profile__user-name" : "profile__user-name !no-underline" %>">
+    <span class="profile__user-name">
       <%= name %>
-    </div>
+    </span>
     <% if nickname.present? %>
       <span class="profile__user-nick block">
         <%= nickname %>
@@ -20,4 +20,4 @@
       </span>
     </div>
   </div>
-</div>
+<% end %>

data/app/cells/decidim/participatory_space_private_user_cell.rb

@@ -10,10 +10,6 @@ module Decidim
 
     private
 
-    def has_profile?
-      model.profile_url.present?
-    end
-
     def role_translated
       decidim_html_escape(decidim_sanitize(translated_attribute(role)))
     end

data/app/helpers/decidim/mailer_helper.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+module Decidim
+  # Helper that provides methods to render order selector and links
+  module MailerHelper
+    # Transforms relative image URLs in HTML content to absolute URLs using the provided host.
+    # This is used in emails (newsletters and notifications) to ensure images display correctly
+    # in email clients.
+    #
+    # @param content [String] - HTML content with img tags
+    # @param host [String] - the Decidim::Organization host to use for the root URL
+    #
+    # @return [String] - the content with transformed image URLs
+    def decidim_transform_image_urls(content, host)
+      return content if host.blank? || content.blank?
+
+      root_url = if Decidim.storage_cdn_host.present?
+                   Decidim.storage_cdn_host.chomp("/")
+                 else
+                   Decidim::EngineRouter.new("decidim", {}).root_url(host:).chomp("/")
+                 end
+
+      content.gsub(/src\s*=\s*(['"])([^'"]*)\1/) do
+        quote = Regexp.last_match(1)
+        src_value = Regexp.last_match(2)
+
+        if src_value.blank? || src_value.start_with?("http://", "https://", "data:", "//", "cid:")
+          %(src=#{quote}#{src_value}#{quote})
+        else
+          normalized_src = src_value.start_with?("/") ? src_value : "/#{src_value}"
+          %(src=#{quote}#{root_url}#{normalized_src}#{quote})
+        end
+      end
+    end
+  end
+end

data/app/helpers/decidim/menu_helper.rb

@@ -57,7 +57,8 @@ module Decidim
         self,
         element_class: "font-semibold underline",
         active_class: "is-active",
-        container_options: { class: "space-y-4 break-inside-avoid", role: :menu },
+        role: false,
+        container_options: { class: "space-y-4 break-inside-avoid" },
         label: t("layouts.decidim.footer.decidim_title")
       )
     end

data/app/helpers/decidim/newsletters_helper.rb

@@ -3,6 +3,9 @@
 module Decidim
   # Helper that provides methods to render links with utm codes, and replaced name
   module NewslettersHelper
+    include Decidim::SanitizeHelper
+    include Decidim::MailerHelper
+
     # If the newsletter body there are some links and the Decidim.track_newsletter_links = true
     # it will be replaced with the utm_codes method described below.
     # for example transform "https://es.lipsum.com/" to "https://es.lipsum.com/?utm_source=localhost&utm_campaign=newsletter_11"
@@ -19,7 +22,7 @@ module Decidim
 
       content = interpret_name(content, user)
       content = track_newsletter_links(content, id, host)
-      transform_image_urls(content, host)
+      decidim_transform_image_urls(content, host)
     end
 
     # this method is used to generate the root link on mail with the utm_codes
@@ -67,27 +70,6 @@ module Decidim
       content.gsub("%{name}", user.name)
     end
 
-    # Find each img HTML tag with relative path in src attribute
-    # For each URL, prepends the decidim.root_url
-    #   If host is not defined it returns full content
-    #
-    # @param content [String] - the string to convert
-    # @param host [String] - the Decidim::Organization host to replace
-    #
-    # @return [String] - the content converted
-    #
-    def transform_image_urls(content, host)
-      return content if host.blank?
-
-      content.scan(/src\s*=\s*"([^"]*)"/).each do |src|
-        root_url = decidim.root_url(host:)[0..-2]
-        src_replaced = "#{root_url}#{src.first}"
-        content = content.gsub(/src\s*=\s*"([^"]*#{src.first})"/, %(src="#{src_replaced}"))
-      end
-
-      content
-    end
-
     # Add tracking query params to each links
     #
     # @param content [String] - the string to convert

data/app/mailers/decidim/application_mailer.rb

@@ -7,9 +7,13 @@ module Decidim
     include LocalisedMailer
     include MultitenantAssetHost
     include Decidim::SanitizeHelper
+    include Decidim::MailerHelper
     include Decidim::OrganizationHelper
     helper_method :organization_name, :decidim_escape_translated, :decidim_sanitize_translated, :translated_attribute, :decidim_sanitize, :decidim_sanitize_newsletter
 
+    helper Decidim::SanitizeHelper
+    helper Decidim::MailerHelper
+
     after_action :set_smtp
     after_action :set_from
 

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