adminbruno
/
docuseal
mirror of https://github.com/docusealco/docuseal
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fix skip-to-main-content link: focusable targets, plain layout

Browse Source 
- Add tabindex="-1" to #scrollbox in submit_form/show so focus lands
  there after skip link activation (not just scroll position)
- Add skip link to plain layout (used by submissions/show)
- Add id="main-content" tabindex="-1" to submissions/show outer div
  as the skip link target

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
pull/599/head
Marcelo Paiva 3 weeks ago
parent a4cb44f295
commit 871f9bb3ec
3 changed files with 38 additions and 31 deletions
Show Stats Download Patch File Download Diff File

3
app/views/layouts/plain.html.erb
Unescape View File

@ -13,6 +13,9 @@
<%= stylesheet_pack_tag 'application', media: 'all' %> <%= stylesheet_pack_tag 'application', media: 'all' %>
</head> </head>
<body> <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">
Skip to main content
</a>
<% if flash.present? %><%= render 'shared/flash' %><% end %> <% if flash.present? %><%= render 'shared/flash' %><% end %>
<%= yield %> <%= yield %>
<turbo-frame id="modal"></turbo-frame> <turbo-frame id="modal"></turbo-frame>

16
app/views/submissions/show.html.erb
Unescape View File

@ -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' } %> <% 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_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 %> <% with_signature_id_reason = configs.find { |e| e.key == AccountConfig::WITH_SIGNATURE_ID_REASON_KEY }&.value != false %>
<div style="max-width: 1600px" class="mx-auto pl-4"> <div id="main-content" tabindex="-1" 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"> <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"> <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> <span><%= render 'submissions/logo' %></span>
@ -89,7 +89,6 @@
<% end %> <% end %>
<% end %> <% end %>
</div> </div>
<div id="document_view" class="w-full overflow-y-auto overflow-x-hidden mt-0.5 pt-0.5">
<% has_full_text = schema.all? do |item| <% has_full_text = schema.all? do |item|
doc = @submission.schema_documents.find { |a| a.uuid == item['attachment_uuid'] } doc = @submission.schema_documents.find { |a| a.uuid == item['attachment_uuid'] }
n_pages = doc.metadata.dig('pdf', 'number_of_pages').to_i n_pages = doc.metadata.dig('pdf', 'number_of_pages').to_i
@ -97,9 +96,9 @@
n_pages > 0 && pages_text.size >= n_pages n_pages > 0 && pages_text.size >= n_pages
end %> end %>
<% if has_full_text %> <% if has_full_text %>
<document-tabs> <document-tabs class="flex flex-col w-full min-h-0">
<div role="tablist" aria-label="<%= t('document_view_options') %>" <div role="tablist" aria-label="<%= t('document_view_options') %>"
class="flex border-b border-base-300 px-0.5 mb-2"> class="flex border-b border-base-300 px-0.5 flex-none bg-base-100">
<button role="tab" id="tab-pdf" aria-selected="true" <button role="tab" id="tab-pdf" aria-selected="true"
aria-controls="panel-pdf" tabindex="0" aria-controls="panel-pdf" tabindex="0"
class="px-4 py-2 text-sm font-semibold border-b-2 -mb-px border-neutral text-base-content"> class="px-4 py-2 text-sm font-semibold border-b-2 -mb-px border-neutral text-base-content">
@ -111,13 +110,16 @@
<%= t('text_view') %> <%= t('text_view') %>
</button> </button>
</div> </div>
<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"> <div id="panel-pdf" role="tabpanel" aria-labelledby="tab-pdf" tabindex="0">
<% else %>
<div id="document_view" class="w-full overflow-y-auto overflow-x-hidden mt-0.5 pt-0.5">
<% end %> <% end %>
<div class="pr-3.5 pl-0.5"> <div class="pr-3.5 pl-0.5">
<% fields_index = Templates.build_field_areas_index(@submission.template_fields || @submission.template.fields) %> <% fields_index = Templates.build_field_areas_index(@submission.template_fields || @submission.template.fields) %>
<% submitters_index = @submission.submitters.index_by(&:uuid) %> <% submitters_index = @submission.submitters.index_by(&:uuid) %>
<% submitters_order_index = nil %> <% submitters_order_index = nil %>
<% attachments_index = ActiveStorage::Attachment.where(record: @submission.submitters, name: :attachments).preload(:blob).index_by(&:uuid) %> <% attachments_index = ActiveStorage::Attachment.where(record: @submission.submitters, name: :attachments).index_by(&:uuid) %>
<% page_blob_struct = Struct.new(:url, :metadata, keyword_init: true) %> <% page_blob_struct = Struct.new(:url, :metadata, keyword_init: true) %>
<% bg_classes = %w[bg-red-100 bg-sky-100 bg-emerald-100 bg-yellow-100 bg-purple-100 bg-pink-100 bg-cyan-100 bg-orange-100 bg-lime-100 bg-indigo-100] %> <% bg_classes = %w[bg-red-100 bg-sky-100 bg-emerald-100 bg-yellow-100 bg-purple-100 bg-pink-100 bg-cyan-100 bg-orange-100 bg-lime-100 bg-indigo-100] %>
<% schema.each do |item| %> <% schema.each do |item| %>
@ -187,9 +189,11 @@
<% end %> <% end %>
</article> </article>
</div> </div>
</div>
</document-tabs> </document-tabs>
<% end %> <% else %>
</div> </div>
<% end %>
<div id="parties_view" class="hidden md:block relative w-full md:w-80 flex-none pt-0.5 pr-4 pl-0.5 overflow-auto space"> <div id="parties_view" class="hidden md:block relative w-full md:w-80 flex-none pt-0.5 pr-4 pl-0.5 overflow-auto space">
<% colors = %w[bg-red-500 bg-sky-500 bg-emerald-500 bg-yellow-300 bg-purple-600 bg-pink-500 bg-cyan-500 bg-orange-500 bg-lime-500 bg-indigo-500] %> <% colors = %w[bg-red-500 bg-sky-500 bg-emerald-500 bg-yellow-300 bg-purple-600 bg-pink-500 bg-cyan-500 bg-orange-500 bg-lime-500 bg-indigo-500] %>
<% submitter_fields_index = (@submission.template_fields || @submission.template.fields).group_by { |f| f['submitter_uuid'] } %> <% submitter_fields_index = (@submission.template_fields || @submission.template.fields).group_by { |f| f['submitter_uuid'] } %>

