decidim-comments 0.28.1 → 0.29.0.rc1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f56674cf1871898096ef02f63583abeb149286e0500056e747b74be60e2028ed
-  data.tar.gz: 8d6a096ed694a4a833c376c9a9c7fe1cf0b691dd571fd33bdc439796f025d3b1
+  metadata.gz: 3d55828915033b2a2a4a6443c316df98042bbbdc627f70c2d4bcf4ef9c983131
+  data.tar.gz: 247c5198c406f27a1ca6de26bcb8c2b8621b6789a4fd6aa92c2b4df4705d885f
 SHA512:
-  metadata.gz: 76c1112767d32925c6ebc0ee12e153f050b4814554aca1357aecfb905bdb734541d104d65208b5cfcdade9792a225cb83b1c1e5afd34a31984c9af2d35d3f604
-  data.tar.gz: 52718130d906ccc942afaff78dd4e75ba5274c6bf88bd8b3fd8aa4215c74afc005a09c7e6f0493340c56d1adca7ed2a48c782413ee13a561a157abd90f7cd549
+  metadata.gz: 4ff6042bb9daf77d523c9d6ef46a4bf20d34cb726c2e9cd5d959877ead8491c498d987b46e9a64b1e865a25c62b9c1fe0f1f6d6be69f35f7b7b22537fdaba84d
+  data.tar.gz: 1da79ef396ae8c7e7bd4ccb96f8fc0e7f75af9b861f618efe09e41f608d11e9d36829fb299d705dfcd1479eaa05b519d6206145f0df0e774d7fa09f2a636a137

data/app/cells/decidim/comments/comment/actions.erb

@@ -1,14 +1,14 @@
 <div class="comment__actions">
   <% if depth.zero? && has_replies_in_children? %>
-    <button class="button button__sm button__text-secondary comment__hide" data-controls="comment-<%= model.id %>-replies">
-      <%= icon "arrow-up-s-line" %>
-      <span class="hide-comment-replies font-normal"><%= t("decidim.components.comment.hide_replies") %></span>
+    <button class="button button__sm button__text-secondary" data-comment-hide data-controls="comment-<%= model.id %>-replies" data-open="true" id="comment-<%= model.id %>-replies-trigger">
       <%= icon "arrow-down-s-line" %>
-      <span class="show-comment-replies font-normal"><%= t("decidim.components.comment.show_replies", count: replies.size, replies_count: replies.size ) %></span>
+      <span data-show-comment-reply class="font-normal"><%= t("decidim.components.comment.show_replies", count: replies.size) %></span>
+      <%= icon "arrow-up-s-line" %>
+      <span data-hide-comment-reply class="font-normal"><%= t("decidim.components.comment.hide_replies", count: replies.size) %></span>
     </button>
   <% end %>
   <% if can_reply? %>
-    <button class="button button__sm button__text-secondary" data-controls="panel-<%= reply_id %>">
+    <button class="button button__sm button__text-secondary" data-controls="panel-<%= reply_id %>" id="panel-<%= reply_id %>-trigger">
       <%= icon "chat-1-line" %>
       <span class="font-normal"><%= t("decidim.components.comment.reply") %></span>
       <%= icon "close-circle-line" %>

data/app/cells/decidim/comments/comment/deletion_data.erb

@@ -1,6 +1,6 @@
 <%= render partial: "decidim/comments/comments/delete", formats: [:html], locals: { comment: model } %>
 
-<div class="comment__footer" data-component="accordion" id="accordion-<%= model.id %>">
+<div data-comment-footer data-component="accordion" id="accordion-<%= model.id %>">
   <div id="comment-<%= model.id %>-replies" class="<%= "comment-reply" if has_replies_in_children? %>">
     <% if has_replies_in_children? %>
       <%= render :replies %>

data/app/cells/decidim/comments/comment/show.erb

@@ -1,10 +1,12 @@
-<%= content_tag :div, id: "comment_#{model.id}", class: "comment relative", data: { comment_id: model.id } do %>
+<%= content_tag :div, id: "comment_#{model.id}", class: "comment relative", role: "comment", data: { comment_id: model.id, parent: parent_element_id } do %>
   <% if model.hidden? %>
     <%= render :moderation_data %>
   <% elsif model.deleted? %>
     <%= render :deletion_data %>
   <% else %>
     <div class="comment__header">
