From 0971e93a560c6bb640d79db38820f79bc56cf010 Mon Sep 17 00:00:00 2001
From: Anurat Eiamphoklarp <rhymerealm@gmail.com>
Date: Fri, 27 Sep 2024 06:26:53 +0700
Subject: [PATCH] #199 Improve accessibility and usability for search input

---
 src/components/Navbar.jsx | 1 +
 src/pages/Home.jsx        | 4 +++-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
index b6f4025..df6f4ac 100644
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -42,6 +42,7 @@ function Navbar({ searchInputValue, setSearchInputValue }) {
             <div className="text-2xl text-black px-6 bg-white flex content-center py-1 items-center rounded-full">
               <Icon icon="bx:bx-search-alt-2" className="text-black" />
               <div className="px-2"></div>
+              <div className="visually-hidden">Search</div>
               <input
                 type="text"
                 id="search-input"
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
index 1765de6..6da366a 100644
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -35,7 +35,8 @@ export default function Home() {
             <div className="lg:w-2/5 md:w-3/5 sm:w-4/5 xs:w-4/5">
               <div className="text-2xl text-black px-6 bg-white flex content-center py-2 items-center rounded-full">
                 <Icon icon="bx:bx-search-alt-2" className="text-black" />
-                <div className="px-2 invisible">Search</div>
+                <div className="px-2"></div>
+                <div className="visually-hidden">Search</div>
                 <input
                   type="text"
                   id="search-input"
@@ -43,6 +44,7 @@ export default function Home() {
                   aria-label="ค้นหาคำภายในร่างบทบัญญัติ เลขมาตรา หรือผู้อภิปราย"
                   className="flex-auto focus:outline-none w-full"
                   autocomplete="off"
+                  onChange={ evt => window.location.hash = '#/search' }
                 ></input>
               </div>
             </div>