Skip to content

Commit

Permalink
Ensure that the search bar is visible when focused via anchor link
Browse files Browse the repository at this point in the history
The anchor links in the skip links navigation cause the search
bar to be focused when activated, but in some cases the bar itself
is scrolled up and out of view, making it hard to interact with
after focusing.

This adds some styling to create an extra scroll margin so that
the search elements stay within view when focused using an anchor
link.

Ref sul-dlss/earthworks#1467
  • Loading branch information
thatbudakguy committed Jan 31, 2025
1 parent b1696fe commit 05c5ab2
Showing 1 changed file with 7 additions and 0 deletions.
7 changes: 7 additions & 0 deletions app/assets/stylesheets/blacklight/_search_form.scss
Original file line number Diff line number Diff line change
Expand Up @@ -27,3 +27,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;
}

0 comments on commit 05c5ab2

Please sign in to comment.