+      <div class="sr-only"><%= comment_label %></div>
+
       <span class="font-bold">
         <%== cell("decidim/author", author_presenter) %>
       </span>
@@ -18,7 +20,7 @@
       <% end %>
 
       <div class="relative ml-auto">
-        <button id="dropdown-trigger-<%= context_menu_id %>" data-component="dropdown" data-target="dropdown-menu-<%= context_menu_id %>">
+        <button id="dropdown-trigger-<%= context_menu_id %>" data-component="dropdown" data-target="dropdown-menu-<%= context_menu_id %>" aria-label="<%= t("decidim.components.comment.controls_label") %>">
           &#8230;
         </button>
 
@@ -61,13 +63,13 @@
       </div>
     </div>
 
-    <div class="comment__footer" data-component="accordion" id="accordion-<%= model.id %>">
+    <div data-comment-footer data-component="accordion" id="accordion-<%= model.id %>">
       <div class="comment__footer-grid">
         <%= render :actions %>
         <%= votes %>
       </div>
       <% if can_reply? %>
-        <div id="panel-<%= reply_id %>" class="add-comment comment__additionalreply">
+        <div id="panel-<%= reply_id %>" class="add-comment" data-additional-reply>
           <%== cell("decidim/comments/comment_form", model, root_depth:, order:) %>
         </div>
       <% end %>

data/app/cells/decidim/comments/comment_cell.rb

@@ -4,8 +4,6 @@ module Decidim
   module Comments
     # A cell to display a single comment.
     class CommentCell < Decidim::ViewModel
-      include ActionView::Helpers::DateHelper
-      include Decidim::IconHelper
       include Decidim::ResourceHelper
       include Cell::ViewModel::Partial
 
@@ -39,6 +37,24 @@ module Decidim
 
       private
 
+      def parent_element_id
+        return unless reply?
+
+        "comment_#{model.decidim_commentable_id}"
+      end
+
+      def comment_label
+        if reply?
+          t("decidim.components.comment.comment_label_reply", comment_id: model.id, parent_comment_id: model.decidim_commentable_id)
+        else
+          t("decidim.components.comment.comment_label", comment_id: model.id)
+        end
+      end
+
+      def reply?
+        model.decidim_commentable_type == model.class.name
+      end
+
       def cache_hash
         return @hash if defined?(@hash)
 

data/app/cells/decidim/comments/comment_form/opinion.erb

@@ -1,15 +1,15 @@
 <div>
   <span class="comment__opinion-label"><%= t("decidim.components.add_comment_form.opinion.label") %></span>
-  <div class="opinion-toggle comment__opinion-container">
-    <button type="button" aria-pressed="false" class="opinion-toggle--ok" data-selected-label="<%= t("decidim.components.add_comment_form.opinion.positive_selected") %>">
+  <div data-opinion-toggle class="comment__opinion-container">
+    <button type="button" aria-pressed="false" data-toggle-ok="true" data-selected-label="<%= t("decidim.components.add_comment_form.opinion.positive_selected") %>">
       <span><%= t("decidim.components.comment.alignment.in_favor") %></span>
       <%= icon "thumb-up-line" %>
     </button>
-    <button type="button" aria-pressed="true" class="opinion-toggle--meh is-active" data-selected-label="<%= t("decidim.components.add_comment_form.opinion.neutral_selected") %>">
+    <button type="button" aria-pressed="true" class="is-active" data-toggle-meh="true" data-selected-label="<%= t("decidim.components.add_comment_form.opinion.neutral_selected") %>">
       <span><%= t("decidim.components.add_comment_form.opinion.neutral") %></span>
       <%= icon "loader-3-line" %>
     </button>
-    <button type="button" aria-pressed="false" class="opinion-toggle--ko" data-selected-label="<%= t("decidim.components.add_comment_form.opinion.negative_selected") %>">
+    <button type="button" aria-pressed="false" data-toggle-ko="true" data-selected-label="<%= t("decidim.components.add_comment_form.opinion.negative_selected") %>">
       <span><%= t("decidim.components.comment.alignment.against") %></span>
       <%= icon "thumb-down-line" %>
     </button>

