consul/nairobi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Move file name before the destroy attachment link

Browse Source 
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.
This commit is contained in:
Javi Martín
2021-07-12 03:34:59 +02:00
parent acbd1b0239
commit a7e2f1ae30
5 changed files with 7 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/assets/javascripts/documentable.js
View File

@@ -55,8 +55,6 @@
App.Documentable.setFilename(data, data.result.filename); App.Documentable.setFilename(data, data.result.filename);
App.Documentable.clearInputErrors(data); App.Documentable.clearInputErrors(data);
$(data.addAttachmentLabel).hide(); $(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); destroyAttachmentLink = $(data.result.destroy_link);
$(data.destroyAttachmentLinkContainer).html(destroyAttachmentLink); $(data.destroyAttachmentLinkContainer).html(destroyAttachmentLink);
$(destroyAttachmentLink).on("click", function(event) { $(destroyAttachmentLink).on("click", function(event) {
@@ -135,8 +133,6 @@
}, },
complete: function() { complete: function() {
App.Documentable.unlockUploads(); 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) { if ($(data.input).data("nested-document") === true) {
$(data.wrapper).remove(); $(data.wrapper).remove();
} else { } else {

4
app/assets/javascripts/imageable.js
View File

@@ -53,8 +53,6 @@
App.Imageable.setFilename(data, data.result.filename); App.Imageable.setFilename(data, data.result.filename);
App.Imageable.clearInputErrors(data); App.Imageable.clearInputErrors(data);
$(data.addAttachmentLabel).hide(); $(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); App.Imageable.setPreview(data);
destroyAttachmentLink = $(data.result.destroy_link); destroyAttachmentLink = $(data.result.destroy_link);
$(data.destroyAttachmentLinkContainer).html(destroyAttachmentLink); $(data.destroyAttachmentLinkContainer).html(destroyAttachmentLink);
@@ -135,8 +133,6 @@
}, },
complete: function() { complete: function() {
$("#new_image_link").removeClass("hide"); $("#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) { if ($(data.input).data("nested-image") === true) {
$(data.wrapper).remove(); $(data.wrapper).remove();
} else { } else {

1
app/assets/stylesheets/mixins/uploads.scss
View File

@@ -41,6 +41,7 @@
} }
.file-name { .file-name {
padding-left: 0;
margin-top: 0; margin-top: 0;
&:empty { &:empty {

7
app/components/documents/fields_component.html.erb
View File

@@ -11,15 +11,14 @@
<div class="small-9 column action-add attachment-errors document-attachment"> <div class="small-9 column action-add attachment-errors document-attachment">
<%= file_field %> <%= file_field %>
</div> </div>
<p class="file-name small-9 column"><%= file_name %></p>
<div class="small-3 column action-remove text-right"> <div class="small-3 column action-remove text-right">
<%= destroy_link %> <%= destroy_link %>
</div> </div>
</div> </div>
<div class="small-6 column">
<p class="file-name"><%= file_name %></p>
</div>
<div class="small-12 column"> <div class="small-12 column">
<div class="progress-bar-placeholder"><div class="loading-bar"></div></div> <div class="progress-bar-placeholder"><div class="loading-bar"></div></div>
</div> </div>

7
app/components/images/fields_component.html.erb
View File

@@ -13,15 +13,14 @@
<div class="small-9 column action-add attachment-errors image-attachment"> <div class="small-9 column action-add attachment-errors image-attachment">
<%= file_field %> <%= file_field %>
</div> </div>
<p class="file-name small-9 column"><%= file_name %></p>
<div class="small-3 column action-remove text-right"> <div class="small-3 column action-remove text-right">
<%= destroy_link %> <%= destroy_link %>
</div> </div>
</div> </div>
<div class="small-6 column">
<p class="file-name"><%= file_name %></p>
</div>
<div class="small-12 column"> <div class="small-12 column">
<div class="progress-bar-placeholder"><div class="loading-bar"></div></div> <div class="progress-bar-placeholder"><div class="loading-bar"></div></div>
</div> </div>