decidim-core 0.29.4 → 0.29.5

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

@@ -159,11 +159,15 @@
   /* shared styles */
   &__highlight-metadata,
   &__grid-metadata {
-    @apply mt-auto flex items-center justify-between flex-wrap w-full text-sm text-gray-2 [&>*]:flex [&>*]:items-center [&>*]:gap-1 first:[&>*]:w-4/5;
+    @apply mt-auto flex items-center justify-between flex-wrap text-sm text-gray-2 [&>*]:flex [&>*]:items-center [&>*]:gap-1 first:[&>*]:flex-none;
 
     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"] {

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

@@ -61,7 +61,7 @@ header {
       @apply hidden md:block col-span-2 col-start-5 xl:col-start-4;
 
       form {
-        @apply block relative rounded text-md bg-background;
+        @apply block relative rounded text-md border border-neutral-200 outline outline-1 outline-transparent rounded bg-background-2 leading-relaxed;
       }
 
       input[type="text"] {
@@ -69,7 +69,7 @@ header {
       }
 
       button[type="submit"] {
-        @apply absolute ltr:right-2 rtl:left-2 inset-y-2 text-secondary;
+        @apply absolute ltr:right-2 rtl:left-2 inset-y-0 text-secondary px-2;
       }
     }
 
@@ -404,7 +404,7 @@ header {
         @apply w-full px-4;
 
         &-menu {
-          @apply w-full md:w-1/2 mt-0 grid md:grid-cols-2 gap-x-6 text-secondary;
+          @apply w-full md:w-[100%] mt-0 grid md:grid-cols-2 gap-x-6 text-secondary;
 
           > * {
             @apply py-3 md:py-3.5 border-b last:border-0 border-gray-3;
@@ -431,6 +431,14 @@ header {
 
       &__bottom {
         @apply hidden md:flex;
+
+        &-right {
+          @apply mr-2 mb-2;
+        }
+
+        &-left {
+          @apply mr-2 mt-1;
+        }
       }
 
       &__title {

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

@@ -2,11 +2,11 @@
   @apply flex flex-col min-h-screen;
 
   &__skip {
-    @apply absolute z-10 left-0 -translate-x-full py-1 px-4 bg-primary rounded-br-lg text-white cursor-pointer transition focus:translate-x-0;
+    @apply absolute z-[9999] left-0 -translate-x-full py-1 px-4 bg-primary rounded-br-lg text-white cursor-pointer transition focus:translate-x-0;
   }
 
   [data-content] {
-    @apply relative flex flex-col;
+    @apply relative flex flex-col flex-1;
   }
 }
 

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

@@ -18,15 +18,11 @@
   }
 
   [data-dialog-container] {
-    @apply grid grid-cols-[auto_1fr] items-start md:items-center gap-2 text-left;
+    @apply grid grid-rows-[auto_1fr] items-start md:items-center gap-2 text-left;
 
     > svg {
       @apply w-6 h-6 text-gray fill-current flex-none;
     }
-
-    > :last-child {
-      @apply col-span-2 md:col-span-1 md:col-start-2;
-    }
   }
 
   [data-dialog-title] {

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

@@ -132,8 +132,12 @@
       }
 
       span {
-        @apply text-sm text-gray-2 mx-auto;
+        @apply text-sm text-gray-2 mx-auto w-full break-all mb-2;
       }
     }
   }
+
+  &__span {
+    @apply w-full break-all mb-2;
+  }
 }

data/app/permissions/decidim/permissions.rb

@@ -106,7 +106,19 @@ module Decidim
         return allow! if component.current_settings.amendment_creation_enabled
       when :accept,
           :reject
-        return allow! if component.current_settings.amendment_reaction_enabled
+        return disallow! unless component.current_settings.amendment_reaction_enabled
+
+        amendable = context.fetch(:amendable, nil)
+
+        if amendable.respond_to?(:official?) && amendable.official?
+          return allow! if user.admin?
+
+          return disallow!
+        end
+
+        return disallow! unless amendable.authored_by?(user)
+
+        return allow!
       when :promote
         return allow! if component.current_settings.amendment_promotion_enabled
       end

data/app/views/decidim/errors/internal_server_error.html.erb

@@ -1,6 +1,6 @@
 <%= render layout: "layouts/decidim/shared/layout_center" do %>
 
-  <div class="place-self-center">
+  <div class="flex flex-col items-center">
     <div class="flex justify-center">
       <h1 class="title-decorator my-12"><%= t("title", scope: "decidim.errors.internal_server_error") %></h1>
     </div>

data/app/views/decidim/errors/not_found.html.erb

@@ -1,6 +1,6 @@
 <%= render layout: "layouts/decidim/shared/layout_center" do %>
 
-  <div class="place-self-center">
+  <div class="flex flex-col items-center">
     <div class="flex justify-center">
       <h1 class="title-decorator my-12"><%= t("title", scope: "decidim.errors.not_found") %></h1>
     </div>

data/app/views/decidim/newsletters/unsubscribe.html.erb

@@ -1,4 +1,16 @@
-<div class="row">
-  <h4><%== t ".unsubscribe" %></h4>
-  <p><%== t ".check_subscription", link: decidim.notifications_settings_path %></p>
-</div>
+<main class="layout-1col cols-6">
+  <div class="text-center py-12">
+    <h1 class="h1 decorator inline-block text-left"><%= t ".unsubscribe" %></h1>
+  </div>
+  <div class="page__container">
+    <div class="editor-content">
+      <div class="rich-text-display">
+        <%= t ".subscription_preferences", organization_name: translated_attribute(current_organization.name) %>
+      </div>
+      <br>
+      <div class="rich-text-display">
+        <%= t ".check_subscription_html", link: decidim.notifications_settings_path %>
+      </div>
+    </div>
+  </div>
+</main>

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

@@ -12,35 +12,70 @@
       <%= icon "arrow-down-s-line", class: "w-8 h-8 flex-none text-secondary fill-current" %>
       <%= icon "arrow-up-s-line", class: "w-8 h-8 flex-none text-secondary fill-current" %>
     </button>
-    <div id="dropdown-menu-search" aria-hidden="true">
-      <div>
-        <%= link_to main_search_path, class: "filter#{" is-active" if params.dig(:filter, :with_resource_type) == nil}" do %>
+    <ul id="dropdown-menu-search" aria-hidden="true">
+      <li>
+        <%= link_to main_search_path, class: "filter#{" is-active" if params.dig(:filter, :with_resource_type) == nil}", "aria-current": params.dig(:filter, :with_resource_type) == nil ? "true" : "" do %>
           <%= resource_type_icon("all") %>
           <span><%= t("all", scope: "decidim.searches.filters.state") %></span>
           <span class="label ml-auto"><%= @results_count %></span>
         <% end %>
-      </div>
+      </li>
       <% @blocks.each do |elements| %>
-        <div>
-          <% elements.each do |type, results| %>
-            <div>
+        <li>
+          <ul>
+            <% elements.each do |type, results| %>
               <% if results[:count].positive? %>
-                <%= link_to search_path_by_resource_type(type), class: "filter#{" is-active" if params.dig(:filter, :with_resource_type) == type}" do %>
+                <li>
+                <%= link_to search_path_by_resource_type(type), class: "filter#{" is-active" if params.dig(:filter, :with_resource_type) == type}", "aria-current": params.dig(:filter, :with_resource_type) == type ? "true" : "" do %>
                   <%= resource_type_icon(type) %>
                   <span><%= searchable_resource_human_name(type) %></span>
                   <span class="label ml-auto"><%= results[:count] %></span>
                 <% end %>
+                </li>
               <% else %>
-                <%= content_tag :div, class: "filter#{" is-empty" if results[:count].zero?}" do %>
+                <%= content_tag :li, class: "filter#{" is-empty" if results[:count].zero?}" do %>
                   <%= resource_type_icon(type) %>
                   <span><%= searchable_resource_human_name(type) %></span>
                   <span class="label ml-auto"><%= results[:count] %></span>
                 <% end %>
               <% end %>
-            </div>
-          <% end %>
-        </div>
+            <% end %>
+          </ul>
+        </li>
       <% end %>
-    </div>
+    </ul>
   </div>
 </nav>
+<script type="text/javascript">
+  const button = document.querySelector('#dropdown-trigger-search');
+  const arrowDown = button.querySelector('svg:first-of-type');
+  const arrowUp = button.querySelector('svg:last-of-type');
+  const list = document.querySelector('#dropdown-menu-search');
+  // the arrow is up when user arrives on the page, with the list displayed
+  arrowUp.addEventListener('click', function(){
+    setTimeout(() => {
+      button.setAttribute('aria-expanded', 'false');
+      list.style.display = "none";
+      }, 300)
+  })
+  arrowDown.addEventListener('click', function(){
+    setTimeout(() => {
+      button.setAttribute('aria-expanded', 'true');
+      list.style.display = "block";
+    }, 300)
+  })
+  // 32 is code for space bar and 13 is code for enter
+  button.addEventListener('keydown', function(e){
+    if ((e.keyCode === 13 || e.keyCode === 32) && button.getAttribute('aria-expanded') === 'true') {
+      setTimeout(() => {
+        button.setAttribute('aria-expanded', 'false');
+        list.style.display = "none";
+      }, 300)
+    } else if ((e.keyCode === 13 || e.keyCode === 32) && button.getAttribute('aria-expanded') === 'false'){
+        setTimeout(() => {
+          button.setAttribute('aria-expanded', 'true');
+          list.style.display = "block";
+        }, 300)
+    }
+  })
+</script>

data/app/views/decidim/shared/_component_announcement.html.erb

@@ -1,5 +1,5 @@
 <% announcement = translated_attribute(current_settings.announcement).presence || translated_attribute(component_settings.announcement).presence %>
-<% if announcement %>
+<% if strip_tags(announcement).present? %>
   <section class="layout-main__section">
     <%= cell("decidim/announcement", announcement, local_assigns.merge(callout_class: "editor-content")) %>
   </section>

data/app/views/decidim/shared/_confirm_modal.html.erb

@@ -1,16 +1,14 @@
 <%= decidim_modal id: "confirm-modal" do %>
   <div data-dialog-container>
-    <%= icon "delete-bin-line" %>
     <h2 class="h2" data-dialog-title id="dialog-title-confirm-modal"><%= t("title", scope: "decidim.shared.confirm_modal") %></h2>
-
     <div data-confirm-modal-content></div>
   </div>
 
-  <div data-dialog-actions>
-    <button class="button button__lg button__transparent-secondary" data-confirm-cancel data-dialog-close="confirm-modal">
+  <div data-dialog-actions class="flex flex-col-reverse md:flex-row">
+    <button class="button button__lg button__transparent-secondary w-full md:w-auto" data-confirm-cancel data-dialog-close="confirm-modal">
       <span><%= t("cancel", scope: "decidim.shared.confirm_modal") %></span>
     </button>
-    <button class="button button__lg button__secondary" data-confirm-ok>
+    <button class="button button__lg button__secondary w-full md:w-auto" data-confirm-ok>
       <span><%= t("ok", scope: "decidim.shared.confirm_modal") %></span>
     </button>
   </div>