Mirrors/keyoxide-web
1
0
Fork 1
mirror of https://codeberg.org/keyoxide/keyoxide-web.git synced 2024-12-22 06:49: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

11
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"] {
@ -172,4 +181,4 @@ button.inline {
border-radius: 0 8px 8px 0; border-radius: 0 8px 8px 0;
} }
} }
} }

4
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
@ -60,4 +60,4 @@ block content
p p
a.button.button--donate.button--opencollective(href='https://opencollective.com/keyoxide') a.button.button--donate.button--opencollective(href='https://opencollective.com/keyoxide')
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12c2.54 0 4.894-.79 6.834-2.135l-3.107-3.109a7.715 7.715 0 1 1 0-13.512l3.107-3.109A11.943 11.943 0 0 0 12 0zm9.865 5.166l-3.109 3.107A7.67 7.67 0 0 1 19.715 12a7.682 7.682 0 0 1-.959 3.727l3.109 3.107A11.943 11.943 0 0 0 24 12c0-2.54-.79-4.894-2.135-6.834z"></path></svg> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12c2.54 0 4.894-.79 6.834-2.135l-3.107-3.109a7.715 7.715 0 1 1 0-13.512l3.107-3.109A11.943 11.943 0 0 0 12 0zm9.865 5.166l-3.109 3.107A7.67 7.67 0 0 1 19.715 12a7.682 7.682 0 0 1-.959 3.727l3.109 3.107A11.943 11.943 0 0 0 24 12c0-2.54-.79-4.894-2.135-6.834z"></path></svg>
| Donate via OpenCollective | Donate via OpenCollective