decidim-core 0.30.1 → 0.31.0.rc1

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

@@ -0,0 +1,386 @@
+/* eslint max-lines: ["error", 390] */
+
+/* global global, jest */
+/**
+ * @jest-environment jsdom
+ */
+
+import { Application } from "@hotwired/stimulus"
+import controllerController from "src/decidim/controllers/user_registration_form/controller";
+import FormValidatorController from "src/decidim/controllers/form_validator/controller";
+
+describe("controller", () => {
+  let application = null;
+  let formElement = null;
+  let modalElement = null;
+  let newsletterCheckbox = null;
+  let mockDecidimDialogs = null;
+  let controller = null;
+  let mockFormSubmit = null;
+
+  beforeEach(() => {
+    // Set up Stimulus application
+    application = Application.start();
+    application.register("user-registration-form", controllerController);
+    application.register("form-validator", FormValidatorController);
+
+    // Mock HTMLFormElement.prototype.submit
+    mockFormSubmit = jest.fn();
+    if (!HTMLFormElement.prototype.submit.mockImplementation) {
+      Reflect.defineProperty(HTMLFormElement.prototype, "requestSubmit", {
+        value: mockFormSubmit,
+        writable: true,
+        configurable: true
+      });
+    }
+
+    // Set up DOM elements
+    document.body.innerHTML = `<div>
+    <form data-controller="user-registration-form" class="new_user" id="register-form" novalidate="novalidate" action="/users" accept-charset="UTF-8" method="post">
+      <input type="hidden" name="authenticity_token" value="aEGKlrfJBP1X5H5ReIy9WRCY9pAa-7JLZ-Vn1ztkH-JVXJKKRMG9ZnnDrJy4aC-MdQnkeQj4rqoItoljw14Kgw" autocomplete="off" />
+      <div class="field hidden">
+        <label for="field">If you are human, ignore this field</label>
+        <input type="text" name="field" id="field" autocomplete="off" tabindex="-1" />
+      </div>
+      <div class="form__wrapper pb-12">
+        <label for="registration_user_name">Your name <span title="Required field" data-tooltip="true" data-disable-hover="false" data-keep-on-hover="true" class="label-required">
+            <span aria-hidden="true">*</span>
+            <span class="sr-only">Required field</span>
+          </span>
+          <span class="help-text">Public name that appears on your posts. With the aim of guaranteeing the anonymity, can be any name.</span>
+          <input required="required" autocomplete="name" placeholder="John Doe" type="text" name="user[name]" id="registration_user_name" />
+          <span class="form-error">There is an error in this field.</span>
+        </label>
+        <label for="registration_user_email">Your email <span title="Required field" data-tooltip="true" data-disable-hover="false" data-keep-on-hover="true" class="label-required">
+            <span aria-hidden="true">*</span>
+            <span class="sr-only">Required field</span>
+          </span>
+          <input required="required" autocomplete="email" placeholder="hi@example.org" type="email" name="user[email]" id="registration_user_email" />
+          <span class="form-error">There is an error in this field.</span>
+        </label>
+        <div data-controller="password-toggler" class="user-password" data-show-password="Show password" data-hide-password="Hide password" data-hidden-password="Your password is hidden" data-shown-password="Your password is shown">
+          <label for="registration_user_password">Password <span title="Required field" data-tooltip="true" data-disable-hover="false" data-keep-on-hover="true" class="label-required">
+              <span aria-hidden="true">*</span>
+              <span class="sr-only">Required field</span>
+            </span>
+          </label>
+          <span class="help-text">10 characters minimum, must not be too common (e.g. 123456) and must be different from your nickname and your email.</span>
+          <input pattern="^(.|[
+
+]){10,256}$" required="required" minlength="10" maxlength="256" autocomplete="new-password" placeholder="**********" class="input-group-field" size="256" type="password" name="user[password]" id="registration_user_password" />
+          <span class="form-error">There is an error in this field.</span>
+        </div>
+      </div>
+      <div id="card__tos" class="form__wrapper-block border-y-2">
+        <h2 class="h4">Terms of Service</h2>
+        <div> Please add meaningful summary to the Terms of service static page on the admin dashboard. </div>
+        <label class="form__wrapper-checkbox-label" for="registration_user_tos_agreement">
+          <input name="user[tos_agreement]" type="hidden" value="0" autocomplete="off" />
+          <input type="checkbox" value="1" name="user[tos_agreement]" id="registration_user_tos_agreement" />By signing up you agree to <a href="/pages/terms-of-service">the terms of service</a>. </label>
+      </div>
+      <div id="card__newsletter" class="form__wrapper-block">
+        <h2 class="h4">Contact permission</h2>
+        <label class="form__wrapper-checkbox-label" for="registration_user_newsletter">
+          <input name="user[newsletter]" type="hidden" value="0" autocomplete="off" />
+          <input type="checkbox" value="1" name="user[newsletter]" id="registration_user_newsletter" />Receive an occasional newsletter with relevant information </label>
+      </div>
+      <div class="form__wrapper-block">
+        <button type="submit" class="button button__lg button__secondary"> Create an account </button>
+      </div>
+      <div class="login__links">
+        <a href="/users/confirmation/new">Did not receive confirmation instructions?</a>
+        <a href="/users/unlock/new">Did not receive unlock instructions?</a>
+      </div>
+    </form>
+    <div id="sign-up-newsletter-modal" data-dialog="sign-up-newsletter-modal">
+      <div id="sign-up-newsletter-modal-content">
+        <button type="button" data-dialog-close="sign-up-newsletter-modal" data-dialog-closable="" aria-label="Close modal">&times</button>
+        <div data-dialog-container>
+          <svg width="1em" height="1em" role="img" aria-hidden="true">
+            <use href="/decidim-packs/media/images/remixicon.symbol-e643e553623ffcd49f94.svg#ri-newspaper-line"></use>
+          </svg>
+          <h2 id="dialog-title-sign-up-newsletter-modal" data-dialog-title>Newsletter notifications</h2>
+          <div id="dialog-desc-sign-up-newsletter-modal" class="space-y-4">
+            <p>Hey, are you sure you do not want to receive a newsletter? Please consider again ticking the newsletter checkbox below. It is very important for us that you can receive occasional emails to make important announcements, you can always change this on your notifications settings page.</p>
+            <p>If you do not tick the box you might be missing relevant information about new participatory opportunities within the platform. <br> If you still want to avoid receiving newsletters, we perfectly understand your decision. </p>
+            <p>Thanks for reading this!</p>
+          </div>
+        </div>
+        <div data-dialog-actions>
+          <button class="button button__sm md:button__lg button__transparent-secondary" data-check="false"> Keep unchecked </button>
+          <button class="button button__sm md:button__lg button__secondary" data-check="true"> Check and continue </button>
+        </div>
+      </div>
+    </div>
+  </div>
+`;
+
+    // Mock Decidim dialog system
+    mockDecidimDialogs = {
+      "sign-up-newsletter-modal": {
+        open: jest.fn(),
+        close: jest.fn()
+      }
+    };
+
+    global.window = global.window || {};
+    global.window.Decidim = {
+      currentDialogs: mockDecidimDialogs
+    };
+
+    formElement = document.getElementById("register-form");
+    modalElement = document.getElementById("sign-up-newsletter-modal");
+    newsletterCheckbox = document.querySelector('input[type="checkbox"][name="user[newsletter]"]')
+
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        controller = application.getControllerForElementAndIdentifier(formElement, "user-registration-form");
+        resolve();
+      }, 0);
+    });
+  });
+
+  afterEach(() => {
+    application.stop();
+    document.body.innerHTML = "";
+    Reflect.deleteProperty(window, "Decidim");
+    jest.clearAllMocks();
+  });
+
+  describe("constructor", () => {
+    it("should initialize with correct properties", () => {
+      expect(controller.element).toBe(formElement);
+      expect(controller.modal).toBe(modalElement);
+      expect(controller.newsletterSelector).toBe('input[type="checkbox"][name="user[newsletter]"]');
+    });
+  });
+
+  describe("inheritance behavior", () => {
+    it("should inherit all methods from BaseRegistrationForm", () => {
+      // Test that all BaseRegistrationForm methods are available
+      expect(typeof controller.setupFormEventListeners).toBe("function");
+      expect(typeof controller.setupModalEventListeners).toBe("function");
+      expect(typeof controller.handleFormSubmission).toBe("function");
+      expect(typeof controller.processNewsletterSelection).toBe("function");
+      expect(typeof controller.getNewsletterCheckbox).toBe("function");
+      expect(typeof controller.isNewsletterChecked).toBe("function");
+      expect(typeof controller.setNewsletterCheckbox).toBe("function");
+      expect(typeof controller.submit).toBe("function");
+      expect(typeof controller.getModalContinueFlag).toBe("function");
+      expect(typeof controller.setModalContinueFlag).toBe("function");
+      expect(typeof controller.openModal).toBe("function");
+      expect(typeof controller.closeModal).toBe("function");
+    });
+
+    it("should inherit newsletter selector from parent", () => {
+      expect(controller.newsletterSelector).toBe('input[type="checkbox"][name="user[newsletter]"]');
+    });
+  });
+
+  describe("handleFormSubmission method", () => {
+    let mockEvent = null;
+    let baseHandleFormSubmissionSpy = null;
+
+    beforeEach(() => {
+      mockEvent = {
+        preventDefault: jest.fn()
+      };
+      // Spy on the parent class method
+      baseHandleFormSubmissionSpy = jest.spyOn(controller, "handleFormSubmission");
+    });
+
+    afterEach(() => {
+      baseHandleFormSubmissionSpy.mockRestore();
+    });
+
+    it("should call parent handleFormSubmission method", () => {
+      controller.handleFormSubmission(mockEvent);
+      expect(baseHandleFormSubmissionSpy).toHaveBeenCalledWith(mockEvent);
+    });
+
+    it("should prevent submission and open modal when newsletter not checked", () => {
+      newsletterCheckbox.checked = false;
+      modalElement.dataset.continue = "false";
+      const openModalSpy = jest.spyOn(controller, "openModal");
+
+      controller.handleFormSubmission(mockEvent);
+
+      expect(mockEvent.preventDefault).toHaveBeenCalled();
+      expect(openModalSpy).toHaveBeenCalled();
+      expect(baseHandleFormSubmissionSpy).toHaveBeenCalledWith(mockEvent);
+    });
+
+    it("should allow submission when newsletter is checked", () => {
+      newsletterCheckbox.checked = true;
+      modalElement.dataset.continue = "false";
+
+      controller.handleFormSubmission(mockEvent);
+
+      expect(mockEvent.preventDefault).not.toHaveBeenCalled();
+      expect(baseHandleFormSubmissionSpy).toHaveBeenCalledWith(mockEvent);
+    });
+
+    it("should allow submission when continue flag is true", () => {
+      newsletterCheckbox.checked = false;
+      modalElement.dataset.continue = "true";
+
+      controller.handleFormSubmission(mockEvent);
+
+      expect(mockEvent.preventDefault).not.toHaveBeenCalled();
+      expect(baseHandleFormSubmissionSpy).toHaveBeenCalledWith(mockEvent);
+    });
+  });
+
+  describe("inherited functionality", () => {
+    it("should properly handle newsletter checkbox operations", () => {
+      // Test inherited newsletter checkbox functionality
+      expect(controller.isNewsletterChecked()).toBe(false);
+
+      controller.setNewsletterCheckbox(true);
+      expect(newsletterCheckbox.checked).toBe(true);
+      expect(controller.isNewsletterChecked()).toBe(true);
+
+      controller.setNewsletterCheckbox(false);
+      expect(newsletterCheckbox.checked).toBe(false);
+      expect(controller.isNewsletterChecked()).toBe(false);
+    });
+
+    it("should properly handle modal operations", () => {
+      // Test inherited modal functionality
+      expect(controller.getModalContinueFlag()).toBe(false);
+
+      controller.setModalContinueFlag(true);
+      expect(controller.getModalContinueFlag()).toBe(true);
+
+      controller.openModal();
+      expect(mockDecidimDialogs["sign-up-newsletter-modal"].open).toHaveBeenCalled();
+
+      controller.closeModal();
+      expect(mockDecidimDialogs["sign-up-newsletter-modal"].close).toHaveBeenCalled();
+    });
+
+    it("should properly handle form submission", () => {
+      const submitSpy = jest.spyOn(formElement, "requestSubmit").mockImplementation(() => {});
+
+      controller.submit();
+      expect(submitSpy).toHaveBeenCalled();
+    });
+  });
+
+  describe("initialization", () => {
+    it("should initialize properly with event listeners", () => {
+      const setupFormListenersSpy = jest.spyOn(controller, "setupFormEventListeners");
+      const setupModalListenersSpy = jest.spyOn(controller, "setupModalEventListeners");
+
+      controller.disconnect();
+      controller.connect();
+
+      expect(setupFormListenersSpy).toHaveBeenCalled();
+      expect(setupModalListenersSpy).toHaveBeenCalled();
+    });
+
+    it("should not initialize twice", () => {
+      const setupFormListenersSpy = jest.spyOn(controller, "setupFormEventListeners");
+
+      controller.disconnect();
+      controller.connect();
+
+      expect(setupFormListenersSpy).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe("newsletter selection workflow", () => {
+    beforeEach(() => {
+      controller.initialize();
+    });
+
+    it("should handle complete newsletter selection workflow", () => {
+      const submitFormsSpy = jest.spyOn(controller, "submit");
+      const closeModalSpy = jest.spyOn(controller, "closeModal");
+
+      // Simulate newsletter selection
+      controller.processNewsletterSelection(true);
+
+      expect(newsletterCheckbox.checked).toBe(true);
+      expect(modalElement.dataset.continue).toBe("true");
+      expect(closeModalSpy).toHaveBeenCalled();
+      expect(submitFormsSpy).toHaveBeenCalled();
+    });
+
+    it("should handle modal button interactions", () => {
+      const processSelectionSpy = jest.spyOn(controller, "processNewsletterSelection");
+
+      // Click the accept button
+      const acceptButton = modalElement.querySelector('[data-check="true"]');
+      acceptButton.click();
+
+      expect(processSelectionSpy).toHaveBeenCalledWith(true);
+    });
+
+    it("should handle form submission with modal interaction", () => {
+      // Set up form to trigger modal
+      newsletterCheckbox.checked = false;
+      modalElement.dataset.continue = "false";
+
+      const openModalSpy = jest.spyOn(controller, "openModal");
+
+      // Simulate form submission
+      const submitEvent = new Event("submit", { bubbles: true, cancelable: true });
+      formElement.dispatchEvent(submitEvent);
+
+      expect(submitEvent.defaultPrevented).toBe(true);
+      expect(openModalSpy).toHaveBeenCalled();
+    });
+  });
+
+  describe("multiple forms handling", () => {
+    it("should handle multiple registration forms", () => {
+      const updateCheckboxesSpy = jest.spyOn(controller, "setNewsletterCheckbox");
+      const submitFormsSpy = jest.spyOn(controller, "submit");
+
+      controller.processNewsletterSelection(true);
+
+      expect(updateCheckboxesSpy).toHaveBeenCalledWith(true);
+      expect(submitFormsSpy).toHaveBeenCalled();
+    });
+  });
+
+  describe("error handling", () => {
+    it("should handle missing Decidim dialog system gracefully", () => {
+      Reflect.deleteProperty(window, "Decidim");
+
+      expect(() => controller.openModal()).not.toThrow();
+      expect(() => controller.closeModal()).not.toThrow();
+    });
+
+    it("should handle missing newsletter checkbox gracefully", () => {
+      newsletterCheckbox.remove();
+
+      expect(controller.getNewsletterCheckbox()).toBeNull();
+      expect(controller.isNewsletterChecked()).toBe(false);
+      expect(() => controller.setNewsletterCheckbox(true)).not.toThrow();
+    });
+  });
+
+  describe("integration with parent class", () => {
+    it("should maintain all parent functionality while extending", () => {
+      // Ensure parent state is maintained
+      controller.disconnect();
+      controller.connect();
+      // Ensure parent methods work correctly
+      const checkbox = controller.getNewsletterCheckbox();
+      expect(checkbox).toBe(newsletterCheckbox);
+    });
+
+    it("should properly override parent method while calling super", () => {
+      const baseHandleFormSubmissionSpy = jest.spyOn(controller, "handleFormSubmission");
+      const mockEvent = { preventDefault: jest.fn() };
+
+      controller.handleFormSubmission(mockEvent);
+
+      expect(baseHandleFormSubmissionSpy).toHaveBeenCalledWith(mockEvent);
+
+      baseHandleFormSubmissionSpy.mockRestore();
+    });
+  });
+});

data/app/packs/src/decidim/data_consent/index.js

@@ -67,7 +67,7 @@ const initDisabledIframes = (manager) => {
   }
 }
 
-document.addEventListener("DOMContentLoaded", () => {
+document.addEventListener("turbo:load", () => {
   const modal = document.querySelector("#dc-modal");
   if (!modal) {
     return;

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

@@ -11,7 +11,7 @@ export const datalistSelect = (target, callback) => {
     return;
   }
 
-  const input = target.querySelector("input[type='hidden'");
+  const input = target.querySelector("input[type='hidden']");
   const textInput = target.querySelector("input[type='text']");
   const items = target.querySelector("datalist").children;
 

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

@@ -3,7 +3,7 @@ import { defineCustomElements } from "wc-datepicker/dist/loader";
 import generateDatePicker from "src/decidim/datepicker/generate_datepicker";
 import generateTimePicker from "src/decidim/datepicker/generate_timepicker";
 import { formatInputDate, formatInputTime } from "src/decidim/datepicker/datepicker_functions";
-import { getDictionary } from "src/decidim/i18n";
+import { getDictionary } from "src/decidim/refactor/moved/i18n";
 
 export default function formDatePicker(input) {
 

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

@@ -1,8 +1,8 @@
 /* eslint-disable require-jsdoc */
-import icon from "src/decidim/icon"
+import icon from "src/decidim/refactor/moved/icon"
 import { dateToPicker, formatDate, displayDate, formatTime, calculateDatepickerPos } from "src/decidim/datepicker/datepicker_functions"
 import { dateKeyDownListener, dateBeforeInputListener } from "src/decidim/datepicker/datepicker_listeners"
-import { getDictionary } from "src/decidim/i18n"
+import { getDictionary } from "src/decidim/refactor/moved/i18n"
 
 export default function generateDatePicker(input, row, formats) {
   const i18n = getDictionary("date.buttons");
@@ -13,11 +13,13 @@ export default function generateDatePicker(input, row, formats) {
   const date = document.createElement("input");
   date.setAttribute("id", `${input.id}_date`);
   date.setAttribute("type", "text");
+  date.setAttribute("aria-label", input.dataset.dateLabel);
 
   const calendar = document.createElement("button");
   calendar.innerHTML = icon("calendar-line");
   calendar.setAttribute("class", "datepicker__calendar-button");
   calendar.setAttribute("type", "button");
+  calendar.setAttribute("aria-label", input.dataset.buttonDateLabel);
 
   dateColumn.appendChild(date);
   dateColumn.appendChild(calendar);

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

@@ -1,8 +1,8 @@
 /* eslint-disable require-jsdoc */
-import icon from "src/decidim/icon"
+import icon from "src/decidim/refactor/moved/icon"
 import { changeHourDisplay, changeMinuteDisplay, formatDate, hourDisplay, minuteDisplay, formatTime, setHour, setMinute, updateTimeValue, updateInputValue } from "src/decidim/datepicker/datepicker_functions"
 import { timeKeyDownListener, timeBeforeInputListener } from "src/decidim/datepicker/datepicker_listeners";
-import { getDictionary } from "src/decidim/i18n";
+import { getDictionary } from "src/decidim/refactor/moved/i18n";
 
 export default function generateTimePicker(input, row, formats) {
   const i18n = getDictionary("time.buttons");
@@ -13,11 +13,13 @@ export default function generateTimePicker(input, row, formats) {
   const time = document.createElement("input");
   time.setAttribute("id", `${input.id}_time`);
   time.setAttribute("type", "text");
+  time.setAttribute("aria-label", input.dataset.timeLabel);
 
   const clock = document.createElement("button");
   clock.innerHTML = icon("time-line")
   clock.setAttribute("class", "datepicker__clock-button");
   clock.setAttribute("type", "button");
+  clock.setAttribute("aria-label", input.dataset.buttonTimeLabel);
 
   timeColumn.appendChild(time);
   timeColumn.appendChild(clock);

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

@@ -1,5 +1,4 @@
 import UploadModal from "src/decidim/direct_uploads/upload_modal";
-import { truncateFilename } from "src/decidim/direct_uploads/upload_utility";
 import { escapeHtml, escapeQuotes } from "src/decidim/utilities/text";
 
 const updateModalTitle = (modal) => {
@@ -30,7 +29,7 @@ const updateActiveUploads = (modal) => {
   const [removeFiles, addFiles] = [modal.items.filter(({ removable }) => removable), modal.items.filter(({ removable }) => !removable)]
 
   addFiles.forEach((file, ix) => {
-    let title = truncateFilename(file.name, 19)
+    let title = file.name
 
     let hidden = ""
     if (file.hiddenField) {
@@ -79,8 +78,8 @@ const updateActiveUploads = (modal) => {
 
     const template = `
       <div ${attachmentIdOrHiddenField} data-filename="${escapeQuotes(file.name)}" data-title="${escapeQuotes(title)}">
-        ${(/image/).test(file.type) && `<div><img src="data:," alt="${escapeQuotes(file.name)}" /></div>` || ""}
-        <span>${escapeHtml(title)} (${escapeHtml(truncateFilename(file.name))})</span>
+        ${(/image/).test(file.type) && "<div><img src=\"data:,\" role=\"presentation\" /></div>" || ""}
+        <span>${escapeHtml(title)}</span>
         ${hidden}
       </div>
     `
@@ -116,9 +115,7 @@ const resetDropzone = (modal) => {
 
 /* NOTE: all this actions are supposed to work using the modal object,
   so, perhaps, it would be more accurate to move all the inner listeners to the UploadModal class */
-document.addEventListener("DOMContentLoaded", () => {
-  const attachmentButtons = document.querySelectorAll("button[data-upload]");
-
+export const initializeUploadFields = function(attachmentButtons) {
   attachmentButtons.forEach((attachmentButton) => {
     const modal = new UploadModal(attachmentButton);
 
@@ -142,5 +139,5 @@ document.addEventListener("DOMContentLoaded", () => {
     modal.saveButton.addEventListener("click", (event) => event.preventDefault() || updateActiveUploads(modal));
     // remove the uploaded files if cancel button is clicked
     modal.cancelButton.addEventListener("click", (event) => event.preventDefault() || modal.cleanAllFiles());
-  })
-})
+  });
+}

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

@@ -1,6 +1,5 @@
 import { Uploader } from "src/decidim/direct_uploads/uploader";
-import icon from "src/decidim/icon";
-import { truncateFilename } from "src/decidim/direct_uploads/upload_utility";
+import icon from "src/decidim/refactor/moved/icon";
 import { escapeHtml, escapeQuotes } from "src/decidim/utilities/text";
 
 const STATUS = {
@@ -42,7 +41,7 @@ export default class UploadModal {
 
     this.emptyItems = this.modal.querySelector("[data-dropzone-no-items]");
     this.uploadItems = this.modal.querySelector("[data-dropzone-items]");
-    this.input = this.dropZone.querySelector("input");
+    this.input = this.dropZone.querySelector("input[type=file]");
     this.items = []
 
     this.attachmentCounter = 0;
@@ -171,29 +170,29 @@ export default class UploadModal {
 
   createUploadItem(file, errors, opts = {}) {
     const okTemplate = `
-      <img src="data:," alt="${escapeQuotes(file.name)}" />
-      <span>${escapeHtml(truncateFilename(file.name))}</span>
+      <img src="data:,", role="presentation" />
+      <span class="upload-modal__span">${escapeHtml(file.name)}</span>
     `
 
     const errorTemplate = `
       <div>${icon("error-warning-line")}</div>
       <div>
-        <span>${escapeHtml(truncateFilename(file.name))}</span>
+        <span class="upload-modal__span">${escapeHtml(file.name)}</span>
         <span>${this.locales.validation_error}</span>
         <ul>${errors.map((error) => `<li>${error}</li>`).join("\n")}</ul>
       </div>
     `
 
     const titleTemplate = `
-      <img src="data:," alt="${escapeQuotes(file.name)}" />
+      <img src="data:," role="presentation" />
       <div>
         <div>
           <label>${this.locales.filename}</label>
-          <span>${escapeHtml(truncateFilename(file.name))}</span>
+          <span class="upload-modal__span">${escapeHtml(file.name)}</span>
         </div>
         <div>
-          <label>${this.locales.title}</label>
-          <input class="sm" type="text" value="${escapeQuotes(opts.title || truncateFilename(file.name))}" />
+          <label for="${file.name}">${this.locales.title}</label>
+          <input class="sm" type="text" value="${escapeQuotes(opts.title || file.name)}" id="${file.name}" />
         </div>
       </div>
     `

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

@@ -0,0 +1,18 @@
+// changes the value "menu" of role attribute set by a11y on div dropdown-menu-account and
+// dropdown-menu-account-mobile which are inappropriate for accessibility
+document.addEventListener("turbo:load", () => {
+  const dropdownDiv = document.querySelector("#dropdown-menu-account");
+  const dropdownMobileDiv = document.querySelector("#dropdown-menu-account-mobile");
+  if (dropdownDiv) {
+    setTimeout(() => {
+      dropdownDiv.setAttribute("role", "dialog")
+      dropdownMobileDiv.setAttribute("role", "dialog")
+    }, 300)
+  }
+  const triggerButtonMobile = document.querySelector("#dropdown-trigger-links-mobile");
+  if (triggerButtonMobile) {
+    triggerButtonMobile.addEventListener("click", () => {
+      dropdownMobileDiv.setAttribute("aria-modal", "true")
+    })
+  }
+});

data/app/packs/src/decidim/editor/common/input_dialog.js

@@ -1,6 +1,6 @@
 import Dialog from "a11y-dialog-component";
 
-import { getDictionary } from "src/decidim/i18n";
+import { getDictionary } from "src/decidim/refactor/moved/i18n";
 import { uniqueId } from "src/decidim/editor/common/helpers";
 
 export default class InputDialog {

data/app/packs/src/decidim/editor/common/suggestion.js

@@ -50,8 +50,13 @@ export const createSuggestionRenderer = (node, { itemConverter } = {}) => () =>
 
   const selectItem = (idx) => {
     const items = suggestionItems;
+
+    if (items[idx].help) {
+      return;
+    }
+
     const command = selectCommand;
-    if (currentRange && typeof jest === "undefined") {
+    if (currentRange && !window.isTestEnvironment && typeof jest === "undefined") {
       // Fixes an issue that after selecting the item, the written text will be
       // placed after the newly added suggestion.
       //
@@ -82,7 +87,7 @@ export const createSuggestionRenderer = (node, { itemConverter } = {}) => () =>
     suggestion.classList.remove("hidden", "hide");
     suggestion.innerHTML = "";
     items.forEach((rawItem, idx) => {
-      const { label, id } = convertItem(rawItem);
+      const { label, id, help } = convertItem(rawItem);
       const suggestionItem = document.createElement("button");
       suggestionItem.type = "button";
       suggestionItem.classList.add("editor-suggestions-item");
@@ -95,10 +100,23 @@ export const createSuggestionRenderer = (node, { itemConverter } = {}) => () =>
         selectedIndex = idx;
         suggestionItem.dataset.selected = "true";
       }
+      if (help) {
+        suggestionItem.disabled = true;
+      }
       suggestionItem.textContent = label;
       suggestion.append(suggestionItem);
 
-      suggestionItem.addEventListener("click", () => selectItem(idx));
+      suggestionItem.addEventListener("click", (ev) => {
+        ev.preventDefault();
+
+        if (currentRange) {
+          // Increase the current range by 1 since the ENTER key would do the
+          // same when doing the selection through keyboard.
+          currentRange.to += 1;
+        }
+
+        selectItem(idx);
+      });
     });
   }
 

data/app/packs/src/decidim/editor/common/upload_dialog.js

@@ -1,4 +1,4 @@
-import icon from "src/decidim/icon";
+import icon from "src/decidim/refactor/moved/icon";
 import { fileNameToTitle } from "src/decidim/editor/utilities/file";
 
 const createElement = (template) => {