Merge pull request #931 from 0xabdulkhalid/closes-issue-#860

feat: made search bar accessible on homepage 🔍✨
ssitvit · Aug 3, 2023 · 3c4f60b · 3c4f60b
2 parents 2110535 + 406825c
commit 3c4f60b
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 0 deletions.
diff --git a/src/Homepage/Homepage/Homepage.css b/src/Homepage/Homepage/Homepage.css
@@ -654,3 +654,15 @@ input.search-input:hover {
   margin-top:10px;
   margin-bottom:20px;
 }
+
+.sr-only {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border-width: 0 !important;
+}
diff --git a/src/Homepage/Homepage/Homepage.js b/src/Homepage/Homepage/Homepage.js
@@ -58,7 +58,10 @@ function Homepage() {
         <h1> Game on!!</h1>
       </div>
       {/* The content in the cards came from mapping data1, if you want to contribute a game kindly add it to data1 in the Data folder first*/}
+      <label htmlFor="search-games" className="sr-only">Search for your favourite Game</label>
       <input
+        id="search-game"
+        name="search-game"
         type="text"
         className="search-input"
         value={searchQuery}