Merge pull request #3505 from projectblacklight/search-form-anchor-focus

Ensure that the search bar is visible when focused via anchor link
projectblacklight · Jan 31, 2025 · b34d2fc · b34d2fc
2 parents e5618b6 + 9cda50b
commit b34d2fc
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 0 deletions.
diff --git a/app/assets/builds/blacklight.css b/app/assets/builds/blacklight.css
@@ -149,6 +149,11 @@ main {
   display: flex;
 }
 
+.search-field,
+.search-q {
+  scroll-margin: 5rem;
+}
+
 .documents-list {
   --bl-results-document-margin-top: 1rem;
   --bl-results-document-padding-top: 1rem;

diff --git a/app/assets/stylesheets/blacklight/_search_form.scss b/app/assets/stylesheets/blacklight/_search_form.scss
@@ -26,3 +26,10 @@
   border-bottom-left-radius: 0;
   display: flex;
 }
+
+// ensure that the search bar appears at the top of the page when focused using
+// anchor links, e.g. from the skip links navigation
+.search-field,
+.search-q {
+  scroll-margin: 5rem;
+}