Merge pull request #200 from kaogeek/199-improve-accessibility-and-us…

…ability-for-search-input #199 Improve accessibility and usability for search input
kaogeek · Sep 26, 2024 · 35c50dd · 35c50dd
2 parents 8c923d6 + 0971e93
commit 35c50dd
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 1 deletion.
diff --git 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
@@ -35,14 +35,16 @@ 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"
                   name="search-input"
                   aria-label="ค้นหาคำภายในร่างบทบัญญัติ เลขมาตรา หรือผู้อภิปราย"
                   className="flex-auto focus:outline-none w-full"
                   autocomplete="off"
+                  onChange={ evt => window.location.hash = '#/search' }
                 ></input>
               </div>
             </div>