decidim-core 0.31.6 → 0.31.7

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

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

@@ -55,6 +55,18 @@ export default class extends Controller {
       hide: icon("eye-off-line")
     }
 
+    const existingWrapper = this.input.closest(".input-group__password");
+    if (existingWrapper) {
+      const existingButton = existingWrapper.querySelector('button[type="button"]');
+      const existingStatusText = existingWrapper.querySelector('span.sr-only[aria-live="polite"]');
+      if (existingButton && existingStatusText) {
+        this.button = existingButton;
+        this.statusText = existingStatusText;
+        this.bindListeners();
+        return;
+      }
+    }
+
     this.init();
   }
 
@@ -81,8 +93,17 @@ export default class extends Controller {
    */
   init() {
     this.createControls();
+    this.bindListeners();
+  }
+
+  bindListeners() {
+    if (this.button && this.boundToggleVisibility) {
+      this.button.removeEventListener("click", this.boundToggleVisibility);
+    }
+    if (this.form && this.boundHidePassword) {
+      this.form.removeEventListener("submit", this.boundHidePassword);
+    }
 
-    // Bind methods to maintain correct context
     this.boundToggleVisibility = this.toggleVisibility.bind(this);
     this.boundHidePassword = this.hidePassword.bind(this);
 

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

@@ -22,17 +22,7 @@ describe("PasswordToggler", () => {
     container = document.createElement("div");
     container.innerHTML = `
       <div data-controller="password-toggler" class="flex flex-row items-center gap-x-2" data-show-password="Show secret" data-hide-password="Hide Secret" data-hidden-password="Secret is hidden" data-shown-password="Secret is shown">
-        <div class="input-group__password">
-          <div class="input-group__password">
-            <button type="button" aria-controls="token_162" aria-label="Show password">
-              <svg width="0.75em" height="0.75em" role="img" aria-hidden="true">
-                <title>eye-line</title>
-                <use href="/decidim-packs/media/images/remixicon.symbol-e643e553623ffcd49f94.svg#ri-eye-line"></use>
-              </svg>
-            </button>
-            <input type="password" id="token_162" value="AXXXXXXXX" class="w-full" autocomplete="off">
-          </div>
-        </div>
+        <input type="password" id="token_162" value="AXXXXXXXX" class="w-full" autocomplete="off">
         <div class="basis-1/4">
           <button type="button" class="button button__sm button__text-primary" data-clipboard-copy="#token_162">
             <span>Copy secret</span>
@@ -204,22 +194,23 @@ describe("PasswordToggler", () => {
     });
   });
 
-  describe("integration with existing markup", () => {
-    it("works with existing button structure", () => {
-      const existingButton = passwordElement.querySelector('button[aria-controls="token_162"]');
-      expect(existingButton).toBeTruthy();
+  describe("idempotency", () => {
+    it("does not duplicate controls on reconnect", () => {
+      controller.disconnect();
+      controller.connect();
 
-      controller.init();
+      const wrappers = passwordElement.querySelectorAll(".input-group__password");
+      const buttons = passwordElement.querySelectorAll('button[aria-controls="token_162"]');
 
-      // Should work alongside existing button
-      expect(controller.button).toBeDefined();
-      expect(controller.input.getAttribute("type")).toBe("password");
+      expect(wrappers.length).toBe(1);
+      expect(buttons.length).toBe(1);
     });
+  });
 
+  describe("integration with existing markup", () => {
     it("handles password input with existing value", () => {
       expect(controller.input.value).toBe("AXXXXXXXX");
 
-      controller.init();
       controller.showPassword();
 
       expect(controller.input.getAttribute("type")).toBe("text");

data/app/packs/src/decidim/direct_uploads/upload_modal.js

@@ -253,7 +253,8 @@ export default class UploadModal {
   }
 
   setProgressBar(name, value) {
-    const item = Array.from(this.uploadItems.querySelectorAll("[data-filename]")).find((el) => el.dataset.filename === name);
+    const items = Array.from(this.uploadItems.querySelectorAll("[data-filename]"));
+    const item = items.filter((el) => el.dataset.filename === name).pop();
     if (item) {
       item.querySelector("progress").value = value;
     }

data/app/packs/src/decidim/map/controller.js

@@ -29,7 +29,16 @@ export default class MapController {
   }
 
   load() {
-    this.map = L.map(this.mapId);
+    const zoomControl = L.control.zoom({
+      zoomInTitle: this.config.zoomInText || "Zoom in",
+      zoomOutTitle: this.config.zoomOutText || "Zoom out"
+    });
+
+    this.map = L.map(this.mapId, {
+      zoomControl: false
+    });
+
+    this.map.addControl(zoomControl);
 
     this.map.scrollWheelZoom.disable();
 

data/app/packs/src/decidim/refactor/moved/focus_guard.js

@@ -5,14 +5,12 @@ const focusableDisableableNodes = ["BUTTON", "INPUT", "TEXTAREA", "SELECT"];
 export default class FocusGuard {
   constructor(container) {
     this.container = container;
-    this.guardedElement = null;
-    this.triggerElement = null;
+    this.stack = [];
   }
 
   trap(element, trigger) {
     this.enable();
-    this.guardedElement = element;
-    this.triggerElement = trigger;
+    this.stack.push({ element, trigger });
   }
 
   enable() {
@@ -45,14 +43,15 @@ export default class FocusGuard {
   }
 
   disable() {
-    const guards = this.container.querySelectorAll(`:scope > .${focusGuardClass}`);
-    guards.forEach((guard) => guard.remove());
+    const current = this.stack.pop();
 
-    this.guardedElement = null;
+    if (this.stack.length === 0) {
+      const guards = this.container.querySelectorAll(`:scope > .${focusGuardClass}`);
+      guards.forEach((guard) => guard.remove());
+    }
 
-    if (this.triggerElement) {
-      this.triggerElement.focus();
-      this.triggerElement = null;
+    if (current && current.trigger) {
+      current.trigger.focus();
     }
   }
 
@@ -67,12 +66,13 @@ export default class FocusGuard {
   };
 
   handleContainerFocus(guard) {
-    if (!this.guardedElement) {
+    const current = this.stack[this.stack.length - 1];
+    if (!current || !current.element) {
       guard.blur();
       return;
     }
 
-    const visibleNodes = Array.from(this.guardedElement.querySelectorAll("*")).filter((item) => {
+    const visibleNodes = Array.from(current.element.querySelectorAll("*")).filter((item) => {
       return this.isVisible(item);
     });
 

data/app/packs/src/decidim/refactor/moved/focus_guard.test.js

@@ -0,0 +1,136 @@
+/* global jest */
+
+import FocusGuard from "src/decidim/refactor/moved/focus_guard"
+
+describe("FocusGuard", () => {
+  let focusGuard = null;
+
+  beforeEach(() => {
+    document.body.innerHTML = "";
+    focusGuard = new FocusGuard(document.body);
+  });
+
+  afterEach(() => {
+    document.body.innerHTML = "";
+  });
+
+  describe("single dialog", () => {
+    it("creates focus guards on trap", () => {
+      const dialog = document.createElement("div");
+      const trigger = document.createElement("button");
+      document.body.appendChild(dialog);
+      document.body.appendChild(trigger);
+
+      focusGuard.trap(dialog, trigger);
+      const guards = document.body.querySelectorAll(".focusguard");
+      expect(guards.length).toBe(2);
+    });
+
+    it("removes focus guards and returns focus on disable", () => {
+      const dialog = document.createElement("div");
+      const trigger = document.createElement("button");
+      document.body.appendChild(dialog);
+      document.body.appendChild(trigger);
+
+      focusGuard.trap(dialog, trigger);
+      focusGuard.disable();
+
+      const guards = document.body.querySelectorAll(".focusguard");
+      expect(guards.length).toBe(0);
+      expect(document.activeElement).toBe(trigger);
+    });
+  });
+
+  describe("nested dialogs", () => {
+    it("keeps guards when inner dialog is disabled", () => {
+      const outerDialog = document.createElement("div");
+      const outerTrigger = document.createElement("button");
+      const innerDialog = document.createElement("div");
+      const innerTrigger = document.createElement("button");
+
+      document.body.appendChild(outerDialog);
+      document.body.appendChild(outerTrigger);
+      document.body.appendChild(innerDialog);
+      document.body.appendChild(innerTrigger);
+
+      focusGuard.trap(outerDialog, outerTrigger);
+      focusGuard.trap(innerDialog, innerTrigger);
+
+      expect(document.body.querySelectorAll(".focusguard").length).toBe(2);
+
+      focusGuard.disable();
+
+      expect(document.body.querySelectorAll(".focusguard").length).toBe(2);
+      expect(document.activeElement).toBe(innerTrigger);
+    });
+
+    it("removes guards when outer dialog is disabled last", () => {
+      const outerDialog = document.createElement("div");
+      const outerTrigger = document.createElement("button");
+      const innerDialog = document.createElement("div");
+      const innerTrigger = document.createElement("button");
+
+      document.body.appendChild(outerDialog);
+      document.body.appendChild(outerTrigger);
+      document.body.appendChild(innerDialog);
+      document.body.appendChild(innerTrigger);
+
+      focusGuard.trap(outerDialog, outerTrigger);
+      focusGuard.trap(innerDialog, innerTrigger);
+
+      focusGuard.disable();
+      focusGuard.disable();
+
+      expect(document.body.querySelectorAll(".focusguard").length).toBe(0);
+      expect(document.activeElement).toBe(outerTrigger);
+    });
+
+    it("cycles focus to the current top dialog when a guard receives focus", () => {
+      jest.spyOn(focusGuard, "isVisible").mockReturnValue(true);
+
+      const outerDialog = document.createElement("div");
+      const outerInput = document.createElement("input");
+      outerDialog.appendChild(outerInput);
+
+      const innerDialog = document.createElement("div");
+      const innerInput = document.createElement("input");
+      innerDialog.appendChild(innerInput);
+
+      document.body.appendChild(outerDialog);
+      document.body.appendChild(innerDialog);
+
+      focusGuard.trap(outerDialog, null);
+      focusGuard.trap(innerDialog, null);
+
+      const endGuard = document.body.querySelector('.focusguard[data-position="end"]');
+      endGuard.focus();
+
+      expect(document.activeElement).toBe(innerInput);
+    });
+
+    it("cycles focus backward to the current top dialog when the start guard receives focus", () => {
+      jest.spyOn(focusGuard, "isVisible").mockReturnValue(true);
+
+      const outerDialog = document.createElement("div");
+      const outerInput = document.createElement("input");
+      outerDialog.appendChild(outerInput);
+
+      const innerDialog = document.createElement("div");
+      const innerInput = document.createElement("input");
+      const innerButton = document.createElement("button");
+      innerDialog.appendChild(innerInput);
+      innerDialog.appendChild(innerButton);
+
+      document.body.appendChild(outerDialog);
+      document.body.appendChild(innerDialog);
+
+      focusGuard.trap(outerDialog, null);
+      focusGuard.trap(innerDialog, null);
+
+      const startGuard = document.body.querySelector('.focusguard[data-position="start"]');
+      startGuard.focus();
+
+      expect(document.activeElement).toBe(innerButton);
+    });
+  });
+});

data/app/packs/stylesheets/decidim/_cards.scss

@@ -55,7 +55,7 @@
     }
 
     &-content {
-      @apply flex flex-col gap-2.5;
+      @apply flex flex-col gap-2.5 min-w-0 break-words;
     }
 
     &-title {

data/app/packs/stylesheets/decidim/_cookies.scss

@@ -65,17 +65,25 @@
     &-panel {
       @apply divide-y divide-gray-3 [&>*]:py-4 [&>p]:text-gray-2;
 
-      &__tr {
-        @apply flex items-center justify-between rounded first-of-type:bg-background-4;
+      table {
+        @apply w-full border-collapse;
       }
 
-      &__th {
-        @apply w-1/4 p-2 bg-background-4 text-gray-2 font-bold text-sm;
+      thead tr {
+        @apply bg-background-4;
       }
 
-      &__td {
+      th {
+        @apply w-1/4 p-2 text-gray-2 font-bold text-sm text-left;
+      }
+
+      td {
         @apply w-1/4 p-2 text-gray-2 text-xs;
       }
+
+      tbody tr {
+        @apply border-b border-gray-3;
+      }
     }
 
     &-toggle {

data/app/packs/stylesheets/decidim/_documents.scss

@@ -3,7 +3,7 @@
     @apply divide-y divide-background [&>*]:py-4 first:[&>*]:pt-0 last:[&>*]:pb-0;
 
     > * {
-      @apply flex items-center justify-between gap-4;
+      @apply grid sm:flex items-center justify-between gap-4;
     }
   }
 

data/app/packs/stylesheets/decidim/_footer.scss

@@ -3,12 +3,44 @@ footer {
     @apply bg-gray-4;
 
     &__top {
-      @apply hidden lg:flex flex-row gap-8 container py-10;
+      @apply flex flex-col lg:flex-row gap-0 lg:gap-8 container py-10;
 
       .prose a,
       .prose strong {
         @apply text-white;
       }
+
+      .footer__nav {
+        @apply border-b border-white/20 lg:border-0;
+
+        ul {
+          @apply space-y-4 break-inside-avoid mb-4;
+
+          li a {
+            @apply font-semibold underline decoration-1 underline-offset-1;
+          }
+        }
+
+        > [data-controls] {
+          @apply flex items-center justify-between w-full py-4 lg:pointer-events-none lg:cursor-default text-left text-white font-semibold;
+
+          svg {
+            @apply w-4 h-4 fill-current transition-transform lg:hidden;
+          }
+
+          &[aria-expanded="true"] svg {
+            @apply rotate-180;
+          }
+        }
+
+        [id*="panel"][aria-hidden="true"] {
+          @apply hidden lg:block;
+        }
+
+        [id*="panel"][aria-hidden="false"] {
+          @apply block;
+        }
+      }
     }
 
     &__down {

data/app/packs/stylesheets/decidim/_participatory_spaces.scss

@@ -49,7 +49,7 @@
         }
 
         &__collection-content {
-          @apply w-auto ml-6 my-4 pl-4 lg:pl-8 border-l border-[#D3D5D9];
+          @apply w-auto sm:ml-6 sm:my-4 sm:pl-4 lg:pl-8 sm:border-l sm:border-[#D3D5D9];
 
           p {
             @apply pt-4;

data/app/presenters/decidim/footer_menu_presenter.rb

@@ -3,10 +3,8 @@
 module Decidim
   # A presenter to render footer menu
   class FooterMenuPresenter < MenuPresenter
-    def render
-      content_tag(:nav, :role => "navigation", "aria-label" => @options[:label]) do
-        safe_join([content_tag(:h2, @options[:label], class: "h5 mb-4"), render_menu])
-      end
+    def render_menu_items
+      render_menu
     end
   end
 end

data/app/resolvers/decidim/meta_image_url_resolver.rb

@@ -79,6 +79,9 @@ module Decidim
         image_url = image_element["src"]
         next if image_url.blank?
 
+        blob = find_blob_by_id(image_url.split("/").last)
+        return blob if blob.present?
+
         blob = find_blob_by_key(image_url.split("/").second_to_last)
         return blob if blob.present?
       end
@@ -120,6 +123,10 @@ module Decidim
       ActiveStorage::Blob.find_signed(blob_key) if blob_key.present?
     end
 
+    def find_blob_by_id(blob_id)
+      ActiveStorage::Blob.find_by(id: blob_id) if blob_id.present?
+    end
+
     def blob_from_attached_file(file)
       return unless file.respond_to?(:attached?) && file.attached?
 

data/app/views/decidim/searches/_filters.html.erb

@@ -16,7 +16,7 @@
         </button>
       <% end %>
     </div>
-    <button id="dropdown-trigger-search" data-controller="dropdown" data-target="dropdown-menu-search" data-auto-close="true" aria-expanded="true">
+    <button id="dropdown-trigger-search" data-controller="dropdown" data-target="dropdown-menu-search" data-auto-close="true">
       <%= content_tag :span, t("decidim.searches.filters_small_view.filter_by"), class: "#{"is-active" if params.dig(:filter, :with_resource_type) == nil}" %>
       <% @blocks.each do |elements| %>
         <% elements.each do |type, results| %>

data/app/views/layouts/decidim/footer/_main.html.erb

@@ -3,7 +3,7 @@
     <div class="lg:w-1/3">
       <%= render partial: "layouts/decidim/footer/main_intro" %>
     </div>
-    <div class="lg:w-2/3 grid grid-cols-1 gap-x-4 gap-y-10 lg:grid-cols-4 text-md text-white">
+    <div class="lg:w-2/3 grid grid-cols-1 gap-x-4 lg:grid-cols-4 text-md text-white">
       <%= render partial: "layouts/decidim/footer/main_links" %>
     </div>
   </div>

data/app/views/layouts/decidim/footer/_main_links.html.erb

@@ -1,31 +1,59 @@
-<%= footer_menu.render %>
+<div data-controller="accordion" data-multiselectable="true" class="contents">
+  <nav class="footer__nav" role="navigation" aria-label="<%= t("layouts.decidim.footer.decidim_title") %>">
+    <button type="button" id="panel-footer-menu-trigger" data-controls="panel-footer-menu" data-open-lg="true">
+      <span class="h4"><%= t("layouts.decidim.footer.decidim_title") %></span>
+      <%= icon "arrow-down-s-line" %>
+    </button>
+    <div id="panel-footer-menu" aria-hidden="true">
+      <%= footer_menu.render_menu_items %>
+    </div>
+  </nav>
 
-<nav role="navigation" aria-label="<%= t("layouts.decidim.user_menu.profile") %>">
-  <h2 class="h4 mb-4"><%= t("layouts.decidim.user_menu.profile") %></h2>
-  <ul class="space-y-4 break-inside-avoid">
-    <% if current_user %>
-      <li class="font-semibold underline"><%= link_to t("layouts.decidim.user_menu.configuration"), decidim.account_path %></li>
-      <li class="font-semibold underline"><%= link_to t("layouts.decidim.user_menu.public_profile"), decidim.profile_path(current_user.nickname) %></li>
-      <li class="font-semibold underline"><%= link_to t("layouts.decidim.user_menu.notifications"), decidim.notifications_path %></li>
-      <li class="font-semibold underline"><%= link_to t("layouts.decidim.user_menu.conversations"), decidim.conversations_path %></li>
-    <% else %>
-      <% if current_organization.sign_up_enabled? %>
-        <li class="font-semibold underline"><%= link_to t("layouts.decidim.footer.sign_up"), decidim.new_user_registration_path %></li>
-      <% end %>
-      <li class="font-semibold underline"><%= link_to t("layouts.decidim.footer.log_in"), decidim.new_user_session_path %></li>
-    <% end %>
-  </ul>
-</nav>
+  <nav class="footer__nav" role="navigation" aria-label="<%= t("layouts.decidim.user_menu.profile") %>">
+    <button type="button" id="panel-profile-trigger" data-controls="panel-profile" data-open-lg="true">
+      <span class="h4"><%= t("layouts.decidim.user_menu.profile") %></span>
+      <%= icon "arrow-down-s-line" %>
+    </button>
+    <div id="panel-profile" aria-hidden="true">
+      <ul>
+        <% if current_user %>
+          <li><%= link_to t("layouts.decidim.user_menu.configuration"), decidim.account_path %></li>
+          <li><%= link_to t("layouts.decidim.user_menu.public_profile"), decidim.profile_path(current_user.nickname) %></li>
+          <li><%= link_to t("layouts.decidim.user_menu.notifications"), decidim.notifications_path %></li>
+          <li><%= link_to t("layouts.decidim.user_menu.conversations"), decidim.conversations_path %></li>
+        <% else %>
+          <% if current_organization.sign_up_enabled? %>
+            <li><%= link_to t("layouts.decidim.footer.sign_up"), decidim.new_user_registration_path %></li>
+          <% end %>
+          <li><%= link_to t("layouts.decidim.footer.log_in"), decidim.new_user_session_path %></li>
+        <% end %>
+      </ul>
+    </div>
+  </nav>
 
-<nav role="navigation" aria-label="<%= t("layouts.decidim.footer.resources") %>">
-  <h2 class="h4 mb-4"><%= t("layouts.decidim.footer.resources") %></h2>
-  <ul class="space-y-4 break-inside-avoid">
-    <li class="font-semibold underline"><%= link_to t("decidim.profiles.show.activity"), decidim.last_activities_path %></li>
-    <% if Decidim.module_installed?(:meetings) %>
-      <li class="font-semibold underline"><%= link_to t("decidim.pages.home.extended.meetings"), Decidim::Meetings::DirectoryEngine.routes.url_helpers.root_path %></li>
-    <% end %>
-    <li class="font-semibold underline"><%= link_to t("layouts.decidim.footer.open_data"), decidim.open_data_path %></li>
-  </ul>
-</nav>
+  <nav class="footer__nav" role="navigation" aria-label="<%= t("layouts.decidim.footer.resources") %>">
+    <button type="button" id="panel-resources-trigger" data-controls="panel-resources" data-open-lg="true">
+      <span class="h4"><%= t("layouts.decidim.footer.resources") %></span>
+      <%= icon "arrow-down-s-line" %>
+    </button>
+    <div id="panel-resources" aria-hidden="true">
+      <ul>
+        <li><%= link_to t("decidim.profiles.show.activity"), decidim.last_activities_path %></li>
+        <% if Decidim.module_installed?(:meetings) %>
+          <li><%= link_to t("decidim.pages.home.extended.meetings"), Decidim::Meetings::DirectoryEngine.routes.url_helpers.root_path %></li>
+        <% end %>
+        <li><%= link_to t("layouts.decidim.footer.open_data"), decidim.open_data_path %></li>
+      </ul>
+    </div>
+  </nav>
 
-<%= cell("decidim/footer_topics", nil) %>
+  <nav class="footer__nav" role="navigation" aria-label="<%= t("layouts.decidim.footer.help") %>">
+    <button type="button" id="panel-help-trigger" data-controls="panel-help" data-open-lg="true">
+      <span class="h4"><%= t("layouts.decidim.footer.help") %></span>
+      <%= icon "arrow-down-s-line" %>
+    </button>
+    <div id="panel-help" aria-hidden="true">
+      <%= cell("decidim/footer_topics", nil) %>
+    </div>
+  </nav>
+</div>