data/app/cells/decidim/comments/comment_form_cell.rb

@@ -4,8 +4,6 @@ module Decidim
   module Comments
     # A cell to display a form for adding a new comment.
     class CommentFormCell < Decidim::ViewModel
-      delegate :current_user, :user_signed_in?, to: :controller
-
       def comment_as_for(form)
         return if verified_user_groups.blank?
 

data/app/cells/decidim/comments/comment_metadata_cell.rb

@@ -14,7 +14,7 @@ module Decidim
 
       def commentable_item
         {
-          text: decidim_html_escape(translated_attribute(root_commentable.title)),
+          text: decidim_escape_translated(root_commentable.title),
           icon: resource_type_icon_key(root_commentable.class)
         }
       end

data/app/cells/decidim/comments/comment_thread/show.erb

@@ -1,3 +1,3 @@
-<div class="comment-thread">
+<div class="comment-thread" role="region">
   <%= cell("decidim/comments/comment", model, root_depth: model.depth, order:) %>
 </div>

data/app/cells/decidim/comments/comments/order_control.erb

@@ -5,7 +5,8 @@
         t("decidim.components.comment_order_selector.order.#{order_value}"),
         decidim_comments.comments_path(commentable_gid: model.to_signed_global_id.to_s, order: order_value, reload: 1),
         class: "button button__sm button__text-secondary only:m-auto comment-order-by__item inline-block #{order_value == order ? "underline font-bold" : ""}",
-        remote: true
+        remote: true,
+        aria: { controls: threads_node_id }
       ) %>
     </div>
   <% end %>

data/app/cells/decidim/comments/comments/show.erb

@@ -16,7 +16,7 @@
       </div>
       <%= single_comment_warning %>
       <%= blocked_comments_warning %>
-      <div class="comment-threads">
+      <div class="comment-threads" id="<%= threads_node_id %>" aria-live="polite">
         <%= comments_loading %>
         <% comments.each do |comment| %>
           <%= cell("decidim/comments/comment_thread", comment, order:) %>

data/app/cells/decidim/comments/comments/user_comments_blocked_warning.erb

@@ -1,10 +1,10 @@
 <%# We cannot use the AnnouncementCell directly here as the link is escaped and it would not work %>
 <div class="flash warning" data-announcement="">
-  <span class="flash__message">
+  <div class="flash__message">
     <% if comment_permissions? %>
       <p><%= blocked_comments_for_unauthorized_user_warning_link %></p>
     <% else %>
       <p><%= t("decidim.components.comments.blocked_comments_for_user_warning") %></p>
     <% end %>
-  </span>
+  </div>
 </div>

data/app/cells/decidim/comments/comments_cell.rb

@@ -4,10 +4,7 @@ module Decidim
   module Comments
     # A cell to display a comments section for a commentable object.
     class CommentsCell < Decidim::ViewModel
-      include Decidim::IconHelper
-
       delegate :user_signed_in?, to: :controller
-
       def add_comment
         return if single_comment?
         return if comments_blocked?
@@ -30,7 +27,7 @@ module Decidim
 
       def blocked_comments_warning
         return unless comments_blocked?
-        return unless user_comments_blocked?
+        return if user_comments_blocked?
 
         render :blocked_comments_warning
       end
@@ -88,6 +85,10 @@ module Decidim
         "comments-for-#{commentable_type.demodulize}-#{model.id}"
       end
 
+      def threads_node_id
+        "#{node_id}-threads"
+      end
+
       def commentable_type
         model.commentable_type
       end

data/app/cells/decidim/comments/edit_comment_modal_form_cell.rb

@@ -4,7 +4,6 @@ module Decidim
   module Comments
     # A cell to display a form for editing a comment.
     class EditCommentModalFormCell < Decidim::ViewModel
-      delegate :current_user, :user_signed_in?, to: :controller
       alias comment model
 
       private

data/app/commands/decidim/comments/create_comment.rb

@@ -4,12 +4,12 @@ module Decidim
   module Comments
     # A command with all the business logic to create a new comment
     class CreateComment < Decidim::Command
+      delegate :current_user, to: :form
       # Public: Initializes the command.
       #
       # form - A form object with the params.
