decidim-core 0.29.3 → 0.29.5

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

@@ -4,13 +4,18 @@
  * reload without this.
  */
 
-$(() => {
-  const $callout = $('.callout[role="alert"]:first');
-  if ($callout.length > 0) {
-    setTimeout(() => {
-      // The content insertion is to try to hint some of the screen readers
-      // that the alert content has changed and needs to be announced.
-      $callout.attr("tabindex", "0").focus().html(`${$callout.html()} `);
-    }, 500);
+document.addEventListener("turbo:load", () => {
+  const callout = document.querySelector(".flash[role='alert']");
+  if (!callout) {
+    return;
   }
+
+  setTimeout(() => {
+    callout.setAttribute("tabindex", "0");
+    callout.focus();
+
+    // The content insertion is to try to hint some of the screen readers
+    // that the alert content has changed and needs to be announced.
+    callout.innerHTML += " ";
+  }, 500);
 });

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

@@ -5,12 +5,14 @@
  * it to gain control over the confirm events BEFORE rails-ujs is loaded.
  */
 
-import Rails from "@rails/ujs"
+const { Rails } = window;
 
 class ConfirmDialog {
   constructor(sourceElement) {
     this.$modal = $("#confirm-modal");
-    this.$source = sourceElement;
+    if (sourceElement) {
+      this.$source = $(sourceElement);
+    }
     this.$content = $("[data-confirm-modal-content]", this.$modal);
     this.$buttonConfirm = $("[data-confirm-ok]", this.$modal);
     this.$buttonCancel = $("[data-confirm-cancel]", this.$modal);
@@ -29,22 +31,37 @@ class ConfirmDialog {
       this.$buttonConfirm.on("click", (ev) => {
         ev.preventDefault();
 
-        window.Decidim.currentDialogs["confirm-modal"].close()
-        resolve(true);
-        this.$source.focus();
+        this.close(() => resolve(true));
       });
 
       this.$buttonCancel.on("click", (ev) => {
         ev.preventDefault();
 
-        window.Decidim.currentDialogs["confirm-modal"].close()
-        resolve(false);
-        this.$source.focus();
+        this.close(() => resolve(false));
       });
     });
   }
+
+  close(afterClose) {
+    window.Decidim.currentDialogs["confirm-modal"].close()
+    afterClose();
+    if (this.$source) {
+      this.$source.focus();
+    }
+  }
 }
 
+const runConfirm = (message, sourceElement = null) => new Promise((resolve) => {
+  const dialog = new ConfirmDialog(sourceElement);
+  dialog.confirm(message).then((answer) => {
+    let completed = true;
+    if (sourceElement) {
+      completed = Rails.fire(sourceElement, "confirm:complete", [answer]);
+    }
+    resolve(answer && completed);
+  });
+});
+
 // Override the default confirm dialog by Rails
 // See:
 // https://github.com/rails/rails/blob/fba1064153d8e2f4654df7762a7d3664b93e9fc8/actionview/app/assets/javascripts/rails-ujs/features/confirm.coffee
@@ -64,37 +81,35 @@ const allowAction = (ev, element) => {
     return false;
   }
 
-  const dialog = new ConfirmDialog(
-    $(element)
-  );
-  dialog.confirm(message).then((answer) => {
-    const completed = Rails.fire(element, "confirm:complete", [answer]);
-    if (answer && completed) {
-      // Allow the event to propagate normally and re-dispatch it without
-      // the confirm data attribute which the Rails internal method is
-      // checking.
-      $(element).data("confirm", null);
-      $(element).removeAttr("data-confirm");
-
-      // The submit button click events will not do anything if they are
-      // dispatched as is. In these cases, just submit the underlying form.
-      if (ev.type === "click" &&
-        (
-          $(element).is('button[type="submit"]') ||
-          $(element).is('input[type="submit"]')
-        )
-      ) {
-        $(element).parents("form").submit();
-      } else {
-        let origEv = ev.originalEvent || ev;
-        let newEv = origEv;
-        if (typeof Event === "function") {
-          // Clone the event because otherwise some click events may not
-          // work properly when re-dispatched.
-          newEv = new origEv.constructor(origEv.type, origEv);
-        }
-        ev.target.dispatchEvent(newEv);
+  runConfirm(message, element).then((answer) => {
+    if (!answer) {
+      return;
+    }
+
+    // Allow the event to propagate normally and re-dispatch it without
+    // the confirm data attribute which the Rails internal method is
+    // checking.
+    $(element).data("confirm", null);
+    $(element).removeAttr("data-confirm");
+
+    // The submit button click events will not do anything if they are
+    // dispatched as is. In these cases, just submit the underlying form.
+    if (ev.type === "click" &&
+      (
+        $(element).is('button[type="submit"]') ||
+        $(element).is('input[type="submit"]')
+      )
+    ) {
+      $(element).parents("form").submit();
+    } else {
+      let origEv = ev.originalEvent || ev;
+      let newEv = origEv;
+      if (typeof Event === "function") {
+        // Clone the event because otherwise some click events may not
+        // work properly when re-dispatched.
+        newEv = new origEv.constructor(origEv.type, origEv);
       }
+      ev.target.dispatchEvent(newEv);
     }
   });
 
@@ -129,26 +144,31 @@ const handleDocumentEvent = (ev, matchSelectors) => {
   });
 };
 
-document.addEventListener("click", (ev) => {
-  return handleDocumentEvent(ev, [
-    Rails.linkClickSelector,
-    Rails.buttonClickSelector,
-    Rails.formInputClickSelector
-  ]);
-});
-document.addEventListener("change", (ev) => {
-  return handleDocumentEvent(ev, [Rails.inputChangeSelector]);
-});
-document.addEventListener("submit", (ev) => {
-  return handleDocumentEvent(ev, [Rails.formSubmitSelector]);
-});
+// Note that this needs to be run **before** Rails.start()
+export const initializeConfirm = () => {
+  document.addEventListener("click", (ev) => {
+    return handleDocumentEvent(ev, [
+      Rails.linkClickSelector,
+      Rails.buttonClickSelector,
+      Rails.formInputClickSelector
+    ]);
+  });
+  document.addEventListener("change", (ev) => {
+    return handleDocumentEvent(ev, [Rails.inputChangeSelector]);
+  });
+  document.addEventListener("submit", (ev) => {
+    return handleDocumentEvent(ev, [Rails.formSubmitSelector]);
+  });
 
-// This is needed for the confirm dialog to work with Foundation Abide.
-// Abide registers its own submit click listeners since Foundation 5.6.x
-// which will be handled before the document listeners above. This would
-// break the custom confirm functionality when used with Foundation Abide.
-document.addEventListener("DOMContentLoaded", function() {
-  $(Rails.formInputClickSelector).on("click.confirm", (ev) => {
-    handleConfirm(ev, getMatchingEventTarget(ev, Rails.formInputClickSelector));
+  // This is needed for the confirm dialog to work with Foundation Abide.
+  // Abide registers its own submit click listeners since Foundation 5.6.x
+  // which will be handled before the document listeners above. This would
+  // break the custom confirm functionality when used with Foundation Abide.
+  document.addEventListener("DOMContentLoaded", function() {
+    $(Rails.formInputClickSelector).on("click.confirm", (ev) => {
+      handleConfirm(ev, getMatchingEventTarget(ev, Rails.formInputClickSelector));
+    });
   });
-});
+};
+
+export default runConfirm;

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

@@ -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

@@ -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>
     `

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 { 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("DOMContentLoaded", () => {
+  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/suggestion.js

@@ -98,7 +98,17 @@ export const createSuggestionRenderer = (node, { itemConverter } = {}) => () =>
       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/form_remote.js

@@ -1,4 +1,4 @@
-import Rails from "@rails/ujs";
+const { Rails } = window;
 
 // Make the remote form submit buttons disabled when the form is being
 // submitted to avoid multiple submits.

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

@@ -15,7 +15,7 @@ $(() => {
     }, 1000);
 
     // Prevent reload when page is already unloading, otherwise it may cause infinite reloads.
-    window.addEventListener("beforeunload", () => {
+    window.addEventListener("pagehide", () => {
       clearInterval(exitInterval);
       return;
     });

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

@@ -41,7 +41,6 @@ import "src/decidim/vizzs"
 import "src/decidim/responsive_horizontal_tabs"
 import "src/decidim/security/selfxss_warning"
 import "src/decidim/session_timeouter"
-import "src/decidim/confirm"
 import "src/decidim/results_listing"
 import "src/decidim/impersonation"
 import "src/decidim/gallery"
@@ -51,8 +50,10 @@ import "src/decidim/abide_form_validator_fixer"
 import "src/decidim/sw"
 import "src/decidim/sticky_header"
 import "src/decidim/attachments"
+import "src/decidim/dropdown_menu"
 
 // local deps that require initialization
+import ConfirmDialog, { initializeConfirm } from "src/decidim/confirm"
 import formDatePicker from "src/decidim/datepicker/form_datepicker"
 import Configuration from "src/decidim/configuration"
 import ExternalLink from "src/decidim/external_link"
@@ -91,6 +92,7 @@ window.Decidim = window.Decidim || {
   addInputEmoji,
   EmojiButton,
   Dialogs,
+  ConfirmDialog,
   announceForScreenReader
 };
 
@@ -123,6 +125,8 @@ window.initFoundation = (element) => {
   });
 };
 
+// Confirm initialization needs to happen before Rails.start()
+initializeConfirm();
 Rails.start()
 
 /**

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

@@ -93,7 +93,7 @@ export default class InputCharacterCounter {
       this.$srTarget = $(`#${screenReaderId}`);
       if (!this.$srTarget.length) {
         this.$srTarget = $(
-          `<span role="status" id="${screenReaderId}" class="sr-only remaining-character-count-sr" />`
+          `<span role="status" id="${screenReaderId}" class="sr-only remaining-character-count-sr" aria-hidden="true"/>`
         );
         this.$target.before(this.$srTarget);
       }

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

@@ -127,7 +127,7 @@ $(() => {
     setTimer(timeoutInSeconds);
   });
 
-  window.addEventListener("beforeunload", () => {
+  window.addEventListener("pagehide", () => {
     clearInterval(exitInterval);
     return;
   });

data/app/packs/src/decidim/utilities/dom.js

@@ -0,0 +1,148 @@
+import confirmAction from "src/decidim/confirm"
+import { getMessages } from "src/decidim/i18n"
+
+const { Rails } = window;
+
+const createUnloadPreventer = () => {
+  const preventUnloadConditions = [];
+
+  const confirmMessage = getMessages("confirmUnload") || "Are you sure you want to leave this page?";
+
+  const canUnload = (event) => !preventUnloadConditions.some((condition) => condition(event));
+
+  // TLDR:
+  // The beforeunload event does not work during tests due to the deprecation of
+  // the unload event and ChromeDriver automatically accepting these dialogs.
+  // ---
+  //
+  // Even when there are custom listeners on links and forms, the beforeunload
+  // event is to ensure that the user does not accidentally reload the page or
+  // close the browser or the tab. Note that this does not work during the tests
+  // with ChromeDriver due to the deprecation of the unload event and
+  // ChromeDriver automatically accepting these dialogs. For the time being,
+  // this should work when a real user interacts with the browser along with the
+  // "Permissions-Policy" header set by the backend. For more information about
+  // the header, see Decidim::Headers::BrowserFeaturePermissions).
+  const unloadListener = (event) => {
+    if (canUnload(event)) {
+      return;
+    }
+
+    // According to:
+    // https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event
+    //
+    // > [...] best practice is to trigger the dialog by invoking
+    // > preventDefault() on the event object, while also setting returnValue to
+    // > support legacy cases.
+    event.preventDefault();
+    event.returnValue = true;
+  };
+
+  // The beforeunload event listener has to be registered AFTER a user
+  // interaction which is why it is wrapped around the next click event that
+  // happens after the first unload listener was registered. Otherwise it might
+  // not work due to the deprecation of the unload APIs in Chromium based
+  // browsers and possibly in the web standards in the future.
+  //
+  // According to:
+  // https://developer.chrome.com/docs/web-platform/page-lifecycle-api#the_beforeunload_event
+  //
+  // > Never add a beforeunload listener unconditionally or use it as an
+  // > end-of-session signal. Only add it when a user has unsaved work, and
+  // > remove it as soon as that work has been saved.
+  const registerBeforeUnload = () => {
+    window.removeEventListener("click", registerBeforeUnload);
+    window.addEventListener("beforeunload", unloadListener);
+  };
+
+  const disableBeforeUnload = () => {
+    window.removeEventListener("click", registerBeforeUnload);
+    window.removeEventListener("beforeunload", unloadListener);
+  };
+
+  const linkClickListener = (ev) => {
+    const link = ev.target?.closest("a");
+    if (!link) {
+      return;
+    }
+
+    if (canUnload(ev)) {
+      disableBeforeUnload();
+      document.removeEventListener("click", linkClickListener);
+      return;
+    }
+
+    window.exitUrl = link.href;
+
+    ev.preventDefault();
+    ev.stopPropagation();
+
+    confirmAction(confirmMessage, link).then((answer) => {
+      if (!answer) {
+        return;
+      }
+
+      disableBeforeUnload();
+      document.removeEventListener("click", linkClickListener);
+      link.click();
+    });
+  };
+
+  const formSubmitListener = (ev) => {
+    const source = ev.target?.closest("form");
+    if (!source) {
+      return;
+    }
+
+    if (canUnload(ev)) {
+      disableBeforeUnload();
+      document.removeEventListener("submit", formSubmitListener);
+      return;
+    }
+
+    const button = source.closest(Rails.formSubmitSelector);
+    if (!button) {
+      return;
+    }
+
+    ev.preventDefault();
+    ev.stopImmediatePropagation();
+    ev.stopPropagation();
+
+    confirmAction(confirmMessage, button).then((answer) => {
+      if (!answer) {
+        return;
+      }
+
+      disableBeforeUnload();
+      document.removeEventListener("submit", formSubmitListener);
+      source.submit();
+    });
+  };
+
+  const registerPreventUnloadListeners = () => {
+    window.addEventListener("click", registerBeforeUnload);
+    document.addEventListener("click", linkClickListener);
+    document.addEventListener("submit", formSubmitListener);
+  };
+
+  return {
+    addPreventCondition: (condition) => {
+      if (typeof condition !== "function") {
+        return;
+      }
+
+      if (preventUnloadConditions.length < 1) {
+        // The unload listeners are global, so only the first call to this
+        // function should result to registering these listeners.
+        registerPreventUnloadListeners();
+      }
+
+      preventUnloadConditions.push(condition);
+    }
+  };
+};
+
+const unloadPreventer = createUnloadPreventer();
+
+export const preventUnload = (condition) => unloadPreventer.addPreventCondition(condition);

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

@@ -12,12 +12,12 @@
   &__content {
     @apply col-span-2 md:col-span-1 order-first md:order-none space-y-2;
 
-    > span:first-child {
-      span {
-        @apply text-gray-2 text-sm;
+    > div:first-child {
+      p {
+        @apply text-gray-2 text-sm inline-block;
 
         svg {
-          @apply text-gray fill-current;
+          @apply text-gray fill-current inline;
         }
       }
 

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

@@ -164,6 +164,10 @@
     svg {
       @apply flex-none text-gray fill-current;
     }
+
+    [data-author] {
+      @apply flex first:[&>*]:max-w-40 -mr-8;
+    }
   }
 
   /* shared styles */

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

@@ -89,7 +89,7 @@
   }
 
   span {
-    @apply text-sm text-gray-2 truncate whitespace-nowrap first-letter:uppercase;
+    @apply text-sm text-gray-2 first-letter:uppercase;
   }
 
   [data-controls*="panel"] {