From c85bdcf9114f7d8f924ea1abd2ae51ce3b3f4c57 Mon Sep 17 00:00:00 2001
From: tejaswiverma <tejaswiverma121@gmail.com>
Date: Thu, 17 Sep 2026 23:46:10 +0530
Subject: [PATCH] fix(resources): associate filter checkboxes with labels
 explicitly

Add category-scoped unique IDs and matching htmlFor attributes to checkbox filters using x.id to prevent whitespace and ensure proper accessibility association.

Signed-off-by: tejaswiverma <tejaswiverma121@gmail.com>
---
 .../Resources/Resources-grid/filters.js       | 356 ++++++++++--------
 1 file changed, 198 insertions(+), 158 deletions(-)

diff --git a/src/sections/Resources/Resources-grid/filters.js b/src/sections/Resources/Resources-grid/filters.js
index 795f42f2ad5b4d..3b47775d9b5ca7 100644
--- a/src/sections/Resources/Resources-grid/filters.js
+++ b/src/sections/Resources/Resources-grid/filters.js
@@ -6,47 +6,65 @@ import { FiFilter } from "@react-icons/all-files/fi/FiFilter";
 import { options } from "./options";
 import { graphql, useStaticQuery } from "gatsby";
 
-
 import ResourceNavigationWrapper from "./filters.style";
 
 const Navigation = (props) => {
-
-  const counting = useStaticQuery(
-    graphql`query allFilters {
-  type: allMdx(
-    filter: {fields: {collection: {in: ["blog", "resources", "news", "events"]}}, frontmatter: {published: {eq: true}, resource: {eq: true}}}
-  ) {
-    group(field: {frontmatter: {type: SELECT}}) {
-      fieldValue
-      totalCount
-    }
-  }
-  product: allMdx(
-    filter: {fields: {collection: {in: ["blog", "resources", "news", "events"]}}, frontmatter: {published: {eq: true}, resource: {eq: true}}}
-  ) {
-    group(field: {frontmatter: {product: SELECT}}) {
-      fieldValue
-      totalCount
-    }
-  }
-  technology: allMdx(
-    filter: {fields: {collection: {in: ["blog", "resources", "news", "events"]}}, frontmatter: {published: {eq: true}, resource: {eq: true}}}
-  ) {
-    group(field: {frontmatter: {technology: SELECT}}) {
-      fieldValue
-      totalCount
+  const counting = useStaticQuery(graphql`
+    query allFilters {
+      type: allMdx(
+        filter: {
+          fields: {
+            collection: { in: ["blog", "resources", "news", "events"] }
+          }
+          frontmatter: { published: { eq: true }, resource: { eq: true } }
+        }
+      ) {
+        group(field: { frontmatter: { type: SELECT } }) {
+          fieldValue
+          totalCount
+        }
+      }
+      product: allMdx(
+        filter: {
+          fields: {
+            collection: { in: ["blog", "resources", "news", "events"] }
+          }
+          frontmatter: { published: { eq: true }, resource: { eq: true } }
+        }
+      ) {
+        group(field: { frontmatter: { product: SELECT } }) {
+          fieldValue
+          totalCount
+        }
+      }
+      technology: allMdx(
+        filter: {
+          fields: {
+            collection: { in: ["blog", "resources", "news", "events"] }
+          }
+          frontmatter: { published: { eq: true }, resource: { eq: true } }
+        }
+      ) {
+        group(field: { frontmatter: { technology: SELECT } }) {
+          fieldValue
+          totalCount
+        }
+      }
+      mesh: allMdx(
+        filter: {
+          fields: {
+            collection: { in: ["blog", "resources", "news", "events"] }
+          }
+          frontmatter: { published: { eq: true }, resource: { eq: true } }
+        }
+      ) {
+        group(field: { frontmatter: { mesh: SELECT } }) {
+          fieldValue
+          totalCount
+        }
+      }
     }
-  }
-  mesh: allMdx(
-    filter: {fields: {collection: {in: ["blog", "resources", "news", "events"]}}, frontmatter: {published: {eq: true}, resource: {eq: true}}}
-  ) {
-    group(field: {frontmatter: {mesh: SELECT}}) {
-      fieldValue
-      totalCount
-    }
-  }
-}`
-  );
+  `);
 
   const [expandFilter, setExpandFilter] = useState(false);
   const [expandType, setExpandType] = useState(true);
