feat: made search bar accessible

rupali-codes · Jul 28, 2023 · 97b50ac · 97b50ac
1 parent c63c814
commit 97b50ac
Showing 1 changed file with 5 additions and 2 deletions.
diff --git 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 && (