Skip link: target first tab group (#tab-pdf) in both views

- Point skip links in form and plain layouts to #tab-pdf (the first tab button, naturally focusable as a <button>) - Add tabindex="-1" fallback <div id="tab-pdf"> when has_full_text is false (scanned PDFs with no extractable text) so the skip link always has a valid target - Remove now-unused tabindex="-1" from #scrollbox and #main-content Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
3 weeks ago · 76d2a61ae6
parent 871f9bb3ec
commit 76d2a61ae6
4 changed files with 6 additions and 4 deletions
--- a/app/views/layouts/form.html.erb
+++ b/app/views/layouts/form.html.erb
@ -13,7 +13,7 @@
    <%= stylesheet_pack_tag 'form', media: 'all' %>
  </head>
  <body>
-    <a href="#scrollbox" class="absolute left-0 top-0 -translate-y-full focus:translate-y-0 z-50 p-4 bg-base-100 text-base-content border-2 border-neutral" tabindex="0">
+    <a href="#tab-pdf" class="absolute left-0 top-0 -translate-y-full focus:translate-y-0 z-50 p-4 bg-base-100 text-base-content border-2 border-neutral" tabindex="0">
      Skip to main content
    </a>
    <%= yield %>
--- a/app/views/layouts/plain.html.erb
+++ b/app/views/layouts/plain.html.erb
@ -13,7 +13,7 @@
    <%= stylesheet_pack_tag 'application', media: 'all' %>
  </head>
  <body>
-    <a href="#main-content" class="absolute left-0 top-0 -translate-y-full focus:translate-y-0 z-50 p-4 bg-base-100 text-base-content border-2 border-neutral" tabindex="0">
+    <a href="#tab-pdf" class="absolute left-0 top-0 -translate-y-full focus:translate-y-0 z-50 p-4 bg-base-100 text-base-content border-2 border-neutral" tabindex="0">
      Skip to main content
    </a>
    <% if flash.present? %><%= render 'shared/flash' %><% end %>
--- a/app/views/submissions/show.html.erb
+++ b/app/views/submissions/show.html.erb
@ -7,7 +7,7 @@
 <% is_combined_enabled = configs.find { |e| e.key == AccountConfig::COMBINE_PDF_RESULT_KEY }&.value == true && !@submission.template_fields&.any? { |f| f['type'] == 'verification' } %>
 <% with_submitter_timezone = configs.find { |e| e.key == AccountConfig::WITH_SUBMITTER_TIMEZONE_KEY }&.value == true %>
 <% with_signature_id_reason = configs.find { |e| e.key == AccountConfig::WITH_SIGNATURE_ID_REASON_KEY }&.value != false %>
-<div id="main-content" tabindex="-1" style="max-width: 1600px" class="mx-auto pl-4">
+<div style="max-width: 1600px" class="mx-auto pl-4">
  <div class="flex justify-between py-1.5 items-center pr-4 sticky top-0 md:relative z-10 bg-base-100">
    <a href="<%= signed_in? && @submission.account_id == current_account&.id && @submission.template ? template_path(@submission.template) : '/' %>" class="flex items-center space-x-3 py-1">
      <span><%= render 'submissions/logo' %></span>
@ -113,6 +113,7 @@
        <div id="document_view" class="flex-1 min-h-0 overflow-y-auto overflow-x-hidden mt-0.5 pt-0.5">
          <div id="panel-pdf" role="tabpanel" aria-labelledby="tab-pdf" tabindex="0">
    <% else %>
+      <div id="tab-pdf" tabindex="-1"></div>
      <div id="document_view" class="w-full overflow-y-auto overflow-x-hidden mt-0.5 pt-0.5">
    <% end %>
      <div class="pr-3.5 pl-0.5">
--- a/app/views/submit_form/show.html.erb
+++ b/app/views/submit_form/show.html.erb
@ -10,7 +10,7 @@
 <% font_scale = 1000.0 / PdfUtils::US_LETTER_W %>
 <% decline_modal_checkbox_uuid = nil %>
 <div style="max-height: -webkit-fill-available;">
-  <div id="scrollbox" tabindex="-1">
+  <div 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 %>
@ -81,6 +81,7 @@
          </div>
          <div id="panel-pdf" role="tabpanel" aria-labelledby="tab-pdf" tabindex="0">
      <% end %>
+      <% unless has_full_text %><div id="tab-pdf" tabindex="-1"></div><% end %>
      <% schema.each do |item| %>
        <% document = @submitter.submission.schema_documents.find { |a| a.uuid == item['attachment_uuid'] } %>
        <div id="document-<%= document.uuid %>">