@@ -64,186 +82,208 @@ const Navigation = (props) => {
   const technologies = [...new Set(counting.technology.group)];
   const meshes = counting.mesh.group;
 
-
   return (
     <ResourceNavigationWrapper>
       <div className="filter">
         <div className="heading">
-          <div onClick={() => {
-            setExpandFilter(!expandFilter);
-          }} className="filter-menu-icon"
+          <div
+            onClick={() => {
+              setExpandFilter(!expandFilter);
+            }}
+            className="filter-menu-icon"
           >
             {expandFilter ? (
               <button className="filter-btn">
                 <IoClose className="filter-icon filter-close" />
                 <span>Filters</span>
               </button>
-            )  :
-              (
-                <button className="filter-btn">
-                  <FiFilter className="filter-icon filter-open"/>
-                  <span>Filters</span>
-                </button>
-              )}
+            ) : (
+              <button className="filter-btn">
+                <FiFilter className="filter-icon filter-open" />
+                <span>Filters</span>
+              </button>
+            )}
           </div>
-          <p className="heading-name" >
+          <p className="heading-name">
             <strong>Filters</strong>
-            <span className= {`${props.resources.length === 0 ? "clear-disabled" : "clear-enabled"} desk-view`} onClick={props.clear}>
+            <span
+              className={`${props.resources.length === 0 ? "clear-disabled" : "clear-enabled"} desk-view`}
+              onClick={props.clear}
+            >
               Clear Filters
             </span>
-            {expandFilter ? (<span className= {`${props.resources.length === 0 ? "clear-disabled" : "clear-enabled mob-view"}`} onClick={props.clear}>
-              Clear Filters
-            </span>) : ""}
+            {expandFilter ? (
+              <span
+                className={`${props.resources.length === 0 ? "clear-disabled" : "clear-enabled mob-view"}`}
+                onClick={props.clear}
+              >
+                Clear Filters
+              </span>
+            ) : (
+              ""
+            )}
           </p>
         </div>
 
         <div className="filters-boxes" id={expandFilter ? "filters-boxes" : ""}>
-          <div className="toggle-btn"  onClick={function () {
-            setExpandType(!expandType);
-          }}
+          <div
+            className="toggle-btn"
+            onClick={function () {
+              setExpandType(!expandType);
+            }}
           >
-            <p><strong>Type</strong></p>
+            <p>
+              <strong>Type</strong>
+            </p>
             {expandType ? (
-              <HiOutlineChevronUp
-                className="menu-icon"
-              />
+              <HiOutlineChevronUp className="menu-icon" />
             ) : (
-              <HiOutlineChevronDown
-                className="menu-icon"
-              />
+              <HiOutlineChevronDown className="menu-icon" />
             )}
           </div>
           <div className="list">
             <ul className={`ul ${expandType ? "ul-open" : ""}`}>
-              {typeOptions[0].subdata.map((x) => (
-                <li key={x.id}>
-                  <label>
-                    { types && types.map(type => (
-
-                      type.fieldValue === x.value &&
-                          <>
-                            <input type="checkbox"  value={x.value} onChange={props.handleChange} />
-                            <span> {x.label}</span>
-                            <span key={x.id}  className="total">({type.totalCount})</span>
-                          </>
-                    ))}
-                  </label>
-                </li>
-              ))}
+              {typeOptions[0].subdata.map((x) => {
+                const type =
+                  types && types.find((t) => t.fieldValue === x.value);
+                const filterId = `type-${x.id}`;
+                return type ? (
+                  <li key={x.id}>
+                    <label htmlFor={filterId}>
+                      <input
+                        type="checkbox"
+                        id={filterId}
+                        value={x.value}
+                        onChange={props.handleChange}
+                      />
+                      <span> {x.label}</span>
+                      <span className="total">({type.totalCount})</span>
+                    </label>
+                  </li>
+                ) : null;
+              })}
             </ul>
           </div>
 
-          <div className="toggle-btn" onClick={function () {
-            setExpandProduct(!expandProduct);
-          }}
+          <div
+            className="toggle-btn"
+            onClick={function () {
+              setExpandProduct(!expandProduct);
+            }}
           >
-            <p><strong>Product</strong></p>
+            <p>
+              <strong>Product</strong>
+            </p>
             {expandProduct ? (
-              <HiOutlineChevronUp
-                className="menu-icon"
-              />
+              <HiOutlineChevronUp className="menu-icon" />
             ) : (
-              <HiOutlineChevronDown
-                className="menu-icon"
-              />
+              <HiOutlineChevronDown className="menu-icon" />
             )}
           </div>
           <div className="list">
             <ul className={`ul ${expandProduct ? "ul-open" : ""}`}>
