improve accessibility

app/views/submit_form/_decline_form.html.erb

@@ -1,8 +1,6 @@
 <%= form_for '', url: submit_form_decline_index_path(submitter.slug), method: :post do |f| %>
-  <div class="mt-4 text-center">
-    <%= t(:notify_the_sender_with_the_reason_you_declined) %>
-  </div>
-  <div class="form-control mt-2">
+  <div class="form-control mt-4">
+    <label class="label justify-center" for="reason"><%= t(:notify_the_sender_with_the_reason_you_declined) %></label>
     <%= f.text_area :reason, required: true, class: 'base-input w-full py-2 h-40', dir: 'auto', placeholder: t('provide_a_reason'), style: 'height: 200px', rows: '10' %>
   </div>
   <toggle-submit dir="auto" class="form-control mt-4">

app/views/submit_form/completed.html.erb

@@ -1,4 +1,4 @@
-<div class="max-w-md mx-auto px-2 mt-12 mb-4">
+<main class="max-w-md mx-auto px-2 mt-12 mb-4">
   <div class="space-y-6 mx-auto">
     <div class="space-y-6">
       <div class="flex items-center justify-center">
@@ -30,7 +30,7 @@
         <% end %>
       <% end %>
       <% if @submitter.completed_at > 30.minutes.ago || (current_user && current_user.account.submitters.exists?(id: @submitter.id)) %>
-        <download-button data-src="<%= submit_form_documents_path(@submitter.slug) %>" class="base-button w-full">
+        <download-button role="button" tabindex="0" aria-label="<%= t('download_documents') %>" data-src="<%= submit_form_documents_path(@submitter.slug) %>" class="base-button w-full">
           <span class="flex items-center justify-center space-x-2" data-target="download-button.defaultButton">
             <%= svg_icon('download', class: 'w-6 h-6') %>
             <span><%= t('download_documents') %></span>
@@ -50,5 +50,5 @@
       </toggle-submit>
     <% end %>
   </div>
-</div>
+</main>
 <%= render 'shared/attribution', link_path: '/start', account: @submitter.account %>

app/views/submit_form/email_2fa.html.erb

@@ -2,7 +2,7 @@
 <% I18n.with_locale(@submitter.account.locale) do %>
   <% content_for(:html_description, t('account_name_has_invited_you_to_fill_and_sign_documents_online_effortlessly_with_a_secure_fast_and_user_friendly_digital_document_signing_solution', account_name: @submitter.account.name)) %>
 <% end %>
-<div class="max-w-md mx-auto px-2 mt-12 mb-4">
+<main class="max-w-md mx-auto px-2 mt-12 mb-4">
   <div class="space-y-6 mx-auto">
     <div class="space-y-6">
       <div class="flex items-center justify-center">
@@ -46,7 +46,7 @@
                 <% end %>
               </span>
               <span>
-                <label for="resend_code" id="resend_label" class="link"><%= t(:re_send_email) %></label>
+                <button type="submit" form="resend_code_form" class="link"><%= t(:re_send_email) %></button>
               </span>
             </div>
           </div>
@@ -54,7 +54,7 @@
             <%= f.button button_title(title: t('submit')), class: 'base-button' %>
           </toggle-submit>
         <% end %>
-        <%= button_to t(:re_send_email), submit_form_email_2fa_path, params: { submitter_slug: @submitter.slug, resend: true }, method: :put, id: 'resend_code', class: 'hidden' %>
+        <%= button_to t(:re_send_email), submit_form_email_2fa_path, params: { submitter_slug: @submitter.slug, resend: true }, method: :put, form: { id: 'resend_code_form', class: 'hidden' } %>
       <% else %>
         <% if params[:t] %>
           <fetch-form data-onload="true">
@@ -69,4 +69,4 @@
       <div><%= t('please_contact_the_requester_to_specify_your_email_for_two_factor_authentication') %></div>
     <% end %>
   </div>
-</div>
+</main>

app/views/submit_form/show.html.erb

@@ -8,28 +8,32 @@
 <% page_blob_struct = Struct.new(:url, :metadata) %>
 <% schema = Submissions.filtered_conditions_schema(@submitter.submission, values:, include_submitter_uuid: @submitter.uuid) %>
 <% font_scale = 1000.0 / PdfUtils::US_LETTER_W %>
-<% decline_modal_checkbox_uuid = nil %>
-<% delegate_modal_checkbox_uuid = nil %>
+<% decline_modal_id = nil %>
+<% delegate_modal_id = nil %>
 <div style="max-height: -webkit-fill-available;">
-  <div id="scrollbox">
+  <main id="scrollbox">
     <div class="mx-auto block pb-72" style="max-width: 1000px">
       <%# flex block w-full sticky top-0 z-50 space-x-2 items-center bg-yellow-100 p-2 border-y border-yellow-200 transition-transform duration-300 %>
       <%= local_assigns[:banner_html] || capture do %>
         <%= render('submit_form/banner') %>
