Merge pull request #47 from CBID2/improving-input

a11y: improving the search input field

Author: AnkanMisra

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

@@ -1,41 +1,43 @@
-import React from 'react'
-import { useGlobalContext } from './Context'
-
+import React from "react";
+import { useGlobalContext } from "./Context";
 
 const Search = () => {
-  const { query, searchFn, showPopularNews, setReadingMode, readingMode } = useGlobalContext();
-  return (
-    <>
-      <div
-        style={{
-          display: "flex",
-          justifyContent: "center",
-        }}>
-        <button
-          onClick={() => setReadingMode(!readingMode)}
-        >
-          {readingMode ? "Exit Reading Mode" : "Enter Reading Mode"}
-        </button>
-      </div>
-      <h1 className="heading">
-        <span className='subText'>T</span>ech
-        <span className='subText'>P</span>ulse
-      </h1>
-
-      {!showPopularNews &&
-        <form>
-          <div>
-            <input type="text" placeholder="search here"
-              value={query}
-              onChange={(e) => searchFn(e.target.value)}
-            />
-          </div>
-        </form>
-      }
-    </>
-
+	const { query, searchFn, showPopularNews, setReadingMode, readingMode } =
+		useGlobalContext();
+	return (
+		<>
+			<div
+				style={{
+					display: "flex",
+					justifyContent: "center",
+				}}>
+				<button onClick={() => setReadingMode(!readingMode)}>
+					{readingMode ? "Exit Reading Mode" : "Enter Reading Mode"}
+				</button>
+			</div>
+			<h1 className="heading">
+				<span className="subText">T</span>ech
+				<span className="subText">P</span>ulse
+			</h1>
 
-  )
-}
+			{!showPopularNews && (
+				<form className="search-form">
+					<div className="search-container">
+						<label htmlFor="search-input" className="search-label">
+							Search for articles:
+						</label>
+						<input
+							id="search-input"
+							type="text"
+							placeholder="search here"
+							value={query}
+							onChange={(e) => searchFn(e.target.value)}
+						/>
+					</div>
+				</form>
+			)}
+		</>
+	);
+};
 
-export default Search
+export default Search;