From 61105efc65a66dd37b25eb157fea1bf807eec975 Mon Sep 17 00:00:00 2001
From: tejaswiverma <tejaswiverma121@gmail.com>
Date: Fri, 18 Sep 2026 09:59:42 +0530
Subject: [PATCH] fix(search): add accessible attributes, configurable
 identifiers, and context-specific labels

Make id, name, and autoComplete configurable with clean defaults on DebounceInput, set type='button' with action label 'Search' on Button, and provide context-specific labels across blog, news, resources, sistent, and meshery integration views.

Signed-off-by: tejaswiverma <tejaswiverma121@gmail.com>
---
 src/reusecore/Search/index.js                 | 15 +++++-
 src/sections/Blog/Blog-grid/index.js          | 34 ++++++++++----
 src/sections/Blog/Blog-list/index.js          | 46 ++++++++++++++-----
 src/sections/Company/News-grid/index.js       |  3 ++
 .../Meshery-integrations/IntegrationsGrid.js  |  3 ++
 .../Projects/Sistent/components/index.js      |  8 +++-
 .../Resources/Resources-grid/index.js         | 20 ++++++--
 7 files changed, 100 insertions(+), 29 deletions(-)

diff --git a/src/reusecore/Search/index.js b/src/reusecore/Search/index.js
index 85ed90bcda6825..95763abdf15d1b 100644
--- a/src/reusecore/Search/index.js
+++ b/src/reusecore/Search/index.js
@@ -12,8 +12,15 @@ const SearchBox = ({
   paginate,
   currentPage,
   classnames,
-  focusSearch
+  focusSearch,
+  ariaLabel,
+  "aria-label": aria_label,
+  id = "search",
+  name = "search",
+  autoComplete = "off",
 }) => {
+  const accessibleLabel = ariaLabel || aria_label || "Search";
+
   const handleChange = (e) => {
     if (hideFilter != undefined && setHideFilter != undefined) {
       if (e.target.value.length > 0) {
@@ -36,6 +43,8 @@ const SearchBox = ({
     <SearchWrapper>
       <div className={`search-box ${classnames ? classnames.join(" ") : ""}`}>
         <DebounceInput
+          id={id}
+          name={name}
           type="text"
           value={searchQuery}
           minLength={1}
@@ -43,8 +52,10 @@ const SearchBox = ({
           onChange={(e) => handleChange(e)}
           placeholder="Search..."
           autoFocus={focusSearch}
+          aria-label={accessibleLabel}
+          autoComplete={autoComplete}
         />
-        <Button aria-label="search icon">
+        <Button type="button" aria-label="Search">
           <FaSearch />
         </Button>
       </div>
diff --git a/src/sections/Blog/Blog-grid/index.js b/src/sections/Blog/Blog-grid/index.js
index 78f6cc2a9251cf..775bbc36a2ac4e 100644
--- a/src/sections/Blog/Blog-grid/index.js
+++ b/src/sections/Blog/Blog-grid/index.js
@@ -49,12 +49,22 @@ const BlogGrid = ({
                   setListView={setListView}
                   setGridView={setGridView}
                 />
-                <SearchBox searchQuery={searchQuery} searchData={searchData} paginate={paginate} currentPage={currentPage} focusSearch={true}/>
+                <SearchBox
+                  searchQuery={searchQuery}
+                  searchData={searchData}
+                  paginate={paginate}
+                  currentPage={currentPage}
+                  focusSearch={true}
+                  ariaLabel="Search blog posts"
+                  id="blog-search"
+                  name="blog-search"
+                />
               </div>
               <div className="blog-grid-wrapper">
-                <Row style={{
-                  flexWrap: "wrap"
-                }}
+                <Row
+                  style={{
+                    flexWrap: "wrap",
+                  }}
                 >
                   {queryResults.length < 1 && (
                     <Col $xs={12} $sm={6}>
@@ -62,11 +72,17 @@ const BlogGrid = ({
                     </Col>
                   )}
 
-                  {searchedPosts.length > 0 && searchedPosts.map(({ id, frontmatter, fields }, index) => (
-                    <Col key={id} $xs={12} $sm={6}>
-                      <Card frontmatter={frontmatter} fields={fields} loading={index === 0 ? "eager" : "lazy"} fetchpriority={index === 0 ? "high" : "auto"} />
-                    </Col>
-                  ))}
+                  {searchedPosts.length > 0 &&
+                    searchedPosts.map(({ id, frontmatter, fields }, index) => (
+                      <Col key={id} $xs={12} $sm={6}>
+                        <Card
+                          frontmatter={frontmatter}
+                          fields={fields}
+                          loading={index === 0 ? "eager" : "lazy"}
+                          fetchpriority={index === 0 ? "high" : "auto"}
+                        />
+                      </Col>
+                    ))}
                   <Col>
                     {searchedPosts.length > 0 && (
                       <Pagination
diff --git a/src/sections/Blog/Blog-list/index.js b/src/sections/Blog/Blog-list/index.js
index ee13c341bdb6ad..f435e98c9f12fc 100644
--- a/src/sections/Blog/Blog-list/index.js
+++ b/src/sections/Blog/Blog-list/index.js
@@ -28,8 +28,9 @@ const BlogList = ({
   const header = tag
     ? `${totalCount} post${totalCount === 1 ? "" : "s"} tagged with "${tag}"`
     : category
-      ? `${totalCount} post${totalCount === 1 ? "" : "s"
-      } categorized as "${category}"`
+      ? `${totalCount} post${
+          totalCount === 1 ? "" : "s"
+        } categorized as "${category}"`
       : "Blog";
 
   // Change page
@@ -47,9 +48,10 @@ const BlogList = ({
       />
       <div className="blog-page-wrapper">
         <Container>
-          <Row style={{
-            flexWrap: "wrap"
-          }}
+          <Row
+            style={{
+              flexWrap: "wrap",
+            }}
           >
             <Col $xs={12} $lg={8}>
               {!pageContext.tag && !pageContext.category ? (
@@ -62,23 +64,43 @@ const BlogList = ({
                   <SearchBox
                     searchQuery={searchQuery}
                     searchData={searchData}
-                    paginate={paginate} currentPage={currentPage}
+                    paginate={paginate}
+                    currentPage={currentPage}
                     focusSearch={true}
+                    ariaLabel="Search blog posts"
+                    id="blog-search"
+                    name="blog-search"
                   />
                 </div>
               ) : (
-                <SearchBox searchQuery={searchQuery} searchData={searchData} paginate={paginate} currentPage={currentPage} focusSearch={true} />
+                <SearchBox
+                  searchQuery={searchQuery}
+                  searchData={searchData}
+                  paginate={paginate}
+                  currentPage={currentPage}
+                  focusSearch={true}
+                  ariaLabel="Search blog posts"
+                  id="blog-search"
+                  name="blog-search"
+                />
               )}
               <div className="blog-list-wrapper">
-                <Row style={{
-                  flexWrap: "wrap"
-                }}
-                className="blog-lists"
+                <Row
+                  style={{
+                    flexWrap: "wrap",
+                  }}
+                  className="blog-lists"
                 >
                   {searchedPosts.length > 0 &&
                     searchedPosts?.map(({ id, frontmatter, fields }, index) => (
                       <Col $xs={12} key={id}>
-                        <Card frontmatter={frontmatter} fields={fields} loading={index === 0 ? "eager" : "lazy"} fetchpriority={index === 0 ? "high" : "auto"} listView={true} />
+                        <Card
+                          frontmatter={frontmatter}
+                          fields={fields}
+                          loading={index === 0 ? "eager" : "lazy"}
+                          fetchpriority={index === 0 ? "high" : "auto"}
+                          listView={true}
+                        />
                       </Col>
                     ))}
                   <Col>
diff --git a/src/sections/Company/News-grid/index.js b/src/sections/Company/News-grid/index.js
index 00bb54b885624f..c161064de041b4 100644
--- a/src/sections/Company/News-grid/index.js
+++ b/src/sections/Company/News-grid/index.js
@@ -117,6 +117,9 @@ const NewsGrid = ({ data }) => {
                     searchQuery={searchQuery}
                     searchData={searchData}
                     focusSearch={true}
+                    ariaLabel="Search news"
+                    id="news-search"
+                    name="news-search"
                   />
                 </div>
               </div>
diff --git a/src/sections/Meshery/Meshery-integrations/IntegrationsGrid.js b/src/sections/Meshery/Meshery-integrations/IntegrationsGrid.js
index 1f41cbe5046f60..5ffd7605c00903 100644
--- a/src/sections/Meshery/Meshery-integrations/IntegrationsGrid.js
+++ b/src/sections/Meshery/Meshery-integrations/IntegrationsGrid.js
@@ -230,6 +230,9 @@ const IntegrationsGrid = ({ category, count }) => {
         setHideFilter={setHideFilter}
         classnames={["integration-search"]}
         focusSearch={false}
+        ariaLabel="Search integrations"
+        id="integration-search"
+        name="integration-search"
       />
 
       <section style={{ margin: "0 2.6rem" }}>
diff --git a/src/sections/Projects/Sistent/components/index.js b/src/sections/Projects/Sistent/components/index.js
index f4845b78142df0..be10cdc91a3f72 100644
--- a/src/sections/Projects/Sistent/components/index.js
+++ b/src/sections/Projects/Sistent/components/index.js
@@ -53,7 +53,13 @@ const SistentComponents = ({ data }) => {
             </div>
             <div className="main-content">
               <div className="search-container">
-                <SearchBox searchQuery={searchQuery} searchData={searchData} />
+                <SearchBox
+                  searchQuery={searchQuery}
+                  searchData={searchData}
+                  ariaLabel="Search components"
+                  id="component-search"
+                  name="component-search"
+                />
               </div>
               <div className="product_cards">
                 <div className="cards">
diff --git a/src/sections/Resources/Resources-grid/index.js b/src/sections/Resources/Resources-grid/index.js
index 8958290507c5cd..f0aeb189448058 100644
--- a/src/sections/Resources/Resources-grid/index.js
+++ b/src/sections/Resources/Resources-grid/index.js
@@ -23,7 +23,6 @@ const ResourceGrid = (props) => {
       left: 100,
       behavior: "smooth",
     });
-
   };
 
   return (
@@ -37,14 +36,25 @@ const ResourceGrid = (props) => {
               paginate={paginate}
               currentPage={props.currentPage}
               focusSearch={true}
+              ariaLabel="Search resources"
+              id="resource-search"
+              name="resource-search"
             />
           </div>
         </div>
-        <Row style={{
-          flexWrap: "wrap"
-        }}
+        <Row
+          style={{
+            flexWrap: "wrap",
+          }}
         >
-          {props.data.length < 1 && <EmptyResources errorMessage={"No matching resources"} errorSubtitle={"Try removing one or more filters to broaden your results."} />}
+          {props.data.length < 1 && (
+            <EmptyResources
+              errorMessage={"No matching resources"}
+              errorSubtitle={
+                "Try removing one or more filters to broaden your results."
+              }
+            />
+          )}
 
           {searchedResource.map(({ id, frontmatter, fields }) => (
             <Col key={id} $xs={12} $sm={6} $xl={4}>