Merge pull request #5988 from betagouv/5608-upload-accessible
Rend accessible le champ Pièce justificative
This commit is contained in:
commit
d014201521
5 changed files with 13 additions and 2 deletions
|
@ -79,6 +79,12 @@ module ApplicationHelper
|
||||||
# rubocop:enable Rails/OutputSafety
|
# rubocop:enable Rails/OutputSafety
|
||||||
end
|
end
|
||||||
|
|
||||||
|
def focus_element(selector)
|
||||||
|
# rubocop:disable Rails/OutputSafety
|
||||||
|
raw("document.querySelector('#{selector}').focus();")
|
||||||
|
# rubocop:enable Rails/OutputSafety
|
||||||
|
end
|
||||||
|
|
||||||
def disable_element(selector)
|
def disable_element(selector)
|
||||||
# rubocop:disable Rails/OutputSafety
|
# rubocop:disable Rails/OutputSafety
|
||||||
raw("document.querySelector('#{selector}').disabled = true;")
|
raw("document.querySelector('#{selector}').disabled = true;")
|
||||||
|
|
|
@ -25,6 +25,7 @@ export default class ProgressBar {
|
||||||
const element = getDirectUploadElement(id);
|
const element = getDirectUploadElement(id);
|
||||||
if (element) {
|
if (element) {
|
||||||
element.classList.remove(PENDING_CLASS);
|
element.classList.remove(PENDING_CLASS);
|
||||||
|
element.focus();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -32,6 +33,7 @@ export default class ProgressBar {
|
||||||
const element = getDirectUploadProgressElement(id);
|
const element = getDirectUploadProgressElement(id);
|
||||||
if (element) {
|
if (element) {
|
||||||
element.style.width = `${progress}%`;
|
element.style.width = `${progress}%`;
|
||||||
|
element.setAttribute('aria-valuenow', progress);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -52,7 +54,7 @@ export default class ProgressBar {
|
||||||
|
|
||||||
static render(id, filename) {
|
static render(id, filename) {
|
||||||
return `<div id="direct-upload-${id}" class="direct-upload ${PENDING_CLASS}" data-direct-upload-id="${id}">
|
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>
|
<span class="direct-upload__filename">${filename}</span>
|
||||||
</div>`;
|
</div>`;
|
||||||
}
|
}
|
||||||
|
|
|
@ -16,5 +16,6 @@ delegate('click', TOGGLE_SOURCE_SELECTOR, (evt) => {
|
||||||
const targetElements = document.querySelectorAll(targetSelector);
|
const targetElements = document.querySelectorAll(targetSelector);
|
||||||
for (let target of targetElements) {
|
for (let target of targetElements) {
|
||||||
toggle(target);
|
toggle(target);
|
||||||
|
target.focus();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
@ -4,3 +4,5 @@
|
||||||
<% if attachment.virus_scanner.pending? %>
|
<% 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 ) %>
|
<%= fire_event('attachment:update', { url: attachment_url(attachment.id, { signed_id: attachment.blob.signed_id, user_can_upload: true }) }.to_json ) %>
|
||||||
<% end %>
|
<% end %>
|
||||||
|
|
||||||
|
<%= focus_element("button[data-toggle-target=\".attachment-input-#{attachment.id}\"]") %>
|
||||||
|
|
|
@ -19,7 +19,7 @@
|
||||||
= render partial: "shared/attachment/show", locals: { attachment: attachment, user_can_upload: true }
|
= render partial: "shared/attachment/show", locals: { attachment: attachment, user_can_upload: true }
|
||||||
- if user_can_destroy
|
- if user_can_destroy
|
||||||
.attachment-action
|
.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
|
.attachment-action
|
||||||
= button_tag 'Remplacer', type: 'button', class: 'button small', data: { 'toggle-target': ".attachment-input-#{attachment_id}" }
|
= button_tag 'Remplacer', type: 'button', class: 'button small', data: { 'toggle-target': ".attachment-input-#{attachment_id}" }
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue