From 97b50ac727690a80b400c4d6119446196481ad04 Mon Sep 17 00:00:00 2001
From: Abdul Khalid <mezmerizingbeats2004@gmail.com>
Date: Fri, 28 Jul 2023 19:00:42 +0530
Subject: [PATCH] feat: made search bar accessible

---
 components/Searchbar/Searchbar.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/components/Searchbar/Searchbar.tsx b/components/Searchbar/Searchbar.tsx
index 809cb1ee6..8b87bfded 100644
--- a/components/Searchbar/Searchbar.tsx
+++ b/components/Searchbar/Searchbar.tsx
@@ -67,10 +67,12 @@ export const Searchbar: React.FC<SearchbarProps> = ({ setSearch }) => {
   return (
     <form onSubmit={handleSubmit} noValidate>
       <div className="relative">
-        <div className="flex items-center">
+        <div className="flex items-center" aria-role="search">
+          <label htmlFor="simple-search" className="sr-only">Quick search any resources</label>
           <input
             type="text"
             id="simple-search"
+            name="simple-search"
             className="block p-2.5 w-full bg-transparent text-sm text-dark dark:text-text-primary border border-dashed border-gray-text focus:border-theme-secondary dark:focus:border-theme-primary dark:focus:ring-theme-primary focus:ring-theme-secondary dark:placeholder-gray-text outline-none transition-all ease-in-out duration-300 rounded-lg capitalize"
             placeholder="Quick search..."
             value={searchQuery}
@@ -79,9 +81,10 @@ export const Searchbar: React.FC<SearchbarProps> = ({ setSearch }) => {
           />
           <button
             type="submit"
+            aria-role="button"
             className="ml-2 px-4 py-2.5 bg-theme-secondary text-light-primary rounded-md border border-dashed border-transparent hover:border-theme-primary hover:bg-transparent hover:text-theme-primary dark:hover:text-theme-primary transition-colors transition duration-300 ease-in-out"
           >
-            <SearchIcon className="w-5 h-5" />
+            <SearchIcon className="w-5 h-5" aria-hidden="true" />
           </button>
         </div>
         {suggestions.length > 0 && (