4
app/views/submit_form/show.html.erb
Unescape View File

@ -10,7 +10,7 @@
<% font_scale = 1000.0 / PdfUtils::US_LETTER_W %> <% font_scale = 1000.0 / PdfUtils::US_LETTER_W %>
<% decline_modal_checkbox_uuid = nil %> <% decline_modal_checkbox_uuid = nil %>
<div style="max-height: -webkit-fill-available;"> <div style="max-height: -webkit-fill-available;">
<div id="scrollbox"> <div id="scrollbox" tabindex="-1">
<div class="mx-auto block pb-72" style="max-width: 1000px"> <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 %> <%# 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 %> <%= local_assigns[:banner_html] || capture do %>
@ -67,7 +67,7 @@
<% if has_full_text %> <% if has_full_text %>
<document-tabs class="block" style="margin-top: 4rem"> <document-tabs class="block" style="margin-top: 4rem">
<div role="tablist" aria-label="<%= t('document_view_options') %>" <div role="tablist" aria-label="<%= t('document_view_options') %>"
class="flex border-b border-base-300 mb-2"> class="flex border-b border-base-300 mb-2 sticky top-12 min-[1230px]:top-0 z-40 bg-base-100">
<button role="tab" id="tab-pdf" aria-selected="true" <button role="tab" id="tab-pdf" aria-selected="true"
aria-controls="panel-pdf" tabindex="0" aria-controls="panel-pdf" tabindex="0"
class="px-4 py-2 text-sm font-semibold border-b-2 -mb-px border-neutral text-base-content"> class="px-4 py-2 text-sm font-semibold border-b-2 -mb-px border-neutral text-base-content">

Write Preview
Loading…
Cancel
Save