a11y: improving the search input field

Signed-off-by: Christine Belzie <shecoder30@gmail.com>

Author: CBID2

src/Search.css

@@ -0,0 +1,30 @@
+.search-form {
+    display: flex;
+    justify-content: center;
+    margin: 1rem 0;
+}
+
+.search-container {
+    width: 100%;
+    max-width: 400px;
+}
+
+.search-label {
+    display: block;
+    font-size: 1rem;
+    color: #333;
+}
+
+.search-input {
+    width: 100%;
+    padding: 0.5rem;
+    font-size: 1rem;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+}
+
+.search-input:focus {
+    border-color: #007bff;
+    outline: none;
+    box-shadow: 0 0 3px rgba(0, 123, 255, 0.5);
+}

src/Search.jsx

@@ -23,8 +23,11 @@ const Search = () => {
       </h1>
 
       {!showPopularNews &&
-        <form>
-          <div>
+        <form className="search-form">
+          <div className="search-container">
+            <label htmlFor="search-input" className="search-label">
+              Search for articles:
+            </label>
             <input type="text" placeholder="search here"
               value={query}
               onChange={(e) => searchFn(e.target.value)}