From 9397352e98d92d7bd90f43d8cd5963b1ced30484 Mon Sep 17 00:00:00 2001
From: N4taaa <n4ta@keemail.me>
Date: Wed, 2 Oct 2024 12:51:19 +0100
Subject: [PATCH] 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.
---
 static-src/styles/forms.scss | 11 ++++++++++-
 views/index.pug              |  4 ++--
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/static-src/styles/forms.scss b/static-src/styles/forms.scss
index 835abf3..44f7853 100644
--- a/static-src/styles/forms.scss
+++ b/static-src/styles/forms.scss
@@ -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"] {
@@ -172,4 +181,4 @@ button.inline {
             border-radius: 0 8px 8px 0;
         }
     }
-}
\ No newline at end of file
+}
diff --git a/views/index.pug b/views/index.pug
index ac9c991..2692cce 100644
--- a/views/index.pug
+++ b/views/index.pug
@@ -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
@@ -60,4 +60,4 @@ block content
     p
       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>
-        |  Donate via OpenCollective
\ No newline at end of file
+        |  Donate via OpenCollective