decidim-core 0.30.6 → 0.30.8

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

@@ -0,0 +1,225 @@
+/* global jest */
+
+jest.mock("src/decidim/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 DOMContentLoaded 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] === "DOMContentLoaded"
+      );
+      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/datepicker/datepicker_functions.js

@@ -1,5 +1,31 @@
 // Utility helper functions for the date and time picker functionality
 
+export const adjustPickerPosition = (input, datePickerContainer, selector) => {
+  const parent = input.closest(selector);
+
+  if (getComputedStyle(parent).position === "static") {
+    parent.style.position = "relative";
+  }
+
+  const rect = input.getBoundingClientRect();
+  const calendarHeight = datePickerContainer.offsetHeight;
+  const spaceAbove = rect.top;
+  const spaceBelow = window.innerHeight - rect.bottom;
+  const openBelow = spaceBelow >= calendarHeight || spaceBelow >= spaceAbove;
+
+  if (openBelow) {
+    // Open below
+    datePickerContainer.style.top = `${input.offsetHeight}px`;
+    datePickerContainer.style.bottom = "";
+  } else {
+    // Open above
+    datePickerContainer.style.top = "";
+    datePickerContainer.style.bottom = `${input.offsetHeight}px`;
+  }
+
+  datePickerContainer.style.right = "0px";
+};
+
 export const setHour = (value, format) => {
   const hour = value.split(":")[0];
   if (format === 12) {

data/app/packs/src/decidim/datepicker/generate_datepicker.js

@@ -1,6 +1,6 @@
 /* eslint-disable require-jsdoc */
 import icon from "src/decidim/icon"
-import { dateToPicker, formatDate, displayDate, formatTime, calculateDatepickerPos } from "src/decidim/datepicker/datepicker_functions"
+import { dateToPicker, formatDate, displayDate, formatTime, calculateDatepickerPos, adjustPickerPosition } from "src/decidim/datepicker/datepicker_functions"
 import { dateKeyDownListener, dateBeforeInputListener } from "src/decidim/datepicker/datepicker_listeners"
 import { getDictionary } from "src/decidim/i18n"
 
@@ -130,6 +130,7 @@ export default function generateDatePicker(input, row, formats) {
     };
     pickedDate = null;
     datePickerContainer.style.display = "block";
+    adjustPickerPosition(date, datePickerContainer, ".datepicker__date-column");
 
     document.addEventListener("click", datePickerDisplay);
 

data/app/packs/src/decidim/datepicker/generate_timepicker.js

@@ -1,6 +1,8 @@
 /* eslint-disable require-jsdoc */
+/* eslint max-lines: ["error", 310] */
+
 import icon from "src/decidim/icon"
-import { changeHourDisplay, changeMinuteDisplay, formatDate, hourDisplay, minuteDisplay, formatTime, setHour, setMinute, updateTimeValue, updateInputValue } from "src/decidim/datepicker/datepicker_functions"
+import { changeHourDisplay, changeMinuteDisplay, formatDate, hourDisplay, minuteDisplay, formatTime, setHour, setMinute, updateTimeValue, updateInputValue, adjustPickerPosition } from "src/decidim/datepicker/datepicker_functions"
 import { timeKeyDownListener, timeBeforeInputListener } from "src/decidim/datepicker/datepicker_listeners";
 import { getDictionary } from "src/decidim/i18n";
 
@@ -21,6 +23,10 @@ export default function generateTimePicker(input, row, formats) {
   clock.setAttribute("type", "button");
   clock.setAttribute("aria-label", input.dataset.buttonTimeLabel);
 
+  if (input.attributes.disabled) {
+    clock.setAttribute("disabled", input.attributes.disabled);
+  };
+
   timeColumn.appendChild(time);
   timeColumn.appendChild(clock);
 
@@ -270,6 +276,8 @@ export default function generateTimePicker(input, row, formats) {
     event.preventDefault();
     timePicker.style.display = "block";
     document.addEventListener("click", timePickerDisplay);
+    adjustPickerPosition(time, timePicker, ".datepicker__time-column")
+
     hours.value = hourDisplay(hour);
     minutes.value = minuteDisplay(minute);
   });

data/app/packs/src/decidim/datepicker/test/datepicker_functions_adjust_picker_position.test.js

@@ -0,0 +1,234 @@
+/* global jest */
+
+import { adjustPickerPosition } from "src/decidim/datepicker/datepicker_functions";
+
+describe("adjustDatePickerPosition", () => {
+  let input = null;
+  let parent = null;
+  let datePickerContainer = null;
+
+  let originalInnerHeight = window.innerHeight;
+
+  beforeEach(() => {
+    // Setup DOM structure
+    parent = document.createElement("div");
+    parent.className = "datepicker__date-column";
+    document.body.appendChild(parent);
+
+    input = document.createElement("input");
+    Reflect.defineProperty(input, "offsetHeight", {
+      configurable: true,
+      value: 40
+    });
+    parent.appendChild(input);
+
+    datePickerContainer = document.createElement("div");
+    datePickerContainer.className = "datepicker__container";
+    parent.appendChild(datePickerContainer);
+
+    // Mock offsetHeight for calendar
+    Reflect.defineProperty(datePickerContainer, "offsetHeight", {
+      configurable: true,
+      value: 300
+    });
+
+    // store original viewport height
+    originalInnerHeight = window.innerHeight;
+  });
+
+  afterEach(() => {
+    document.body.removeChild(parent);
+
+    Reflect.defineProperty(window, "innerHeight", {
+      writable: true,
+      configurable: true,
+      value: originalInnerHeight
+    });
+
+    jest.restoreAllMocks();
+  });
+
+  it("sets parent position to relative when static", () => {
+    parent.style.position = "static";
+
+    adjustPickerPosition(input, datePickerContainer, ".datepicker__date-column");
+
+    expect(parent.style.position).toBe("relative");
+  });
+
+  it("does not change parent position when already positioned", () => {
+    parent.style.position = "absolute";
+
+    adjustPickerPosition(input, datePickerContainer, ".datepicker__date-column");
+
+    expect(parent.style.position).toBe("absolute");
+  });
+
+  it("opens below when sufficient space below", () => {
+    jest.spyOn(input, "getBoundingClientRect").mockReturnValue({
+      top: 100,
+      bottom: 140
+    });
+
+    Reflect.defineProperty(window, "innerHeight", {
+      writable: true,
+      configurable: true,
+      value: 800
+    });
+
+    adjustPickerPosition(input, datePickerContainer, ".datepicker__date-column");
+
+    expect(datePickerContainer.style.top).toBe("40px");
+    expect(datePickerContainer.style.bottom).toBe("");
+  });
+
+  it("opens above when insufficient space below", () => {
+    jest.spyOn(input, "getBoundingClientRect").mockReturnValue({
+      top: 400,
+      bottom: 440
+    });
+
+    Reflect.defineProperty(window, "innerHeight", {
+      writable: true,
+      configurable: true,
+      value: 500
+    });
+
+    adjustPickerPosition(input, datePickerContainer, ".datepicker__date-column");
+
+    expect(datePickerContainer.style.top).toBe("");
+    expect(datePickerContainer.style.bottom).toBe("40px");
+  });
+
+  it("prefers opening below when space is equal above and below", () => {
+    jest.spyOn(input, "getBoundingClientRect").mockReturnValue({
+      top: 250,
+      bottom: 290
+    });
+
+    Reflect.defineProperty(window, "innerHeight", {
+      writable: true,
+      configurable: true,
+      value: 540
+    });
+
+    adjustPickerPosition(input, datePickerContainer, ".datepicker__date-column");
+
+    expect(datePickerContainer.style.top).toBe("40px");
+    expect(datePickerContainer.style.bottom).toBe("");
+  });
+
+  it("always sets right position to 0px", () => {
+    jest.spyOn(input, "getBoundingClientRect").mockReturnValue({
+      top: 100,
+      bottom: 140
+    });
+
+    adjustPickerPosition(input, datePickerContainer, ".datepicker__date-column");
+
+    expect(datePickerContainer.style.right).toBe("0px");
+  });
+});
+
+
+describe("adjustTimePickerPosition", () => {
+  let input = null;
+  let parent = null;
+  let timePicker = null;
+
+  let originalInnerHeight = window.innerHeight;
+
+  beforeEach(() => {
+    parent = document.createElement("div");
+    parent.className = "datepicker__time-column";
+    document.body.appendChild(parent);
+
+    input = document.createElement("input");
+    Reflect.defineProperty(input, "offsetHeight", {
+      configurable: true,
+      value: 30
+    });
+    parent.appendChild(input);
+
+    timePicker = document.createElement("div");
+    timePicker.className = "timepicker__container";
+    parent.appendChild(timePicker);
+
+    Reflect.defineProperty(timePicker, "offsetHeight", {
+      configurable: true,
+      value: 200
+    });
+
+    // store original value before any test mutates it
+    originalInnerHeight = window.innerHeight;
+  });
+
+  afterEach(() => {
+    // restore DOM
+    document.body.removeChild(parent);
+
+    // restore window.innerHeight (fix for CodeRabbit warning)
+    Reflect.defineProperty(window, "innerHeight", {
+      writable: true,
+      configurable: true,
+      value: originalInnerHeight
+    });
+
+    jest.restoreAllMocks();
+  });
+
+  it("sets parent position to relative when static", () => {
+    parent.style.position = "static";
+
+    adjustPickerPosition(input, timePicker, ".datepicker__time-column");
+
+    expect(parent.style.position).toBe("relative");
+  });
+
+  it("opens below when there is enough space", () => {
+    jest.spyOn(input, "getBoundingClientRect").mockReturnValue({
+      top: 100,
+      bottom: 130
+    });
+
+    Reflect.defineProperty(window, "innerHeight", {
+      writable: true,
+      configurable: true,
+      value: 700
+    });
+
+    adjustPickerPosition(input, timePicker, ".datepicker__time-column");
+
+    expect(timePicker.style.top).toBe("30px");
+    expect(timePicker.style.bottom).toBe("");
+  });
+
+  it("opens above when there is not enough space below", () => {
+    jest.spyOn(input, "getBoundingClientRect").mockReturnValue({
+      top: 400,
+      bottom: 430
+    });
+
+    Reflect.defineProperty(window, "innerHeight", {
+      writable: true,
+      configurable: true,
+      value: 500
+    });
+
+    adjustPickerPosition(input, timePicker, ".datepicker__time-column");
+
+    expect(timePicker.style.top).toBe("");
+    expect(timePicker.style.bottom).toBe("30px");
+  });
+
+  it("always aligns to the right", () => {
+    jest.spyOn(input, "getBoundingClientRect").mockReturnValue({
+      top: 100,
+      bottom: 130
+    });
+
+    adjustPickerPosition(input, timePicker, ".datepicker__time-column");
+
+    expect(timePicker.style.right).toBe("0px");
+  });
+});

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

@@ -79,7 +79,7 @@ const updateActiveUploads = (modal) => {
     const template = `
       <div ${attachmentIdOrHiddenField} data-filename="${escapeQuotes(file.name)}" data-title="${escapeQuotes(title)}">
         ${(/image/).test(file.type) && "<div><img src=\"data:,\" role=\"presentation\" /></div>" || ""}
-        <span>${escapeHtml(title)}</span>
+        <p>${escapeHtml(title)}</p>
         ${hidden}
       </div>
     `

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

@@ -78,16 +78,16 @@ export default class FocusGuard {
 
     let target = null;
     if (guard.dataset.position === "start") {
-      // Focus at the start guard, so focus the first focusable element after that
-      for (let ind = 0; ind < visibleNodes.length; ind += 1) {
+      // Focus at the start guard, so focus the last focusable element (cycle forward to end)
+      for (let ind = visibleNodes.length - 1; ind >= 0; ind -= 1) {
         if (!this.isFocusGuard(visibleNodes[ind]) && this.isFocusable(visibleNodes[ind])) {
           target = visibleNodes[ind];
           break;
         }
       }
     } else {
-      // Focus at the end guard, so focus the first focusable element after that
-      for (let ind = visibleNodes.length - 1; ind >= 0; ind -= 1) {
+      // Focus at the end guard, so focus the first focusable element (cycle back to start)
+      for (let ind = 0; ind < visibleNodes.length; ind += 1) {
         if (!this.isFocusGuard(visibleNodes[ind]) && this.isFocusable(visibleNodes[ind])) {
           target = visibleNodes[ind];
           break;

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

@@ -116,7 +116,7 @@
   }
 
   &__calendar {
-    @apply w-14 flex flex-col justify-start rounded overflow-hidden bg-background text-center;
+    @apply w-20 flex flex-col justify-start rounded overflow-hidden bg-background text-center;
 
     /* overwrite defaults */
     &-list__reset {
@@ -128,17 +128,25 @@
     }
 
     &-day {
-      @apply text-black text-2xl font-bold;
+      @apply text-black text-xl font-semibold;
     }
 
     &-year {
-      @apply text-black text-xs;
+      @apply text-black text-xs mb-0.5;
     }
 
     &-month,
     &-day,
     &-year {
-      @apply inline-flex items-center justify-evenly empty:[&>div]:hidden;
+      @apply inline-flex items-center justify-center empty:[&>div]:hidden;
+    }
+
+    &-separator {
+      @apply mx-2 font-normal text-sm;
+    }
+
+    .card__list-content {
+      @apply mt-0.5;
     }
   }
 

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

@@ -1,5 +1,5 @@
 .flash {
-  @apply flex justify-start gap-4 border-l-4 border-secondary my-4 p-4 bg-secondary/5 break-all;
+  @apply flex justify-start gap-4 border-l-4 border-secondary my-4 p-4 bg-secondary/5;
 
   &__icon {
     svg {

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

@@ -131,7 +131,7 @@
         @apply w-full rounded bg-background flex items-center justify-center py-4 [&_img]:object-cover [&_img]:h-[200px];
       }
 
-      span {
+      p {
         @apply text-sm text-gray-2 mx-auto w-full break-all mb-2;
       }
     }

data/app/presenters/decidim/menu_item_presenter.rb

@@ -26,7 +26,7 @@ module Decidim
     delegate :content_tag, :safe_join, :link_to, :active_link_to_class, :is_active_link?, :icon, to: :@view
 
     def render
-      content_tag :li, role: :menuitem, class: link_wrapper_classes do
+      content_tag :li, role: menuitem_role, class: link_wrapper_classes do
         output = if url == "#"
                    [content_tag(:span, composed_label, class: "sidebar-menu__item-disabled")]
                  else
@@ -62,6 +62,12 @@ module Decidim
       [@options.element_class, active_class].compact.join(" ")
     end
 
+    def menuitem_role
+      return if @options.role == false
+
+      @options.role || :menuitem
+    end
+
     def active_class
       active_link_to_class(
         url,

data/app/views/decidim/devise/invitations/edit.html.erb

@@ -4,7 +4,7 @@
     <h1 class="title-decorator inline-block text-left mb-12"><%= t "devise.invitations.edit.header" %></h1>
 
     <p class="text-lg text-gray-2">
-      <%= t("devise.invitations.edit.subtitle").html_safe %>
+      <%= current_organization.users_registration_mode_disabled? ? t("devise.invitations.edit.subtitle_no_password").html_safe : t("devise.invitations.edit.subtitle").html_safe %>
     </p>
   </div>
 
@@ -16,8 +16,8 @@
 
       <%= f.text_field :nickname, help_text: t("devise.invitations.edit.nickname_help", organization: current_organization_name), required: "required", autocomplete: "nickname" %>
 
-      <% if f.object.class.require_password_on_accepting %>
-        <%= render partial: "decidim/account/password_fields", locals: { form: f, user: :user } %>
+      <% unless current_organization.users_registration_mode_disabled? %>
+        <%= render partial: "decidim/account/password_fields", locals: { form: f, user: resource.admin? ? :admin : :user } %>
       <% end %>
     </div>
 

data/app/views/decidim/devise/registrations/new.html.erb

@@ -34,6 +34,7 @@
       <%= f.text_field :name, help_text: t("decidim.devise.registrations.new.username_help"), autocomplete: "name", placeholder: "John Doe" %>
 
       <%= f.email_field :email, autocomplete: "email", placeholder: t("placeholder_email", scope: "decidim.devise.shared") %>
+      <span class="sr-only"><%= t("placeholder_email", scope: "decidim.devise.shared") %></span>
 
       <%= render partial: "decidim/account/password_fields", locals: { form: f, user: :user } %>
     </div>