PR #22: fixes unfocusable header #10 => dev

fix: unfocusable header #10
savio591 · Nov 11, 2021 · c9d49e8 · c9d49e8
2 parents e342ba8 + 3ee18a5
commit c9d49e8
Show file tree

Hide file tree

Showing 2 changed files with 7 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>
   )

diff --git a/src/components/Header/menu.module.scss b/src/components/Header/menu.module.scss
@@ -5,6 +5,7 @@ header.header {
   max-height: header-size-height(mobile);
   height: header-size-height(mobile);
   backdrop-filter: blur(4px);
+  z-index: 1;
 
   @media (min-width: map.get($grid-breakpoints, 'sm')) {
     max-height: header-size-height(desktop);