From 039fd4cf29e0b0e4973430077f782d6949b17ec1 Mon Sep 17 00:00:00 2001
From: Abdul Khalid <mezmerizingbeats2004@gmail.com>
Date: Thu, 3 Aug 2023 09:09:22 +0530
Subject: [PATCH 1/2] feat: made search bar accessible on homepage

---
 src/Homepage/Homepage/Homepage.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/Homepage/Homepage/Homepage.js b/src/Homepage/Homepage/Homepage.js
index 82f10e4aa..3feff02f3 100644
--- 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}

From 406825c933d685d9f2aa9cb7cec0ee13355285e1 Mon Sep 17 00:00:00 2001
From: Abdul Khalid <mezmerizingbeats2004@gmail.com>
Date: Thu, 3 Aug 2023 09:11:09 +0530
Subject: [PATCH 2/2] feat: add screen reader only styles

---
 src/Homepage/Homepage/Homepage.css | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/Homepage/Homepage/Homepage.css b/src/Homepage/Homepage/Homepage.css
index 1b8663da4..d34c0ff3e 100644
--- 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;
+}