Change Searchbar Keyboard Navigation

Attempts to fix #186. Fakes the entire search bar being tab-able with
:focus and stops the search button from being able to be selected using
tab, in favor of submitting using enter. This approach also keeps the
submit button to keep regular UX.
This commit is contained in:
N4taaa 2024-10-02 12:51:19 +01:00
parent 6ba70be491
commit 9397352e98
No known key found for this signature in database
2 changed files with 12 additions and 3 deletions

View file

@ -163,6 +163,15 @@ button.inline {
margin: 0;
padding: 8px;
border-radius: 8px 0 0 8px;
&:focus {
outline: none;
}
}
&:has(input[type="search"]:focus) {
outline: 5px auto Highlight;
outline: 5px auto -webkit-focus-ring-color;
}
input[type="submit"] {

View file

@ -7,7 +7,7 @@ block content
</svg>
form(action="post")
input#query(type="search" name="query" required placeholder="Search for a profile")
input(type="submit" value="Search")
input(type="submit" value="Search" tabindex="-1")
section
h2 About Keyoxide