-        <div id="signing_form_header" class="sticky min-[1230px]:static top-0 z-50 bg-base-100 py-2 px-2 flex items-center md:-mx-[8px]" style="margin-bottom: -16px">
-          <div class="text-xl md:text-2xl font-medium focus:text-clip" style="width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
+        <header id="signing_form_header" class="sticky min-[1230px]:static top-0 z-50 bg-base-100 py-2 px-2 flex items-center md:-mx-[8px]" style="margin-bottom: -16px">
+          <h1 class="text-xl md:text-2xl font-medium focus:text-clip" style="width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
             <%= @submitter.submission.name || @submitter.submission.template.name %>
-          </div>
+          </h1>
           <div class="flex items-center space-x-2" style="margin-left: 20px; flex-shrink: 0">
             <% if @form_configs[:with_delegate] %>
-              <label id="delegate_button" for="<%= delegate_modal_checkbox_uuid = SecureRandom.uuid %>" class="btn btn-sm !px-5"><%= t(:delegate) %></label>
+              <modal-button data-target="<%= delegate_modal_id = SecureRandom.uuid %>">
+                <button id="delegate_button" type="button" class="btn btn-sm !px-5"><%= t(:delegate) %></button>
+              </modal-button>
               <% if @form_configs[:with_decline] %>
-                <label id="decline_button" for="<%= decline_modal_checkbox_uuid = SecureRandom.uuid %>" class="btn btn-sm px-2" title="<%= t(:decline) %>">
-                  <%= svg_icon('x', class: 'w-5 h-5') %>
-                </label>
+                <modal-button data-target="<%= decline_modal_id = SecureRandom.uuid %>">
+                  <button id="decline_button" type="button" class="btn btn-sm px-2" aria-label="<%= t(:decline) %>">
+                    <%= svg_icon('x', class: 'w-5 h-5') %>
+                  </button>
+                </modal-button>
               <% end %>
               <% if @form_configs[:with_partial_download] %>
-                <download-button data-src="<%= submit_form_download_index_path(@submitter.slug) %>" class="btn btn-neutral text-white btn-sm px-2" title="<%= t('download') %>">
+                <download-button role="button" tabindex="0" data-src="<%= submit_form_download_index_path(@submitter.slug) %>" class="btn btn-neutral text-white btn-sm px-2" title="<%= t('download') %>" aria-label="<%= t('download') %>">
                   <span data-target="download-button.defaultButton">
                     <%= svg_icon('download', class: 'w-5 h-5') %>
                   </span>
@@ -40,10 +44,12 @@
               <% end %>
             <% else %>
               <% if @form_configs[:with_decline] %>
-                <label id="decline_button" for="<%= decline_modal_checkbox_uuid = SecureRandom.uuid %>" class="btn btn-sm !px-5"><%= t(:decline) %></label>
+                <modal-button data-target="<%= decline_modal_id = SecureRandom.uuid %>">
+                  <button id="decline_button" type="button" class="btn btn-sm !px-5"><%= t(:decline) %></button>
+                </modal-button>
               <% end %>
               <% if @form_configs[:with_partial_download] %>
-                <download-button data-src="<%= submit_form_download_index_path(@submitter.slug) %>" class="btn btn-neutral text-white btn-sm !px-4">
+                <download-button role="button" tabindex="0" data-src="<%= submit_form_download_index_path(@submitter.slug) %>" class="btn btn-neutral text-white btn-sm !px-4" aria-label="<%= t('download') %>">
                   <span class="flex items-center justify-center" data-target="download-button.defaultButton">
                     <%= svg_icon('download', class: 'w-6 h-6 inline md:hidden') %>
                     <span class="hidden md:inline"><%= t('download') %></span>
@@ -56,23 +62,27 @@
               <% end %>
             <% end %>
           </div>
-        </div>
+        </header>
         <scroll-buttons class="fixed right-5 top-2 hidden md:flex gap-1 z-50 ease-in-out opacity-0 -translate-y-10">
           <% if @form_configs[:with_delegate] %>
-            <label id="delegate_button" for="<%= delegate_modal_checkbox_uuid %>" class="btn btn-sm px-0">
-              <span class="min-[1366px]:inline hidden px-3">
-                <%= t(:delegate) %>
-              </span>
-              <span class="inline min-[1366px]:hidden px-2">
-                <%= svg_icon('user_share', class: 'w-5 h-5') %>
-              </span>
-            </label>
+            <modal-button data-target="<%= delegate_modal_id %>">
+              <button id="delegate_button_mobile" type="button" class="btn btn-sm px-0" aria-label="<%= t(:delegate) %>" tabindex="-1">
+                <span class="min-[1366px]:inline hidden px-3">
+                  <%= t(:delegate) %>
+                </span>
+                <span class="inline min-[1366px]:hidden px-2">
+                  <%= svg_icon('user_share', class: 'w-5 h-5') %>
+                </span>
+              </button>
+            </modal-button>
             <% if @form_configs[:with_decline] %>
