Mirrors/keyoxide-web
1
0
Fork 1
mirror of https://codeberg.org/keyoxide/keyoxide-web.git synced 2024-12-22 14:59:29 -07:00
Code Issues Projects Releases Packages Wiki Activity

Change Searchbar Keyboard Navigation

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

9
static-src/styles/forms.scss
View file

@ -163,6 +163,15 @@ button.inline {
margin: 0; margin: 0;
padding: 8px; padding: 8px;
border-radius: 8px 0 0 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"] { input[type="submit"] {

2
views/index.pug
View file

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