-              {productOptions[0].subdata.map((x) => (
-                <li key={x.id}>
-                  <label>
-                    { products && products.map(product => (
-
-                      product.fieldValue === x.value &&
-                         <>
-                           <input type="checkbox"  value={x.value} onChange={props.handleChange} />
-                           <span> {x.label}</span>
-                           <span key={x.id}  className="total">({product.totalCount})</span>
-                         </>
-                    ))}
-                  </label>
-                </li>
-              ))}
+              {productOptions[0].subdata.map((x) => {
+                const product =
+                  products && products.find((p) => p.fieldValue === x.value);
+                const filterId = `product-${x.id}`;
+                return product ? (
+                  <li key={x.id}>
+                    <label htmlFor={filterId}>
+                      <input
+                        type="checkbox"
+                        id={filterId}
+                        value={x.value}
+                        onChange={props.handleChange}
+                      />
+                      <span> {x.label}</span>
+                      <span className="total">({product.totalCount})</span>
+                    </label>
+                  </li>
+                ) : null;
+              })}
             </ul>
           </div>
 
-          <div className="toggle-btn" onClick={function () {
-            setExpandTech(!expandTech);
-          }}
+          <div
+            className="toggle-btn"
+            onClick={function () {
+              setExpandTech(!expandTech);
+            }}
           >
-            <p><strong>Technology</strong></p>
+            <p>
+              <strong>Technology</strong>
+            </p>
             {expandTech ? (
-              <HiOutlineChevronUp
-                className="menu-icon"
-              />
+              <HiOutlineChevronUp className="menu-icon" />
             ) : (
-              <HiOutlineChevronDown
-                className="menu-icon"
-              />
+              <HiOutlineChevronDown className="menu-icon" />
             )}
           </div>
           <div className="list">
             <ul className={`ul ${expandTech ? "ul-open" : ""}`}>
-              {techOptions[0].subdata.map((x) => (
-                <li key={x.id}>
-                  <label>
-                    { technologies && technologies.map(technology => (
-
-                      technology.fieldValue === x.value &&
-                         <>
-                           <input type="checkbox"  value={x.value} onChange={props.handleChange} />
-                           <span> {x.label}</span>
-                           <span key={x.id}  className="total">({technology.totalCount})</span>
-                         </>
-                    ))}
-
-                  </label>
-                </li>
-              ))}
+              {techOptions[0].subdata.map((x) => {
+                const technology =
+                  technologies &&
+                  technologies.find((t) => t.fieldValue === x.value);
+                const filterId = `technology-${x.id}`;
+                return technology ? (
+                  <li key={x.id}>
+                    <label htmlFor={filterId}>
+                      <input
+                        type="checkbox"
+                        id={filterId}
+                        value={x.value}
+                        onChange={props.handleChange}
+                      />
+                      <span> {x.label}</span>
+                      <span className="total">({technology.totalCount})</span>
+                    </label>
+                  </li>
+                ) : null;
+              })}
             </ul>
           </div>
 
-          <div className="toggle-btn" onClick={function () {
-            setExpandMesh(!expandMesh);
-          }}
+          <div
+            className="toggle-btn"
+            onClick={function () {
+              setExpandMesh(!expandMesh);
+            }}
           >
-            <p><strong>Service Mesh</strong></p>
+            <p>
+              <strong>Service Mesh</strong>
+            </p>
             {expandMesh ? (
-              <HiOutlineChevronUp
-                className="menu-icon"
-              />
+              <HiOutlineChevronUp className="menu-icon" />
             ) : (
-              <HiOutlineChevronDown
-                className="menu-icon"
-              />
+              <HiOutlineChevronDown className="menu-icon" />
             )}
           </div>
           <div className="list">
             <ul className={`ul ${expandMesh ? "ul-open" : ""}`}>
-              {meshOptions[0].subdata.map((x) => (
-                <li key={x.id}>
-                  <label>
-                    { meshes && meshes.map(mesh => (
-
-                      mesh.fieldValue === x.value &&
-                         <>
-                           <input type="checkbox"  value={x.value} onChange={props.handleChange} />
-                           <span> {x.label}</span>
-                           <span key={x.id}  className="total">({mesh.totalCount})</span>
-                         </>
-                    ))}
-
-                  </label>
-                </li>
-              ))}
+              {meshOptions[0].subdata.map((x) => {
+                const mesh =
+                  meshes && meshes.find((m) => m.fieldValue === x.value);
+                const filterId = `mesh-${x.id}`;
+                return mesh ? (
+                  <li key={x.id}>
+                    <label htmlFor={filterId}>
+                      <input
+                        type="checkbox"
+                        id={filterId}
+                        value={x.value}
+                        onChange={props.handleChange}
+                      />
+                      <span> {x.label}</span>
+                      <span className="total">({mesh.totalCount})</span>
+                    </label>
+                  </li>
+                ) : null;
+              })}
             </ul>
           </div>
         </div>
-
-
       </div>
-
     </ResourceNavigationWrapper>
   );
 };