Merge pull request #5988 from betagouv/5608-upload-accessible

Rend accessible le champ Pièce justificative

app/helpers/application_helper.rb

@@ -79,6 +79,12 @@ module ApplicationHelper
     # rubocop:enable Rails/OutputSafety
   end
 
+  def focus_element(selector)
+    # rubocop:disable Rails/OutputSafety
+    raw("document.querySelector('#{selector}').focus();")
+    # rubocop:enable Rails/OutputSafety
+  end
+
   def disable_element(selector)
     # rubocop:disable Rails/OutputSafety
     raw("document.querySelector('#{selector}').disabled = true;")

app/javascript/shared/activestorage/progress-bar.js

@@ -25,6 +25,7 @@ export default class ProgressBar {
     const element = getDirectUploadElement(id);
     if (element) {
       element.classList.remove(PENDING_CLASS);
+      element.focus();
     }
   }
 
@@ -32,6 +33,7 @@ export default class ProgressBar {
     const element = getDirectUploadProgressElement(id);
     if (element) {
       element.style.width = `${progress}%`;
+      element.setAttribute('aria-valuenow', progress);
     }
   }
 
@@ -52,7 +54,7 @@ export default class ProgressBar {
 
   static render(id, filename) {
     return `<div id="direct-upload-${id}" class="direct-upload ${PENDING_CLASS}" data-direct-upload-id="${id}">
-      <div class="direct-upload__progress" style="width: 0%"></div>
+      <div role="progressbar" aria-valuemin="0" aria-valuemax="100" class="direct-upload__progress" style="width: 0%"></div>
       <span class="direct-upload__filename">${filename}</span>
     </div>`;
   }

app/javascript/shared/toggle-target.js

@@ -16,5 +16,6 @@ delegate('click', TOGGLE_SOURCE_SELECTOR, (evt) => {
   const targetElements = document.querySelectorAll(targetSelector);
   for (let target of targetElements) {
     toggle(target);
+    target.focus();
   }
 });

app/views/champs/piece_justificative/show.js.erb

@@ -4,3 +4,5 @@
 <% if attachment.virus_scanner.pending? %>
   <%= fire_event('attachment:update', { url: attachment_url(attachment.id, { signed_id: attachment.blob.signed_id, user_can_upload: true }) }.to_json ) %>
 <% end %>
+
+<%= focus_element("button[data-toggle-target=\".attachment-input-#{attachment.id}\"]") %>

app/views/shared/attachment/_edit.html.haml

@@ -19,7 +19,7 @@
         = render partial: "shared/attachment/show", locals: { attachment: attachment, user_can_upload: true }
       - if user_can_destroy
         .attachment-action
-          = link_to 'Supprimer', attachment_url(attachment.id, { signed_id: attachment.blob.signed_id }), remote: true, method: :delete, class: 'button small danger', data: { disable: true }
+          = link_to 'Supprimer', attachment_url(attachment.id, { signed_id: attachment.blob.signed_id }), remote: true, method: :delete, class: 'button small danger', data: { disable: true }, role: 'button'
       .attachment-action
         = button_tag 'Remplacer', type: 'button', class: 'button small', data: { 'toggle-target': ".attachment-input-#{attachment_id}" }