-              <label id="decline_button" for="<%= decline_modal_checkbox_uuid %>" class="btn btn-sm px-2">
-                <%= svg_icon('x', class: 'w-5 h-5') %>
-              </label>
+              <modal-button data-target="<%= decline_modal_id %>">
+                <button id="decline_button_mobile" type="button" class="btn btn-sm px-2" aria-label="<%= t(:decline) %>" tabindex="-1">
+                  <%= svg_icon('x', class: 'w-5 h-5') %>
+                </button>
+              </modal-button>
             <% end %>
-            <download-button data-src="<%= submit_form_download_index_path(@submitter.slug) %>" class="btn btn-neutral text-white btn-sm px-2">
+            <download-button role="button" tabindex="-1" data-src="<%= submit_form_download_index_path(@submitter.slug) %>" class="btn btn-neutral text-white btn-sm px-2" aria-label="<%= t('download') %>">
               <span data-target="download-button.defaultButton">
                 <%= svg_icon('download', class: 'w-5 h-5') %>
               </span>
@@ -82,16 +92,18 @@
             </download-button>
           <% else %>
             <% if @form_configs[:with_decline] %>
-              <label id="decline_button" for="<%= decline_modal_checkbox_uuid %>" class="btn btn-sm px-0">
-                <span class="min-[1366px]:inline hidden px-3">
-                  <%= t(:decline) %>
-                </span>
-                <span class="inline min-[1366px]:hidden px-2">
-                  <%= svg_icon('x', class: 'w-5 h-5') %>
-                </span>
-              </label>
+              <modal-button data-target="<%= decline_modal_id %>">
+                <button id="decline_button_mobile" type="button" class="btn btn-sm px-0" aria-label="<%= t(:decline) %>" tabindex="-1">
+                  <span class="min-[1366px]:inline hidden px-3">
+                    <%= t(:decline) %>
+                  </span>
+                  <span class="inline min-[1366px]:hidden px-2">
+                    <%= svg_icon('x', class: 'w-5 h-5') %>
+                  </span>
+                </button>
+              </modal-button>
             <% end %>
-            <download-button data-src="<%= submit_form_download_index_path(@submitter.slug) %>" class="btn btn-neutral text-white btn-sm px-2">
+            <download-button role="button" tabindex="-1" data-src="<%= submit_form_download_index_path(@submitter.slug) %>" class="btn btn-neutral text-white btn-sm px-2" aria-label="<%= t('download') %>">
               <span data-target="download-button.defaultButton">
                 <%= svg_icon('download', class: 'w-5 h-5') %>
               </span>
@@ -111,7 +123,7 @@
           <% (document.metadata.dig('pdf', 'number_of_pages') || (document.preview_images.loaded? ? preview_images_index.size : document.preview_images.size)).times do |index| %>
             <% page = preview_images_index[index] || page_blob_struct.new(metadata: lazyload_metadata, url: preview_document_page_path(document.signed_key, "#{index}.jpg")) %>
             <page-container class="block relative my-4 shadow-md" style="container-type: size; aspect-ratio: <%= width = page.metadata['width'] %> / <%= height = page.metadata['height'] %>">
-              <img loading="lazy" src="<%= page.url %>" width="<%= width %>" height="<%= height %>">
+              <img loading="lazy" src="<%= page.url %>" width="<%= width %>" height="<%= height %>" alt="<%= "#{item['name']} - #{t('page')} #{index + 1}" %>">
               <div id="page-<%= [document.uuid, index].join('-') %>" class="top-0 bottom-0 left-0 right-0 absolute">
                 <% if annots = document_annots_index[index] %>
                   <%= render 'submit_form/annotations', annots: %>
@@ -140,7 +152,7 @@
         </div>
       <% end %>
     </div>
-  </div>
+  </main>
 </div>
 <div class="fixed bottom-0 w-full h-0 z-50">
   <div class="mx-auto" style="max-width: 1000px">
@@ -150,12 +162,12 @@
   </div>
 </div>
 <% if @form_configs[:with_decline] %>
-  <%= render 'shared/html_modal', title: t(:decline), uuid: decline_modal_checkbox_uuid do %>
+  <%= render 'shared/html_modal', title: t(:decline), uuid: decline_modal_id do %>
     <%= render 'submit_form/decline_form', submitter: @submitter %>
   <% end %>
 <% end %>
 <% if @form_configs[:with_delegate] %>
-  <%= render 'shared/html_modal', title: t(:delegate), uuid: delegate_modal_checkbox_uuid do %>
+  <%= render 'shared/html_modal', title: t(:delegate), uuid: delegate_modal_id do %>
     <%= render 'submit_form/delegate_form', submitter: @submitter %>
   <% end %>
 <% end %>