From a7e2f1ae30655488c1c8e23b03a6e73e5be38116 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Mon, 12 Jul 2021 03:34:59 +0200
Subject: [PATCH] Move file name before the destroy attachment link

This way screen reader users will hear the name of the file before
hearing about the link to destroy it. We were already displaying it this
way visually by having the file name on the left and the destroy link on
the right.

Thanks to this change we can also simplify the code which dynamically
changed the layout.
---
 app/assets/javascripts/documentable.js             | 4 ----
 app/assets/javascripts/imageable.js                | 4 ----
 app/assets/stylesheets/mixins/uploads.scss         | 1 +
 app/components/documents/fields_component.html.erb | 7 +++----
 app/components/images/fields_component.html.erb    | 7 +++----
 5 files changed, 7 insertions(+), 16 deletions(-)

diff --git a/app/assets/javascripts/documentable.js b/app/assets/javascripts/documentable.js
index 53057ff79..3a823dab7 100644
--- a/app/assets/javascripts/documentable.js
+++ b/app/assets/javascripts/documentable.js
@@ -55,8 +55,6 @@
           App.Documentable.setFilename(data, data.result.filename);
           App.Documentable.clearInputErrors(data);
           $(data.addAttachmentLabel).hide();
-          $(data.wrapper).find(".attachment-actions").removeClass("small-12").addClass("small-6 float-right");
-          $(data.wrapper).find(".attachment-actions .action-remove").removeClass("small-3").addClass("small-12");
           destroyAttachmentLink = $(data.result.destroy_link);
           $(data.destroyAttachmentLinkContainer).html(destroyAttachmentLink);
           $(destroyAttachmentLink).on("click", function(event) {
@@ -135,8 +133,6 @@
         },
         complete: function() {
           App.Documentable.unlockUploads();
-          $(data.wrapper).find(".attachment-actions").addClass("small-12").removeClass("small-6 float-right");
-          $(data.wrapper).find(".attachment-actions .action-remove").addClass("small-3").removeClass("small-12");
           if ($(data.input).data("nested-document") === true) {
             $(data.wrapper).remove();
           } else {
diff --git a/app/assets/javascripts/imageable.js b/app/assets/javascripts/imageable.js
index 62b3b9731..86ef7346e 100644
--- a/app/assets/javascripts/imageable.js
+++ b/app/assets/javascripts/imageable.js
@@ -53,8 +53,6 @@
           App.Imageable.setFilename(data, data.result.filename);
           App.Imageable.clearInputErrors(data);
           $(data.addAttachmentLabel).hide();
-          $(data.wrapper).find(".attachment-actions").removeClass("small-12").addClass("small-6 float-right");
-          $(data.wrapper).find(".attachment-actions .action-remove").removeClass("small-3").addClass("small-12");
           App.Imageable.setPreview(data);
           destroyAttachmentLink = $(data.result.destroy_link);
           $(data.destroyAttachmentLinkContainer).html(destroyAttachmentLink);
@@ -135,8 +133,6 @@
         },
         complete: function() {
           $("#new_image_link").removeClass("hide");
-          $(data.wrapper).find(".attachment-actions").addClass("small-12").removeClass("small-6 float-right");
-          $(data.wrapper).find(".attachment-actions .action-remove").addClass("small-3").removeClass("small-12");
           if ($(data.input).data("nested-image") === true) {
             $(data.wrapper).remove();
           } else {
diff --git a/app/assets/stylesheets/mixins/uploads.scss b/app/assets/stylesheets/mixins/uploads.scss
index 1aa737553..d5c5936c6 100644
--- a/app/assets/stylesheets/mixins/uploads.scss
+++ b/app/assets/stylesheets/mixins/uploads.scss
@@ -41,6 +41,7 @@
   }
 
   .file-name {
+    padding-left: 0;
     margin-top: 0;
 
     &:empty {
diff --git a/app/components/documents/fields_component.html.erb b/app/components/documents/fields_component.html.erb
index 91d1a19d5..4ae94c81b 100644
--- a/app/components/documents/fields_component.html.erb
+++ b/app/components/documents/fields_component.html.erb
@@ -11,15 +11,14 @@
     <div class="small-9 column action-add attachment-errors document-attachment">
       <%= file_field %>
     </div>
+
+    <p class="file-name small-9 column"><%= file_name %></p>
+
     <div class="small-3 column action-remove text-right">
       <%= destroy_link %>
     </div>
   </div>
 
-  <div class="small-6 column">
-    <p class="file-name"><%= file_name %></p>
-  </div>
-
   <div class="small-12 column">
     <div class="progress-bar-placeholder"><div class="loading-bar"></div></div>
   </div>
diff --git a/app/components/images/fields_component.html.erb b/app/components/images/fields_component.html.erb
index 00985abc0..b83251726 100644
--- a/app/components/images/fields_component.html.erb
+++ b/app/components/images/fields_component.html.erb
@@ -13,15 +13,14 @@
     <div class="small-9 column action-add attachment-errors image-attachment">
       <%= file_field %>
     </div>
+
+    <p class="file-name small-9 column"><%= file_name %></p>
+
     <div class="small-3 column action-remove text-right">
       <%= destroy_link %>
     </div>
   </div>
 
-  <div class="small-6 column">
-    <p class="file-name"><%= file_name %></p>
-  </div>
-
   <div class="small-12 column">
     <div class="progress-bar-placeholder"><div class="loading-bar"></div></div>
   </div>