Merge pull request #21 from savio591:savio591/issue8

fix: padding needing in the desktop view on searchbox | header not focusable
savio591 · Nov 11, 2021 · 885345c · 885345c
2 parents 2270896 + 06ced2e
commit 885345c
Showing 1 changed file with 6 additions and 1 deletion.
diff --git a/src/components/Header/SearchBox.tsx b/src/components/Header/SearchBox.tsx
@@ -2,16 +2,21 @@ import { FaSearch } from 'react-icons/fa'
 
 export function SearchBox(): JSX.Element {
   return (
-    <div className="input-group">
+    <div className="input-group px-5">
       <div className="input-group-prepend">
         <span className="input-group-text h-100 bg-transparent border-0 fw-light">
           <FaSearch color="white" />
         </span>
       </div>
+      <label className="visually-hidden-focusable" htmlFor="search">
+        Pesquisar produtos
+      </label>
       <input
         type="text"
         className="form-control border-0 bg-transparent h-100"
         aria-label="search"
+        placeholder="Pesquisar produtos"
+        id="search"
       />
     </div>
   )