decidim-core 0.32.0.rc2 → 0.32.0

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

@@ -1,17 +1,17 @@
-export const escapeHtml = (text) => {
+const escapeQuotes = (text) => {
   if (!text) {
     return "";
   }
 
-  const el = document.createElement("div");
-  el.appendChild(document.createTextNode(text));
-  return el.innerHTML;
+  return text.replace(/"/g, """);
 }
 
-export const escapeQuotes = (text) => {
+export const escapeHtml = (text) => {
   if (!text) {
     return "";
   }
 
-  return text.replace(/"/g, """);
+  const el = document.createElement("div");
+  el.appendChild(document.createTextNode(text));
+  return escapeQuotes(el.innerHTML);
 }

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

@@ -88,6 +88,20 @@
   }
 
   &__modal {
+    &-error {
+      [data-dialog-closable] {
+        @apply top-6 right-6;
+      }
+
+      [data-dialog-container] {
+        @apply inline grid-cols-none;
+      }
+
+      [data-dialog-title] {
+        @apply col-span-2 md:col-span-1 md:col-start-2 grid grid-cols-[auto_1fr] items-start md:items-center gap-2 pb-4 text-left text-xl text-gray-2 md:border-b md:border-gray-3;
+      }
+    }
+
     &-results {
       @apply mb-20 flex flex-wrap gap-x-8 gap-y-4;
     }

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

@@ -1,5 +1,5 @@
 [id*="dropdown-menu"] {
-  @apply flex flex-col py-0 mx-3.5 md:mx-0 border-t-0 border-gray-3 cursor-pointer;
+  @apply flex flex-col py-0 mx-3.5 md:mx-0 border-t-0 border-gray-3;
 
   &[aria-hidden="true"] {
     @apply hidden md:flex;

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

@@ -0,0 +1,49 @@
+.editor-suggestions-props {
+  --editor-suggestions-border-color: #000;
+  --editor-suggestions-background-color: #eee;
+  --editor-suggestions-selected-highlight-color: #ccc;
+}
+
+.editor-suggestions {
+  @apply editor-suggestions-props border-0 bg-[var(--editor-suggestions-background-color)] max-w-sm drop-shadow-md rounded-md;
+
+  &:hover {
+    .editor-suggestions-item[data-selected]:not(:hover) {
+      @apply bg-transparent;
+    }
+  }
+
+  .editor-suggestions-item {
+    @apply flex items-center gap-2 w-full text-left py-[0.375rem] px-1.5 border-0 rounded-none text-sm;
+
+    &:first-child {
+      @apply rounded-t-md;
+    }
+
+    &:last-child {
+      @apply rounded-b-md;
+    }
+
+    &:hover,
+    &[data-selected] {
+      @apply bg-[var(--editor-suggestions-selected-highlight-color)];
+    }
+
+    .editor-suggestions-item-avatar {
+      @apply rounded-full w-6 h-6 object-cover flex-none;
+    }
+
+    .editor-suggestions-item-label {
+      @apply truncate;
+    }
+  }
+
+  .editor-suggestions-item-disabled {
+    @apply cursor-default;
+
+    &:hover,
+    &[data-selected] {
+      @apply bg-transparent;
+    }
+  }
+}

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

@@ -1,5 +1,5 @@
 [data-floating-help] {
-  @apply absolute z-10 top-5 md:top-10 right-0 [&_button]:bg-background [&_button]:px-2 [&_button]:rounded-r-none [&_svg]:text-gray [&_svg]:fill-current;
+  @apply absolute z-10 top-20 md:top-10 right-0 [&_button]:bg-background [&_button]:px-2 [&_button]:rounded-r-none [&_svg]:text-gray [&_svg]:fill-current;
 
   &:hover {
     @apply [&_svg]:text-white [&_button]:text-white [&_button]:bg-secondary [&_button]:no-underline;

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

@@ -248,6 +248,10 @@ header {
         .account-container {
           @apply before:block before:absolute before:top-16 before:right-14 before:content-[""] before:bg-white before:w-2 before:h-12 before:-mt-8;
         }
+
+        #dropdown-trigger-links-mobile-close {
+          @apply relative z-10;
+        }
       }
 
       &__item {
@@ -322,19 +326,27 @@ header {
   .menu-bar {
     @apply container h-full flex justify-between items-center sm:relative last-of-type:[&>svg]:hidden;
 
+    &__breadcrumb-text {
+      @apply block min-w-0 max-w-full overflow-hidden whitespace-nowrap text-ellipsis;
+    }
+
     &__container {
       @apply bg-primary relative h-14 flex justify-between;
     }
 
     &__breadcrumb-desktop {
-      @apply hidden lg:flex justify-between items-center [&>*]:text-md [&>*]:text-white gap-x-2;
+      @apply hidden lg:flex flex-1 min-w-0 overflow-hidden items-center [&>*]:text-md [&>*]:text-white gap-x-2;
 
-      .no-interactive {
-        @apply font-normal px-0;
+      > * {
+        @apply min-w-0;
       }
 
       &__dropdown-trigger {
-        @apply flex rounded py-1 z-20 font-semibold;
+        @apply flex flex-none rounded px-2 py-1 z-20 font-semibold focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-inset;
+
+        &--truncatable {
+          @apply min-w-0 overflow-hidden;
+        }
 
         &:hover {
           @apply z-10 relative before:content-[''] before:absolute before:w-[calc(100%+3rem+1px)] before:min-w-[10rem] before:h-40 before:left-1/2 before:top-1/2 before:-translate-x-1/2 before:-translate-y-1/4 before:-z-10;
@@ -345,8 +357,16 @@ header {
         }
       }
 
+      .no-interactive {
+        @apply font-normal px-0 min-w-0;
+      }
+
       &__dropdown-wrapper {
-        @apply flex items-center cursor-pointer underline;
+        @apply flex flex-none items-center cursor-pointer underline;
+      }
+
+      &__label--truncatable {
+        @apply block w-full min-w-0 max-w-full overflow-hidden;
       }
 
       &__dropdown-content {
@@ -417,18 +437,31 @@ header {
     }
 
     &__breadcrumb-mobile {
-      @apply block lg:hidden w-full z-20;
+      @apply block lg:hidden w-full min-w-0 z-20;
 
       &__dropdown-trigger {
-        @apply flex items-center justify-between text-white;
+        @apply flex min-w-0 items-center justify-between text-white;
+
+        .menu-bar__breadcrumb-item {
+          @apply min-w-0;
+        }
 
         svg {
+          @apply flex-none;
           @apply w-6 h-6 fill-current;
         }
       }
 
+      &__label-wrapper {
+        @apply block min-w-0 flex-1;
+      }
+
+      &__label {
+        @apply flex w-11/12 items-center gap-x-2 min-w-0;
+      }
+
       .menu-bar__breadcrumb-item {
-        @apply font-semibold underline;
+        @apply flex flex-1 min-w-0 items-center gap-x-1 whitespace-nowrap font-semibold underline focus:outline focus:outline-2 focus:outline-offset-2 rounded-sm;
       }
 
       /* overwrite default dropdown styles */

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

@@ -0,0 +1,23 @@
+@use "tom-select/dist/scss/tom-select";
+
+.ts {
+  &-control {
+    @apply border-gray text-md min-h-[40px];
+
+    input {
+      @apply font-normal text-black text-md;
+    }
+  }
+
+  &-dropdown {
+    @apply text-md text-gray-2 font-normal;
+
+    .option img {
+      @apply inline;
+    }
+
+    .active {
+      @apply bg-gray-3;
+    }
+  }
+}

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

@@ -6,6 +6,8 @@
 // Datepicker
 @use "stylesheets/decidim/vendor/datepicker_light";
 @use "stylesheets/decidim/datepicker";
+// TomSelect
+@use "stylesheets/decidim/tom_select";
 // On the other hand, the following styles match with specific routes
 @use "stylesheets/decidim/header";
 @use "stylesheets/decidim/footer";

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

@@ -1,3 +1,5 @@
+@use "stylesheets/decidim/editor_suggestions";
+
 .editor-props {
   --editor-active-color: #487bda;
   --editor-disabled-color: #eee;
@@ -5,12 +7,6 @@
   --editor-bubble-shadow-color: #333;
 }
 
-.editor-suggestions-props {
-  --editor-suggestions-border-color: #000;
-  --editor-suggestions-background-color: #eee;
-  --editor-suggestions-selected-highlight-color: #ccc;
-}
-
 .editor-active {
   @apply outline outline-4 outline-[var(--editor-active-color)];
 }
@@ -186,30 +182,3 @@
     }
   }
 }
-
-.editor-suggestions {
-  @apply editor-suggestions-props border-0 bg-[var(--editor-suggestions-background-color)] max-w-sm drop-shadow-md rounded-md;
-
-  &:hover {
-    .editor-suggestions-item[data-selected]:not(:hover) {
-      @apply bg-transparent;
-    }
-  }
-
-  .editor-suggestions-item {
-    @apply block w-full text-left py-[0.375rem] px-1.5 border-0 rounded-none truncate text-sm;
-
-    &:first-child {
-      @apply rounded-t-md;
-    }
-
-    &:last-child {
-      @apply rounded-b-md;
-    }
-
-    &:hover,
-    &[data-selected] {
-      @apply bg-[var(--editor-suggestions-selected-highlight-color)];
-    }
-  }
-}

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

@@ -1,5 +1,13 @@
-.geocoding-container {
-  .user-device-location button {
+.geocoding {
+  &__locate .geocoding__button {
     @apply mt-4;
+
+    &--locating {
+      @apply opacity-70 cursor-wait;
+    }
+
+    .geocoding__spinner {
+      @apply inline-block w-4 h-4 rounded-full animate-spin border-2 border-l-transparent border-y-transparent border-r-secondary align-middle;
+    }
   }
 }

data/app/presenters/decidim/menu_item_presenter.rb

@@ -29,9 +29,9 @@ module Decidim
     delegate :content_tag, :safe_join, :link_to, :active_link_to_class, :is_active_link?, :icon, to: :@view
 
     def render
-      content_tag :li, role: menuitem_role, class: link_wrapper_classes do
+      content_tag :li, role: wrapper_role, class: link_wrapper_classes do
         output = if url == "#"
-                   [content_tag(:span, composed_label, class: "sidebar-menu__item-disabled")]
+                   [content_tag(:span, composed_label, class: "sidebar-menu__item-disabled", role: menuitem_role)]
                  else
                    [link_to(composed_label, url, link_options)]
                  end
@@ -52,7 +52,7 @@ module Decidim
         { aria: { current: "page" } }
       else
         {}
-      end.merge({ class: link_classes })
+      end.merge({ class: link_classes, role: menuitem_role })
     end
 
     def composed_label
@@ -75,6 +75,12 @@ module Decidim
       @options.role || :menuitem
     end
 
+    def wrapper_role
+      return if menuitem_role.blank?
+
+      :presentation
+    end
+
     def active_class
       active_link_to_class(
         url,

data/app/presenters/decidim/stats_presenter.rb

@@ -15,7 +15,7 @@ module Decidim
             hash[name][:data][idx] += value
           end
         else
-          hash[name] = stat
+          hash[name] = stat.merge(data: stat[:data].dup)
         end
       end.values
     end

data/app/uploaders/decidim/image_uploader.rb

@@ -8,7 +8,7 @@ module Decidim
     end
 
     def content_type_allowlist
-      extension_allowlist.map { |ext| MiniMime.lookup_by_extension(ext).content_type }.uniq
+      extension_allowlist.filter_map { |ext| MiniMime.lookup_by_extension(ext)&.content_type }.uniq
     end
 
     # Fetches info about different variants, their processors and dimensions

data/app/views/decidim/delete_user_mailer/delete.html.erb

@@ -0,0 +1,6 @@
+<p class="email-greeting"><%= t(".hello", username: @user_name) %></p>
+
+<p class="email-instructions"><%= t ".body_1" %></p>
+<p class="email-instructions"><%= t ".body_2" %></p>
+
+<p class="email-closing"><%= t(".greetings_html", organization_name: organization_name(@organization), organization_url: decidim.root_url(host: @organization.host)) %></p>

data/app/views/decidim/gamification/badges/index.html.erb

@@ -3,7 +3,7 @@
   description: t(".page_description")
 ) %>
 
-<main class="layout-1col cols-10">
+<main class="layout-1col cols-10" role="main">
 
   <header class="text-center py-10">
     <h1 class="title-decorator inline-block text-left mb-12">

data/app/views/decidim/homepage/show.html.erb

@@ -7,7 +7,7 @@
   )
 %>
 
-<main class="home">
+<main class="home" role="main">
   <% Decidim::ContentBlock.published.for_scope(:homepage, organization: current_organization).each do |content_block| %>
     <% next unless content_block.manifest %>
 

data/app/views/decidim/last_activities/index.html.erb

@@ -1,7 +1,7 @@
 <% add_decidim_page_title(t("last_activity", scope: "decidim.last_activities.index")) %>
 
 <%# NOTE: this page does not use a regular layout %>
-<main class="container">
+<main class="container" role="main">
   <h1 class="title-decorator my-12"><%= t("last_activity", scope: "decidim.last_activities.index") %></h1>
 
   <div class="profile__activity pb-16">

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

@@ -1,21 +1,13 @@
-<div id="messageErrorModal" data-reveal>
-  <div>
-    <h2><%= error %></h2>
-    <button class="close-button" data-close aria-label="<%= t(".close") %>"
-      type="button">
-      <span aria-hidden="true">&times;</span>
-    </button>
-  </div>
-  <div class="reveal__body">
-    <p><%= t(".intro") %></p>
-    <p>
-      <%= messages.join("<br>") %>
-    </p>
-    <p><%= t(".correct_errors") %></p>
-  </div>
-  <div>
-    <div>
-      <a class="button" role="button" href="#" data-close aria-label="<%= t(".ok") %>"><%= t(".ok") %></a>
+<%= decidim_modal id: "messageErrorModal", class: "conversation__modal-error" do %>
+  <div data-dialog-container>
+    <h2 id="dialog-title-messageErrorModal" tabindex="-1" data-dialog-title><%= error %></h2>
+    <div id="dialog-desc-messageErrorModal" class="mt-4">
+      <p><%= t(".intro") %></p>
+      <p><%= safe_join(messages, tag.br) %></p>
+      <p><%= t(".correct_errors") %></p>
+    </div>
+    <div data-dialog-actions>
+      <button type="button" class="button button__sm lg:button__lg button__secondary" data-dialog-close="messageErrorModal" aria-label="<%= t(".ok") %>"><%= t(".ok") %></button>
     </div>
   </div>
-</div>
+<% end %>

data/app/views/decidim/messaging/conversations/error.js.erb

@@ -1,10 +1,15 @@
-var $messageError = $("#messageErrorModal");
-if ($messageError.length > 0) {
-  $messageError.foundation("_destroy").remove();
+var messageError = document.getElementById("messageErrorModal")
+
+if (messageError) {
+  messageError.remove();
 }
+document.body.insertAdjacentHTML("beforeend", "<%= j(render "error_modal", error:, messages:).html_safe %>");
 
-$("#messages").append("<%= j(render "error_modal", error:, messages:).html_safe %>");
-$messageError = $("#messageErrorModal");
+messageError = document.getElementById("messageErrorModal")
+if (messageError) {
+  window.createDialog(messageError);
 
-var messageErrorReveal = new Foundation.Reveal($messageError);
-messageErrorReveal.open();
+  if (Decidim.currentDialogs.messageErrorModal) {
+    window.Decidim.currentDialogs.messageErrorModal.open();
+  }
+}

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

@@ -1,4 +1,4 @@
-<main class="layout-1col cols-6">
+<main class="layout-1col cols-6" role="main">
   <div class="text-center py-12">
     <h1 class="h1 decorator inline-block text-left"><%= t ".unsubscribe" %></h1>
   </div>

data/app/views/decidim/offline/show.html.erb

@@ -1,6 +1,6 @@
 <% add_decidim_page_title(t("decidim.offline.name")) %>
 
-<main id="offline-fallback-html" class="text-center my-8">
+<main id="offline-fallback-html" class="text-center my-8" role="main">
   <div class="flex justify-center">
     <svg xmlns="http://www.w3.org/2000/svg" width="5rem" height="r5em" viewBox="0 0 25 25">
       <path

data/app/views/decidim/pages/index.html.erb

@@ -42,7 +42,7 @@ edit_link(
                 <div id="accordion-panel-<%= ix %>" class="page__accordion-panel" aria-hidden="true">
                   <ul role="menu">
                     <% topic.pages.each do |page| %>
-                      <li role="menuitem"><%= link_to translated_attribute(page.title), page_path(page), class: "text-secondary" %></li>
+                      <li role="presentation"><%= link_to translated_attribute(page.title), page_path(page), class: "text-secondary", role: "menuitem" %></li>
                     <% end %>
                   </ul>
                 </div>

data/app/views/decidim/profiles/show.html.erb

@@ -6,6 +6,6 @@
 <% end %>
 
 <%# NOTE: this page does not use a regular layout %>
-<main>
+<main role="main">
   <%= cell "decidim/profile", profile_holder, context: { content_cell: @content_cell } %>
 </main>

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

@@ -12,12 +12,12 @@
     <ul class="dropdown dropdown__bottom divide-y divide-gray-3" role="menu">
       <%= yield %>
       <% unless defined?(skip_report) && skip_report %>
-        <li role="menuitem" class="dropdown__item">
-          <%= cell "decidim/report_button", resource, button_classes: "dropdown__button" %>
+        <li role="presentation" class="dropdown__item">
+          <%= cell "decidim/report_button", resource, button_classes: "dropdown__button", html_options: { role: "menuitem" } %>
         </li>
       <% end %>
-      <li role="menuitem" class="dropdown__item">
-        <%= cell "decidim/follow_button", resource, large: false, button_classes: "dropdown__button" %>
+      <li role="presentation" class="dropdown__item">
+        <%= cell "decidim/follow_button", resource, large: false, button_classes: "dropdown__button", html_options: { role: "menuitem" } %>
       </li>
     </ul>
   </div>

data/app/views/decidim/user_activities/index.html.erb

@@ -6,7 +6,7 @@
 <% end %>
 
 <%# NOTE: this page does not use a regular layout %>
-<main>
+<main role="main">
   <%= cell "decidim/profile", user, context: {
         content_cell: "decidim/user_activity",
         activities:,

data/app/views/layouts/decidim/_wrapper.html.erb

@@ -11,7 +11,7 @@ end
 %>
 
 <div class="layout-container">
-  <header <%= "class=with-admin-bar" if current_user && allowed_to?(:read, :admin_dashboard) %>>
+  <header <%= "class=with-admin-bar" if current_user && allowed_to?(:read, :admin_dashboard) %> role="banner">
     <div id="header-container">
       <%= render partial: "layouts/decidim/impersonation_warning" %>
       <%= render partial: "layouts/decidim/omnipresent_banner" %>
@@ -37,7 +37,7 @@ end
     <%= yield %>
   </div>
 
-  <footer>
+  <footer role="contentinfo">
     <% if current_user&.ephemeral? || content_for?(:focus_mode) %>
       <%= render partial: "layouts/decidim/footer/focus_mode_main" %>
     <% else %>

data/app/views/layouts/decidim/header/_menu.html.erb

@@ -2,7 +2,7 @@
   <div class="menu-bar">
 
     <%# secondary dropdown only desktop %>
-    <nav class="menu-bar__breadcrumb-desktop">
+    <nav class="menu-bar__breadcrumb-desktop" data-controller="breadcrumb-truncate">
       <%= render partial: "layouts/decidim/header/menu_breadcrumb_desktop" %>
     </nav>
     <% if content_for?(:participatory_space_actions) %>

data/app/views/layouts/decidim/header/_menu_breadcrumb_desktop.html.erb

@@ -1,14 +1,41 @@
 <%= link_to decidim.root_url, class: "menu-bar__breadcrumb-desktop__dropdown-wrapper menu-bar__breadcrumb-desktop__dropdown-trigger" do %>
-  <span class=""><%= t("decidim.menu.home") %></span>
+  <span><%= t("decidim.menu.home") %></span>
 <% end %>
-<% breadcrumb_items.each_with_index do |item, i| %>
+<% truncatable_items = breadcrumb_items.compact_blank.drop(1) %>
+<% breadcrumb_items.each do |item| %>
   <% next if item.blank? %>
 
   <% item_label = translated_attribute(item[:label]) %>
+  <% truncatable = truncatable_items.include?(item) %>
+  <% trigger_classes = ["menu-bar__breadcrumb-desktop__dropdown-trigger"] %>
+  <% if item[:url].present? && !is_active_link?(item[:url], :exclusive) %>
+    <% trigger_classes.unshift("menu-bar__breadcrumb-desktop__dropdown-wrapper") %>
+  <% end %>
+  <% if truncatable %>
+    <% trigger_classes << "menu-bar__breadcrumb-desktop__dropdown-trigger--truncatable" %>
+  <% end %>
   <span aria-hidden="true"><%= icon "arrow-right-s-line", class: "fill-white" %></span>
-  <%= link_to_if(item[:url].present? && !is_active_link?(item[:url], :exclusive), item_label, item[:url], class: "menu-bar__breadcrumb-desktop__dropdown-wrapper menu-bar__breadcrumb-desktop__dropdown-trigger", "aria-current": (item[:active] ? "page" : nil)) do %>
+  <% if item[:url].present? && !is_active_link?(item[:url], :exclusive) %>
+    <%= link_to item[:url], class: trigger_classes.join(" "), data: (truncatable ? { breadcrumb_truncate_target: "item" } : {}), "aria-current": (item[:active] ? "page" : nil) do %>
+      <% if truncatable %>
+        <span class="menu-bar__breadcrumb-desktop__label--truncatable">
+          <span class="menu-bar__breadcrumb-text" data-breadcrumb-truncate-target="text"><%= item_label %></span>
+        </span>
+      <% else %>
+        <span><%= item_label %></span>
+      <% end %>
+    <% end %>
+  <% else %>
     <%# This block is executed if the condition is false %>
-    <%= content_tag :span, item_label, class: "menu-bar__breadcrumb-desktop__dropdown-trigger no-interactive", tabindex: "0", "aria-current": (item[:active] ? "page" : nil) %>
+    <%= content_tag :span, class: [*trigger_classes, "no-interactive"].join(" "), data: (truncatable ? { breadcrumb_truncate_target: "item" } : {}), "aria-current": (item[:active] ? "page" : nil) do %>
+      <% if truncatable %>
+        <span class="menu-bar__breadcrumb-desktop__label--truncatable">
+          <span class="menu-bar__breadcrumb-text" data-breadcrumb-truncate-target="text"><%= item_label %></span>
+        </span>
+      <% else %>
+        <span><%= item_label %></span>
+      <% end %>
+    <% end %>
   <% end %>
 <% end %>
 

data/app/views/layouts/decidim/header/_menu_breadcrumb_mobile.html.erb

@@ -3,22 +3,27 @@
   <% previous_item = non_empty_items[-2] || non_empty_items[-1] %>
 <% end %>
 <div class="menu-bar__breadcrumb-mobile__dropdown-trigger">
-  <span class="inline-block w-full overflow-hidden text-ellipsis align-middle">
-      <span class="cursor-pointer truncate flex items-center gap-x-2">
-        <span aria-hidden="true"><%= icon "arrow-left-s-line" %></span>
-        <% if previous_item %>
-          <% item_label = decidim_escape_translated(previous_item[:label]) %>
-          <% if previous_item[:url].present? && !is_active_link?(previous_item[:url], :exclusive) %>
-            <%= link_to(item_label, previous_item[:url], class: "menu-bar__breadcrumb-item") %>
-          <% else %>
-            <span class="menu-bar__breadcrumb-item"><%= item_label %></span>
+  <span class="menu-bar__breadcrumb-mobile__label-wrapper">
+    <span class="menu-bar__breadcrumb-mobile__label">
+      <% if previous_item %>
+        <% item_label = translated_attribute(previous_item[:label]) %>
+        <% if previous_item[:url].present? && !is_active_link?(previous_item[:url], :exclusive) %>
+          <%= link_to(previous_item[:url], class: "menu-bar__breadcrumb-item", data: { controller: "breadcrumb-truncate" }) do %>
+            <span aria-hidden="true" class="flex items-center"><%= icon "arrow-left-s-line" %></span>
+            <span class="menu-bar__breadcrumb-text" data-breadcrumb-truncate-target="text"><%= item_label %></span>
           <% end %>
         <% else %>
-          <%= link_to decidim.root_url, class: "menu-bar__breadcrumb-item" do %>
-            <span class=""><%= t("decidim.menu.home") %></span>
-          <% end %>
+          <span class="menu-bar__breadcrumb-item" data-controller="breadcrumb-truncate">
+            <span class="menu-bar__breadcrumb-text" data-breadcrumb-truncate-target="text"><%= item_label %></span>
+          </span>
+        <% end %>
+      <% else %>
+        <%= link_to decidim.root_url, class: "menu-bar__breadcrumb-item", data: { controller: "breadcrumb-truncate" } do %>
+          <span aria-hidden="true" class="flex items-center"><%= icon "arrow-left-s-line" %></span>
+          <span class="menu-bar__breadcrumb-text" data-breadcrumb-truncate-target="text"><%= t("decidim.menu.home") %></span>
         <% end %>
-      </span>
+      <% end %>
+    </span>
   </span>
   <% if content_for?(:participatory_space_mobile_actions) %>
     <div class="menu-bar__actions-mobile">