-      def initialize(form, author)
+      def initialize(form)
         @form = form
-        @author = author
       end
 
       # Executes the command. Broadcasts these events:
@@ -30,13 +30,13 @@ module Decidim
 
       private
 
-      attr_reader :form, :comment, :author
+      attr_reader :form, :comment
 
       def event_arguments
         {
           resource: comment,
           extra: {
-            event_author: form.current_user,
+            event_author: current_user,
             locale:
           }
         }
@@ -46,7 +46,7 @@ module Decidim
         parsed = Decidim::ContentProcessor.parse(form.body, current_organization: form.current_organization)
 
         params = {
-          author:,
+          author: current_user,
           commentable: form.commentable,
           root_commentable: root_commentable(form.commentable),
           body: { I18n.locale => parsed.rewrite },
@@ -57,7 +57,7 @@ module Decidim
 
         @comment = Decidim.traceability.create!(
           Comment,
-          author,
+          current_user,
           params,
           visibility: "public-only"
         )

data/app/commands/decidim/comments/update_comment.rb

@@ -4,14 +4,13 @@ module Decidim
   module Comments
     # A command with all the business logic to update an existing comment
     class UpdateComment < Decidim::Command
+      delegate :current_user, to: :form
       # Public: Initializes the command.
       #
       # comment - Decidim::Comments::Comment
-      # current_user - Decidim::User
       # form - A form object with the params.
-      def initialize(comment, current_user, form)
+      def initialize(comment, form)
         @comment = comment
-        @current_user = current_user
         @form = form
       end
 
@@ -33,7 +32,7 @@ module Decidim
 
       private
 
-      attr_reader :form, :comment, :current_user
+      attr_reader :form, :comment
 
       def event_arguments
         {

data/app/controllers/decidim/comments/comments_controller.rb

@@ -53,10 +53,11 @@ module Decidim
         form = Decidim::Comments::CommentForm.from_params(
           params.merge(commentable: comment.commentable)
         ).with_context(
+          current_user:,
           current_organization:
         )
 
-        Decidim::Comments::UpdateComment.call(comment, current_user, form) do
+        Decidim::Comments::UpdateComment.call(comment, form) do
           on(:ok) do
             respond_to do |format|
               format.js { render :update }
@@ -78,9 +79,10 @@ module Decidim
           params.merge(commentable:)
         ).with_context(
           current_organization:,
-          current_component:
+          current_component:,
+          current_user:
         )
-        Decidim::Comments::CreateComment.call(form, current_user) do
+        Decidim::Comments::CreateComment.call(form) do
           on(:ok) do |comment|
             handle_success(comment)
             respond_to do |format|

data/app/events/decidim/comments/comment_event.rb

@@ -14,6 +14,10 @@ module Decidim
           comment.formatted_body(override_translation)
         end
 
+        def hidden_resource?
+          super || (comment.respond_to?(:hidden?) && comment.hidden?)
+        end
+
         def author
           comment.normalized_author
         end

data/app/helpers/decidim/comments/comment_cells_helper.rb

@@ -22,7 +22,7 @@ module Decidim
       delegate :root_commentable, to: :comment
 
       def root_commentable_title
-        decidim_html_escape(translated_attribute(root_commentable.title))
+        decidim_escape_translated(root_commentable.title)
       end
 
       def url_params

data/app/models/decidim/comments/seed.rb

@@ -9,7 +9,7 @@ module Decidim
       class << self
         # Adds a random amount of comments for a given resource.
         #
-        # @param resource [Object] - the Decidim resource to add the coments to.
+        # @param resource [Object] - the Decidim resource to add the comments to.
         #                            examples: Decidim::Proposals::CollaborativeDraft, Decidim::Proposals::Proposal,
         #
         # @return nil
@@ -18,14 +18,28 @@ module Decidim
 
           Decidim::Comments::Comment.reset_column_information
 
+          @organization = resource.organization
+
           rand(0..6).times do
-            comment = create_comment(resource)
-            create_comment(comment, resource) if [true, false].sample
+            comment1 = create_comment(resource)
+            NewCommentNotificationCreator.new(comment1, [], []).create
+
+            if [true, false].sample
+              comment2 = create_comment(comment1, resource)
+              NewCommentNotificationCreator.new(comment2, [], []).create
+            end
+
+            next if [true, false].sample
+
+            create_votes(comment1) if comment1
+            create_votes(comment2) if comment2
           end
         end
 
         private
 
+        attr_reader :organization
+
         # Creates a comment for a given resource.
         #
         # @private
@@ -35,8 +49,8 @@ module Decidim
         #
         # @return [Decidim::Comments::Comment]
         def create_comment(resource, root_commentable = nil)
-          author = Decidim::User.where(organization: resource.organization).all.sample
-          user_group = [true, false].sample ? Decidim::UserGroups::ManageableUserGroups.for(author).verified.sample : nil
+          author = random_user
+          user_group = random_user_group(author)
 
           params = {
             commentable: resource,
@@ -53,6 +67,42 @@ module Decidim
             visibility: "public-only"
           )
         end
+
+        # Creates a random amount of votes for a given comment.
+        # The votes can be from a user or a user group.
+        #
+        # @private
+        #
+        # @param [Decidim::Comments::Comment]
+        #
+        # @return nil
+        def create_votes(comment)
+          rand(0..12).times do
+            user = random_user
+            user_group = random_user_group(user)
+            author = [user, user_group].compact.sample
+            next if CommentVote.where(comment:, author:).any?
+
+            CommentVote.create!(comment:, author:, weight: [1, -1].sample)
+          end
+
+          nil
+        rescue ActiveRecord::AssociationTypeMismatch
+          nil # in case there is a mismatch, we ignore the error as it is not important for the seeding
+        end
+
+        def random_user
+          user = Decidim::User.where(organization:).not_deleted.not_blocked.confirmed.sample
+
+          user.valid? ? user : random_user
+        end
+
+        def random_user_group(user)
+          user_group = Decidim::UserGroups::ManageableUserGroups.for(user).verified.sample
+          return nil unless user_group&.valid?
+
+          [true, false].sample ? user_group : nil
+        end
       end
     end
   end

data/app/packs/entrypoints/decidim_comments.js

@@ -1,5 +1,5 @@
 // CSS
 import "stylesheets/comments.scss"
 
-// Javacript
+// JavaScript
 import "src/decidim/comments/comments"

data/app/packs/src/decidim/comments/comments.component.js

@@ -2,7 +2,7 @@
 /* eslint max-lines: ["error", {"max": 350, "skipBlankLines": true}] */
 
 /**
- * A plain Javascript component that handles the comments.
+ * A plain JavaScript component that handles the comments.
  *
  * @class
  * @augments Component
@@ -56,7 +56,7 @@ export default class CommentsComponent {
       this.mounted = false;
       this._stopPolling();
 
-      $(".add-comment .opinion-toggle button", this.$element).off("click.decidim-comments");
+      $(".add-comment [data-opinion-toggle] button", this.$element).off("click.decidim-comments");
       $(".add-comment textarea", this.$element).off("input.decidim-comments");
       $(".add-comment form", this.$element).off("submit.decidim-comments");
       $(".add-comment textarea", this.$element).each((_i, el) => el.removeEventListener("emoji.added", this._onTextInput));
@@ -117,7 +117,7 @@ export default class CommentsComponent {
     $(".add-comment", $parent).each((_i, el) => {
       const $add = $(el);
       const $form = $("form", $add);
-      const $opinionButtons = $(".opinion-toggle button", $add);
+      const $opinionButtons = $("[data-opinion-toggle] button", $add);
       const $text = $("textarea", $form);
 
       $opinionButtons.on("click.decidim-comments", this._onToggleOpinion);
@@ -280,18 +280,18 @@ export default class CommentsComponent {
 
     const $add = $btn.closest(".add-comment");
     const $form = $("form", $add);
-    const $opinionButtons = $(".opinion-toggle button", $add);
-    const $selectedState = $(".opinion-toggle .selected-state", $add);
+    const $opinionButtons = $("[data-opinion-toggle] button", $add);
+    const $selectedState = $("[data-opinion-toggle] .selected-state", $add);
     const $alignment = $(".alignment-input", $form);
 
     $opinionButtons.removeClass("is-active").attr("aria-pressed", "false");
     $btn.addClass("is-active").attr("aria-pressed", "true");
 
-    if ($btn.is(".opinion-toggle--ok")) {
+    if ($btn.data("toggleOk")) {
       $alignment.val(1);
-    } else if ($btn.is(".opinion-toggle--meh")) {
+    } else if ($btn.data("toggleMeh")) {
       $alignment.val(0);
-    } else if ($btn.is(".opinion-toggle--ko")) {
+    } else if ($btn.data("toggleKo")) {
       $alignment.val(-1);
     }
 

data/app/packs/src/decidim/comments/comments.component.test.js

@@ -45,7 +45,7 @@ describe("CommentsComponent", () => {
   const spyOnAddComment = (methodToSpy) => {
     addComment.each((i) => {
       addComment[i].$ = $(addComment[i]);
-      addComment[i].opinionToggles = $(".opinion-toggle button", addComment[i].$);
+      addComment[i].opinionToggles = $("[data-opinion-toggle] button", addComment[i].$);
       addComment[i].commentForm = $("form", addComment[i].$);
       addComment[i].commentTextarea = $("textarea", addComment[i].commentForm);
 
@@ -66,7 +66,7 @@ describe("CommentsComponent", () => {
         return orderLinks;
       } else if (jqSelector === ".add-comment" && parent.is(subject.$element)) {
         return addComment;
-      } else if (jqSelector === ".add-comment .opinion-toggle button" && parent.is(subject.$element)) {
+      } else if (jqSelector === ".add-comment [data-opinion-toggle] button" && parent.is(subject.$element)) {
         return allToggles;
       } else if (jqSelector === ".add-comment textarea" && parent.is(subject.$element)) {
         return allTextareas;
@@ -75,7 +75,7 @@ describe("CommentsComponent", () => {
       }
       const addCommentsArray = addComment.toArray();
       for (let i = 0; i < addCommentsArray.length; i += 1) {
-        if (jqSelector === ".opinion-toggle button" && parent.is(addCommentsArray[i].$)) {
+        if (jqSelector === "[data-opinion-toggle] button" && parent.is(addCommentsArray[i].$)) {
           return addCommentsArray[i].opinionToggles;
         } else if (jqSelector === "form" && parent.is(addCommentsArray[i].$)) {
           return addCommentsArray[i].commentForm;
@@ -102,7 +102,7 @@ describe("CommentsComponent", () => {
     </div>
 
       <div class="form__wrapper gap-2">
-        <label class="show-for-sr" for="add-comment-${modelName}-${modelId}">
+        <label for="add-comment-${modelName}-${modelId}">
           Comment
         </label>
         <span class="emoji__container">
@@ -233,7 +233,7 @@ describe("CommentsComponent", () => {
         <div class="comment__content">
           <div><p>${content}</p></div>
         </div>
-        <div class="comment__footer" data-component="accordion" role="presentation">
+        <div data-comment-footer data-component="accordion" role="presentation">
           <div class="comment__footer-grid">
             <div class="comment__actions">
               <button class="button button__sm button__text-secondary" data-controls="panel-comment${commentId}-reply" role="button" tabindex="0" aria-controls="panel-comment${commentId}-reply" aria-expanded="false" aria-disabled="false">
@@ -323,30 +323,30 @@ describe("CommentsComponent", () => {
               ${secondThread}
             </div>
             <div class="add-comment">
-              <div class="opinion-toggle button-group comment__opinion-container">
-                <span class="show-for-sr py-1.5">Your opinion about this topic</span>
-                <button aria-pressed="false" class="button button__sm button__text-secondary opinion-toggle--ok" data-selected-label="Your opinion about this topic is positive">
+              <div data-opinion-toggle class="button-group comment__opinion-container">
+                <span class="py-1.5">Your opinion about this topic</span>
+                <button aria-pressed="false" class="button button__sm button__text-secondary" data-toggle-ok="true" data-selected-label="Your opinion about this topic is positive">
                   <svg width="1em" height="1em" role="img" aria-hidden="true"><use href="/decidim-packs/media/images/remixicon.symbol-5540ed538fb6bd400d2a.svg#ri-thumb-up-line" tabindex="-1"></use></svg>
                   <svg width="1em" height="1em" role="img" aria-hidden="true"><use href="/decidim-packs/media/images/remixicon.symbol-5540ed538fb6bd400d2a.svg#ri-thumb-up-fill" tabindex="-1"></use></svg>
-                  <span class="show-for-sr">Positive</span>
+                  <span>Positive</span>
                 </button>
-                <button aria-pressed="true" class="button button__sm button__text-secondary opinion-toggle--meh is-active" data-selected-label="Your opinion about this topic is neutral">
-                  <span class="show-for-sr">Neutral
+                <button aria-pressed="true" class="button button__sm button__text-secondary is-active" data-toggle-meh="true" data-selected-label="Your opinion about this topic is neutral">
+                  <span>Neutral
                   </span>
                 </button>
-                <button aria-pressed="false" class="button button__sm button__text-secondary opinion-toggle--ko" data-selected-label="Your opinion about this topic is negative">
+                <button aria-pressed="false" class="button button__sm button__text-secondary"  data-toggle-ko="true" data-selected-label="Your opinion about this topic is negative">
                   <svg width="1em" height="1em" role="img" aria-hidden="true"><use href="/decidim-packs/media/images/remixicon.symbol-5540ed538fb6bd400d2a.svg#ri-thumb-down-line" tabindex="-1"></use></svg>
                   <svg width="1em" height="1em" role="img" aria-hidden="true"><use href="/decidim-packs/media/images/remixicon.symbol-5540ed538fb6bd400d2a.svg#ri-thumb-down-fill" tabindex="-1"></use></svg>
-                  <span class="show-for-sr">Negative</span>
+                  <span>Negative</span>
                 </button>
                 <div role="alert" aria-live="assertive" aria-atomic="true" class="selected-state sr-only"></div>
               </div>
               ${generateCommentForm("Dummy", 123)}
             </div>
             <div class="flash primary loading-comments hidden">
-              <span class="flash__message">
+              <div class="flash__message">
                 Loading comments ...
-              </span>
+              </div>
             </div>
         </div>
       </div>
@@ -371,7 +371,7 @@ describe("CommentsComponent", () => {
     addComment = $(".add-comment", subject.$element);
     orderLinks = $(".comment-order-by a.comment-order-by__item", subject.$element);
 
-    allToggles = $(".add-comment .opinion-toggle .button", subject.$element);
+    allToggles = $(".add-comment [data-opinion-toggle] .button", subject.$element);
     allTextareas = $(".add-comment textarea", subject.$element);
     allForms = $(".add-comment form", subject.$element);
   });

data/app/views/decidim/comments/comments/create.js.erb

@@ -8,8 +8,8 @@
   if (inReplyTo) {
     component.addReply(inReplyTo, commentHtml, true);
 
-    var hideButton = $("#comment_" + <%= root_comment.id %>).find(".comment__hide").first();
-    hideButton.find(".show-comment-replies").first().html('<%= t("decidim.components.comment.show_replies", count: Decidim::Comments::SortedComments.for(root_comment.reload).size) %>');
+    var hideButton = $("#comment_" + <%= root_comment.id %>).find("[data-comment-hide]").first();
+    hideButton.find("[data-show-comment-reply]").first().html('<%= t("decidim.components.comment.show_replies", count: Decidim::Comments::SortedComments.for(root_comment.reload).size) %>');
 
   } else {
     component.addThread(commentHtml, true);

data/app/views/decidim/comments/comments/delete.js.erb

@@ -5,11 +5,14 @@ $(() => {
   const $comment = $(`#comment_${commentId}`);
   const $commentReply = $(`#comment${commentId}-reply`);
   const $content = $("> .comment__content", $comment);
-  const sectionsToDelete = ["header", "footer-grid", "reply", "additionalreply"];
+  const sectionsToDelete = ["footer-grid", "reply"];
 
   sectionsToDelete.forEach((section) => {
-    $(`> .comment__${section}`, $comment).remove();
+    $(`#comment_${commentId} > [data-comment-footer] > .comment__${section}`).remove();
   });
+  $(`#comment_${commentId} > .comment__header`).remove();
+  $(`#comment_${commentId} > [data-additional-reply]`).remove();
+
   $commentReply.remove();
   $content.replaceWith(deleteDataHtml);
   Rails.fire(document, "comments:loaded", {