Fix submission row aria-labels for WCAG 2.1 AA compliance

Apply descriptive aria-labels to all focusable elements in _submission.html.erb:
- Status badge links: "Document Status: [status]"
- Submitter name links: "Submitted by: [submitter]"
- Edit pencil (icon-only): "Edit [document-name]"
- Sign Now button: "Sign this document"
- View link: "View document"
- Archive button: "Archive [document-name]"
- Overlay cover link: aria-hidden + tabindex=-1 (removes duplicate focus trap)

Covers both single-submitter and multi-submitter layout variants.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
pull/599/head
Marcelo Paiva 3 weeks ago
parent 7cfbf3a043
commit c60b5f5284

@ -41,19 +41,19 @@
</span>
</div>
<% else %>
<a href="<%= submission_path(submission) %>" class="flex z-[1]" aria-label="<%= "#{t(submitter.status)} #{submitter.name || submitter.email || submitter.phone}" %>">
<a href="<%= submission_path(submission) %>" class="flex z-[1]" aria-label="Document Status: <%= t(submitter.status) %>">
<span class="badge <%= status_badges[submitter.status] %> md:w-32 badge-lg bg-opacity-50 uppercase text-sm font-semibold tooltip" data-tip="<%= l(submitter.status_event_at.in_time_zone(current_account.timezone), format: :short, locale: current_account.locale) %>">
<%= t(submitter.status) %>
</span>
</a>
<% end %>
<span class="flex items-center z-[1]">
<a href="<%= submission_path(submission) %>" class="text-lg break-all peer" aria-label="<%= "#{submitter.name || submitter.email || submitter.phone} #{t(submitter.status)}" %>">
<a href="<%= submission_path(submission) %>" class="text-lg break-all peer" aria-label="Submitted by: <%= submitter.name || submitter.email || submitter.phone %>">
<%= submitter.name || submitter.email || submitter.phone %>
</a>
<% if can?(:update, submission) && !submitter.start_form_submission_events.any? && !submission.archived_at? && !submission.expired? && !submitter.declined_at? %>
<span class="pl-0.5 tooltip tooltip-top md:opacity-0 md:hover:opacity-100 md:peer-hover:opacity-100" data-tip="<%= t('edit') %>">
<%= link_to edit_submitter_path(submitter), class: 'shrink-0', aria: { label: "#{t('edit')} #{submitter.name || submitter.email || submitter.phone}" }, data: { turbo_frame: 'modal' } do %>
<%= link_to edit_submitter_path(submitter), class: 'shrink-0', aria: { label: "Edit #{submission.template&.name || submission.name}" }, data: { turbo_frame: 'modal' } do %>
<%= svg_icon('pencil', class: 'w-5 h-5') %>
<% end %>
</span>
@ -81,7 +81,7 @@
<% elsif !submission.archived_at? && !template&.archived_at? && !submission.expired? && !submitter.declined_at? %>
<% if current_user.email == submitter.email %>
<div class="flex-1 md:flex-none md:w-36 flex">
<a href="<%= submit_form_url(slug: submitter.slug) %>" data-turbo="false" target="_blank" id="sign_yourself_button" class="btn btn-sm btn-neutral btn-outline bg-white w-full md:w-36 flex z-[1]" aria-label="<%= "#{t('sign_now')} #{submitter.name || submitter.email || submitter.phone}" %>">
<a href="<%= submit_form_url(slug: submitter.slug) %>" data-turbo="false" target="_blank" id="sign_yourself_button" class="btn btn-sm btn-neutral btn-outline bg-white w-full md:w-36 flex z-[1]" aria-label="Sign this document">
<span class="flex items-center justify-center space-x-1 md:space-x-2">
<% if t('sign_now').length < 12 %>
<%= svg_icon('writing_sign', class: 'w-4 h-4 stroke-2') %>
@ -97,13 +97,13 @@
<% end %>
<% end %>
<div class="flex-1 md:flex-none z-[1]">
<a href="<%= submission_path(submission) %>" class="btn btn-outline btn-sm w-full md:w-24" aria-label="<%= "#{t('view')} #{submitter.name || submitter.email || submitter.phone}" %>">
<a href="<%= submission_path(submission) %>" class="btn btn-outline btn-sm w-full md:w-24" aria-label="View document">
<%= t('view') %>
</a>
</div>
<% if !submission.archived_at? && !template&.archived_at? && can?(:destroy, submission) %>
<span data-tip="<%= t('archive') %>" class="sm:tooltip tooltip-top">
<%= button_to button_title(title: nil, disabled_with: nil, icon: svg_icon('archive', class: 'w-6 h-6'), icon_disabled: svg_icon('loader', class: 'w-6 h-6 animate-spin')), submission_path(submission), class: 'btn btn-outline btn-sm w-full md:w-fit', form: { class: 'flex' }, title: t('archive'), aria: { label: "#{t('archive')} #{submitter.name || submitter.email || submitter.phone}" }, method: :delete %>
<%= button_to button_title(title: nil, disabled_with: nil, icon: svg_icon('archive', class: 'w-6 h-6'), icon_disabled: svg_icon('loader', class: 'w-6 h-6 animate-spin')), submission_path(submission), class: 'btn btn-outline btn-sm w-full md:w-fit', form: { class: 'flex' }, title: t('archive'), aria: { label: "Archive #{submission.template&.name || submission.name}" }, method: :delete %>
</span>
<% end %>
<% if local_assigns[:archived] && can?(:destroy, submission) %>
@ -117,7 +117,7 @@
<div class="flex flex-col md:flex-row md:items-center gap-3">
<% if is_submission_completed %>
<% latest_submitter = submitters.select(&:completed_at?).max_by(&:completed_at) %>
<a href="<%= submission_path(submission) %>" class="z-[1] tooltip flex" data-tip="<%= l(latest_submitter.status_event_at.in_time_zone(current_account.timezone), format: :short, locale: current_account.locale) %>" aria-label="<%= t(latest_submitter.status) %>">
<a href="<%= submission_path(submission) %>" class="z-[1] tooltip flex" data-tip="<%= l(latest_submitter.status_event_at.in_time_zone(current_account.timezone), format: :short, locale: current_account.locale) %>" aria-label="Document Status: <%= t(latest_submitter.status) %>">
<span class="badge <%= status_badges[latest_submitter.status] %> md:w-32 bg-opacity-50 badge-lg uppercase text-sm font-semibold">
<%= t(latest_submitter.status) %>
</span>
@ -134,19 +134,19 @@
<div class="relative flex justify-between items-start md:items-center space-x-3">
<span class="flex flex-col md:flex-row md:items-center gap-2">
<% if !is_submission_completed && !submission.expired? %>
<a href="<%= submission_path(submission) %>" class="z-[1] tooltip flex" data-tip="<%= l(submitter.status_event_at.in_time_zone(current_account.timezone), format: :short, locale: current_account.locale) %>" aria-label="<%= "#{t(submitter.status)} #{submitter.name || submitter.email || submitter.phone}" %>">
<a href="<%= submission_path(submission) %>" class="z-[1] tooltip flex" data-tip="<%= l(submitter.status_event_at.in_time_zone(current_account.timezone), format: :short, locale: current_account.locale) %>" aria-label="Document Status: <%= t(submitter.status) %>">
<span class="badge md:w-24 <%= status_badges[submitter.status] %> bg-opacity-50 uppercase text-xs font-semibold">
<%= t(submitter.status) %>
</span>
</a>
<% end %>
<span class="flex items-center z-[1]">
<a href="<%= submission_path(submission) %>" class="text-lg break-all peer" aria-label="<%= "#{submitter.name || submitter.email || submitter.phone} #{t(submitter.status)}" %>">
<a href="<%= submission_path(submission) %>" class="text-lg break-all peer" aria-label="Submitted by: <%= submitter.name || submitter.email || submitter.phone %>">
<%= submitter.name || submitter.email || submitter.phone %>
</a>
<% if can?(:update, submission) && !submitter.start_form_submission_events.any? && !submission.archived_at? && !submission.expired? && !submitter.declined_at? %>
<span class="pl-0.5 tooltip tooltip-top md:opacity-0 md:hover:opacity-100 md:peer-hover:opacity-100" data-tip="<%= t('edit') %>">
<%= link_to edit_submitter_path(submitter), class: 'shrink-0', aria: { label: "#{t('edit')} #{submitter.name || submitter.email || submitter.phone}" }, data: { turbo_frame: 'modal' } do %>
<%= link_to edit_submitter_path(submitter), class: 'shrink-0', aria: { label: "Edit #{submission.template&.name || submission.name}" }, data: { turbo_frame: 'modal' } do %>
<%= svg_icon('pencil', class: 'w-5 h-5') %>
<% end %>
</span>
@ -167,7 +167,7 @@
<% elsif !template&.archived_at? && !submission.archived_at? && !is_submission_completed && !submission.expired? && !submitter.declined_at? %>
<div class="relative flex items-center space-x-3">
<% if current_user.email == submitter.email %>
<a href="<%= submit_form_url(slug: submitter.slug) %>" data-turbo="false" target="_blank" id="sign_yourself_button" class="absolute md:relative top-0 right-0 btn btn-xs btn-outline btn-neutral bg-white w-28 md:w-36 z-[1]" aria-label="<%= "#{t('sign_now')} #{submitter.name || submitter.email || submitter.phone}" %>">
<a href="<%= submit_form_url(slug: submitter.slug) %>" data-turbo="false" target="_blank" id="sign_yourself_button" class="absolute md:relative top-0 right-0 btn btn-xs btn-outline btn-neutral bg-white w-28 md:w-36 z-[1]" aria-label="Sign this document">
<span class="flex items-center justify-center space-x-1 md:space-x-2">
<% if t('sign_now').length < 12 %>
<%= svg_icon('writing_sign', class: 'w-4 h-4 stroke-2') %>
@ -204,13 +204,13 @@
</div>
<% end %>
<div class="flex-1 md:flex-none z-[1]">
<a href="<%= submission_path(submission) %>" class="btn btn-outline btn-sm w-full md:w-24" aria-label="<%= t('view') %>">
<a href="<%= submission_path(submission) %>" class="btn btn-outline btn-sm w-full md:w-24" aria-label="View document">
<%= t('view') %>
</a>
</div>
<% if !submission.archived_at? && !template&.archived_at? %>
<span data-tip="<%= t('archive') %>" class="sm:tooltip tooltip-top">
<%= button_to button_title(title: nil, disabled_with: nil, icon: svg_icon('archive', class: 'w-6 h-6'), icon_disabled: svg_icon('loader', class: 'w-6 h-6 animate-spin')), submission_path(submission), class: 'btn btn-outline btn-sm w-full md:w-fit', form: { class: 'flex' }, title: t('archive'), aria: { label: t('archive') }, method: :delete %>
<%= button_to button_title(title: nil, disabled_with: nil, icon: svg_icon('archive', class: 'w-6 h-6'), icon_disabled: svg_icon('loader', class: 'w-6 h-6 animate-spin')), submission_path(submission), class: 'btn btn-outline btn-sm w-full md:w-fit', form: { class: 'flex' }, title: t('archive'), aria: { label: "Archive #{submission.template&.name || submission.name}" }, method: :delete %>
</span>
<% end %>
<% if local_assigns[:archived] && can?(:destroy, submission) %>

Loading…
Cancel
Save