decidim-core 0.30.0 → 0.30.2

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

@@ -10,13 +10,25 @@ const { Rails } = window;
 class ConfirmDialog {
   constructor(sourceElement) {
     this.$modal = $("#confirm-modal");
-    if (sourceElement) {
-      this.$source = $(sourceElement);
-    }
     this.$content = $("[data-confirm-modal-content]", this.$modal);
+    this.$title = $("[data-dialog-title]", this.$modal);
     this.$buttonConfirm = $("[data-confirm-ok]", this.$modal);
     this.$buttonCancel = $("[data-confirm-cancel]", this.$modal);
 
+    if (sourceElement) {
+      this.$source = $(sourceElement);
+
+      const confirmTitle = this.$source.data("confirm-title");
+      const confirmButton = this.$source.data("confirm-button");
+
+      this.$title.text(confirmTitle)
+
+      const $buttonSpan = this.$buttonConfirm.find("span");
+      if ($buttonSpan.length > 0) {
+        $buttonSpan.text(confirmButton);
+      }
+    }
+
     window.Decidim.currentDialogs["confirm-modal"].open()
   }
 

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/index.js

@@ -52,6 +52,7 @@ import "src/decidim/sw"
 import "src/decidim/sticky_header"
 import "src/decidim/sticky_footer"
 import "src/decidim/attachments"
+import "src/decidim/dropdown_menu"
 
 // local deps that require initialization
 import ConfirmDialog, { initializeConfirm } from "src/decidim/confirm"

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

@@ -168,6 +168,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"] {

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;
       }
     }
 
@@ -334,10 +334,6 @@ header {
       &__dropdown-trigger {
         @apply flex items-center justify-between text-white;
 
-        span {
-          @apply flex flex-wrap md:flex-nowrap gap-x-2.5 overflow-hidden text-white;
-        }
-
         svg {
           @apply w-6 h-6 fill-current;
         }
@@ -373,54 +369,85 @@ header {
       @apply absolute top-full left-0 bg-white rounded w-full bg-gray-5;
     }
 
-    &__main-dropdown {
-      @apply bg-white divide-y divide-gray-3 rounded-b shadow-lg text-black w-full lg:w-[1280px] h-screen md:h-auto;
+    &__dropdown-menu {
+      @apply w-full md:w-1/4 bg-primary px-4 md:px-8 pt-0 pb-3 md:py-3 divide-y divide-gray-3 text-white;
 
-      &__bottom,
-      &__top {
-        @apply flex flex-col md:flex-row justify-between p-4 md:p-8 gap-x-8;
+      > * {
+        @apply py-3 md:py-3.5;
+      }
 
-        &-right {
-          @apply hidden md:block md:w-1/2;
+      a {
+        @apply flex items-center justify-start gap-1 font-semibold text-lg text-white;
+
+        span {
+          @apply min-w-0 truncate;
         }
-      }
 
-      &__bottom {
-        @apply hidden md:flex;
+        svg {
+          @apply flex-none fill-current;
+        }
       }
+    }
 
-      &__title {
-        @apply hidden h4 md:flex md:h3;
-      }
+    &__main-dropdown {
+      @apply bg-white flex flex-row rounded-b shadow-lg text-black w-full lg:w-[1280px] h-screen md:h-auto;
 
-      &__subtitle {
-        @apply hidden text-md md:flex md:text-lg text-gray-2 mt-5;
+      &__left {
+        @apply flex flex-col justify-between p-4 md:p-8 space-y-5 hidden md:block md:w-3/4;
+
+        &-top {
+          @apply border-b-4 border-gray-3 pb-3;
+        }
       }
 
-      &__menu {
-        @apply w-full md:w-1/2 mt-0 grid md:grid-cols-2 gap-x-6 text-secondary;
+      &__top {
+        @apply w-full px-4;
 
-        > * {
-          @apply py-3 md:py-3.5 border-b last:border-0 border-gray-3;
+        &-menu {
+          @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;
 
-          /* since the grid has 2 columns, remove the border for these last 2 columns */
-          &:nth-last-child(-n + 2) {
-            @apply md:border-0;
+            /* since the grid has 2 columns, remove the border for these last 2 columns */
+            &:nth-last-child(-n + 2) {
+              @apply md:border-0;
+            }
           }
-        }
 
-        a {
-          @apply flex items-center justify-start gap-1 font-semibold text-lg text-secondary;
+          a {
+            @apply flex items-center justify-start gap-1 font-semibold text-lg text-secondary;
 
-          span {
-            @apply min-w-0 truncate;
-          }
+            span {
+              @apply min-w-0 truncate;
+            }
 
-          svg {
-            @apply flex-none fill-current;
+            svg {
+              @apply flex-none fill-current;
+            }
           }
         }
       }
+
+      &__bottom {
+        @apply hidden md:flex;
+
+        &-right {
+          @apply mr-2 mb-2;
+        }
+
+        &-left {
+          @apply mr-2 mt-1;
+        }
+      }
+
+      &__title {
+        @apply hidden h4 md:flex md:h3;
+      }
+
+      &__subtitle {
+        @apply hidden text-md md:flex md:text-lg text-gray-2 mt-5;
+      }
     }
 
     &__secondary-dropdown {
@@ -459,7 +486,7 @@ header {
       }
 
       &__metadata {
-        @apply flex items-center text-sm space-x-6 py-8;
+        @apply flex items-center text-sm space-x-6 pb-6;
 
         > span {
           @apply flex items-center space-x-2;

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/packs/stylesheets/decidim/resource_history.scss

@@ -13,19 +13,29 @@
     }
 
     &_content {
-      @apply flex flex-col lg:items-center lg:flex-row lg:gap-1;
+      @apply flex flex-col lg:items-start lg:flex-row lg:gap-2 lg:pt-[6px];
     }
 
     &_date {
-      @apply text-sm text-gray-2;
+      @apply text-sm text-gray-2 lg:pt-px;
     }
   }
 
   &_text {
-    @apply flex flex-col lg:flex-none lg:block relative;
+    @apply flex flex-col relative max-w-[250px] md:max-w-[600px] lg:max-w-[400px];
+  }
+
+  &_text:has(.resource-link) {
+    .resource-link {
+      @apply md:ml-[-1px] lg:ml-[-106px];
+    }
+  }
+
+  &_text:not(:has(.resource-link)) a {
+    @apply md:ml-[-1px] lg:ml-[-106px];
   }
 
   &__line {
-    @apply absolute -left-[26px] lg:-left-[130px] top-3.5 lg:top-[26px] w-px h-full bg-secondary;
+    @apply absolute -left-[26px] lg:-left-[134px] top-3.5 lg:top-[26px] w-px h-full lg:h-[90%] bg-secondary;
   }
 }

data/app/permissions/decidim/default_permissions.rb

@@ -5,6 +5,8 @@ module Decidim
   # actions by any kind of user. Also works as a default implementation so other
   # components can inherit from it and get some convenience methods.
   class DefaultPermissions
+    include Decidim::UserRoleChecker
+
     def initialize(user, permission_action, context = {})
       @user = user
       @permission_action = permission_action

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/presenters/decidim/notification_to_mailer_presenter.rb

@@ -14,15 +14,19 @@ module Decidim
     delegate :url_helpers, to: "Decidim::Core::Engine.routes"
     delegate :resource_title, to: :event
     delegate :resource_url, to: :event
-    delegate :email_intro, to: :event
     delegate :resource_path, to: :event
     delegate :safe_resource_text, to: :event
 
+    def email_intro
+      event.email_intro if event.respond_to?(:email_intro)
+    end
+
     def date_time
+      created_at_in_time_zone = created_at.in_time_zone(resource.organization.time_zone)
       if frequency == :daily
-        created_at.strftime("%H:%M")
+        I18n.l(created_at_in_time_zone, format: :time_of_day)
       else
-        I18n.l(created_at, format: :decidim_short)
+        I18n.l(created_at_in_time_zone, format: :decidim_short)
       end
     end
 

data/app/queries/decidim/last_activity.rb

@@ -18,6 +18,7 @@ module Decidim
         query = filter_moderated(query)
         query = filter_spaces(query)
         query = filter_deleted(query)
+        query = filter_withdrawn(query)
         query.with_new_resource_type("all")
       end
     end
@@ -48,6 +49,30 @@ module Decidim
       ).where(decidim_moderations: { id: nil })
     end
 
+    def filter_withdrawn(query)
+      # Filter out the items that have been withdrawn.
+      conditions = []
+
+      ActionLog.public_resource_types.each do |resource_type|
+        klass = resource_type.constantize
+
+        condition = if klass.respond_to?(:not_withdrawn)
+                      Arel.sql(
+                        [
+                          "decidim_action_logs.resource_type = '#{resource_type}'",
+                          "decidim_action_logs.resource_id IN (#{Arel.sql(klass.not_withdrawn.select(:id).to_sql)})"
+                        ].join(" AND ")
+                      ).to_s
+                    else
+                      Arel.sql("decidim_action_logs.resource_type = '#{resource_type}'").to_s
+                    end
+
+        conditions << "(#{condition})"
+      end
+
+      query.where(Arel.sql(conditions.join(" OR ")).to_s)
+    end
+
     def filter_spaces(query)
       conditions = []
 

data/app/validators/translated_etiquette_validator.rb

@@ -6,6 +6,8 @@
 #   validates :my_i18n_field, translated_etiquette: true
 class TranslatedEtiquetteValidator < EtiquetteValidator
   def validate_each(record, attribute, _value)
+    return unless Decidim.enable_etiquette_validator
+
     translated_attr = "#{attribute}_#{default_locale_for(record)}".gsub("-", "__")
     translated_value = record.send(translated_attr)
     return if translated_value.blank?

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/messaging/conversations/_reply_form.html.erb

@@ -1,8 +1,7 @@
 <div data-conversation-reply>
   <%= decidim_form_for form, url: decidim.conversation_path(conversation.id), method: :put, remote: true do |f| %>
     <div class="conversation__reply">
-      <%= f.label :body, nil, class: "sr-only" %>
-      <%= f.text_area :body, label: false, rows: 4, required: true, placeholder: t(".placeholder"), data: { "input-emoji": true } %>
+      <%= f.text_area :body, label: false, rows: 4, required: true, placeholder: t(".placeholder"), data: { "input-emoji": true }, aria: { label: t(".placeholder") } %>
       <%= f.submit "#{t(".send")} #{icon "arrow-right-line", class: "fill-current"}".html_safe, class: "button button__sm button__secondary self-end mt-4" %>
     </div>
   <% end %>

data/app/views/decidim/messaging/conversations/_start.html.erb

@@ -5,7 +5,7 @@
         <%= f.hidden_field :recipient_id, id: nil, name: "conversation[recipient_id][]", value: recipient.id %>
       <% end %>
       <%= f.label :body, nil, class: "sr-only" %>
-      <%= f.text_area :body, label: false, rows: 4, required: true, placeholder: t(".placeholder"), data: { "input-emoji": true } %>
+      <%= f.text_area :body, label: false, rows: 4, required: true, placeholder: t(".placeholder"), data: { "input-emoji": true }, aria: { label: t(".placeholder") } %>
       <%= f.submit "#{t(".send")} #{icon "arrow-right-line", class: "fill-current"}".html_safe, class: "button button__sm button__secondary self-end mt-4" %>
     </div>
   <% end %>

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>