fix(resources): associate filter checkboxes with labels explicitly by tejaswiverma121-byte · Pull Request #8080 · layer5io/layer5

tejaswiverma121-byte · 2026-09-17T18:18:10Z

Description

This PR fixes #8063
Add category-scoped unique IDs and matching htmlFor attributes to checkbox filters on the Resources page to ensure proper accessibility association.
Notes for Reviewers

Signed commits

Yes, I signed my commits.

Summary by CodeRabbit

Accessibility
- Improved resource filter controls by associating each checkbox with its visible label for easier navigation and interaction.
Bug Fixes
- Filter options now appear only when matching results are available, preventing empty entries in the resource navigation.
- Reformatted filter query handling without changing the available filter categories or result counts.

coderabbitai · 2026-09-17T18:19:20Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Advanced

Run ID: cc15e472-17d1-4710-beb3-0e44f11721af

📥 Commits

Reviewing files that changed from the base of the PR and between 69fb415 and c85bdcf.

📒 Files selected for processing (1)

src/sections/Resources/Resources-grid/filters.js

Included review availability: Your plan provides up to 4 included reviews per hour; 3 remain after this review.

📝 Walkthrough

Walkthrough

Resource filter JSX and the GraphQL query were reformatted. Filter options now use matching count-group lookups, omit unmatched items, and connect each checkbox to its label with id and htmlFor.

Changes

Resource filter controls

Layer / File(s)	Summary
Filter option rendering and associations `src/sections/Resources/Resources-grid/filters.js`	The GraphQL query and filter controls were reformatted without changing their filters. Type, Product, Technology, and Service Mesh lists now use `find`, omit unmatched items, and assign matching `id` and `htmlFor` values to checkboxes and labels.

Priority: ➖ Normal

Estimated code review effort: 2 (Simple) | ~10 minutes

Change: Bug fix · Severity of issue fixed: Medium

Suggested reviewers: vedant21-ctr

Merge Risk: ⚪ Minimal · up to c85bd

The resource filters retain their selection behavior while labels now explicitly associate with their checkboxes. No actionable merge risk remains.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely describes the main change: explicitly associating resource filter checkboxes with their labels.
Linked Issues check	✅ Passed	Issue `#8063` requires explicit label associations for filter checkboxes in Type, Product, Technology, and Service Mesh. The reviewed changes add category-scoped `id` values to matching checkboxes and m…
Out of Scope Changes check	✅ Passed	The changes stay within issue `#8063`. The query reformatting is non-functional, and the `find` lookups support rendering the corrected checkbox and label pairs only when matching counts exist. No unrel…
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 1…

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create a new PR

Warning

Some tools did not complete. Review the errors below.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

src/sections/Resources/Resources-grid/filters.js

Parsing error: The keyword 'import' is reserved

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands.}

vedant21-ctr

Reviewed the complete diff and options.js. The accessibility fix and .find() changes look correct, and the existing filtering behavior is preserved.

One change requested: IDs currently use x.value, but values like Recorded Webinar, Docker Extension, and Open Service Mesh contain spaces. Please use the existing x.id instead

const filterId = `type-${x.id}`;
<label htmlFor={filterId}>
  <input id={filterId} ... />

Apply the same pattern for Product, Technology, and Service Mesh. This keeps IDs unique, deterministic, and valid.

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>

tejaswiverma121-byte · 2026-09-18T03:52:21Z

@vedant21-ctr thanks for the review! Updated the filter IDs to use const filterId = ${category}-${x.id} across Type, Product, Technology, and Service Mesh. This removes all whitespace from IDs while keeping them unique and valid HTML5 IDs

github-actions · 2026-09-18T04:15:37Z

Preview deployment for PR #8080 removed.

This PR preview was automatically pruned because we keep only the 3 most recently updated previews on GitHub Pages to stay within deployment size limits.

If needed, push a new commit to this PR to generate a fresh preview.

Copilot

Note

Copilot was unable to run its full agentic suite in this review.

Copilot review overview

Review effort: Lite
Findings: 1 · 1

Open (2)

“Clear Filters” is rendered as a clickable <span> without keyboard support. Use a `<button… · New
This does a linear find for each option, making rendering O(options × groups). Since the same… · New

What changed in this PR

Improves accessibility and usability of the Resources page filters by explicitly associating checkbox inputs with their visible labels and preventing filter options with no matching results from rendering.

Changes:

Added category-scoped checkbox id values and corresponding htmlFor label associations across Type/Product/Technology/Service Mesh filters.
Updated filter option rendering to only show items that exist in the GraphQL grouped results (hides empty options).
Reformatted the useStaticQuery(graphql…) block and tidied JSX formatting.

File	Description
src/sections/Resources/Resources-grid/filters.js	Adds explicit checkbox/label associations and conditionally renders only filters with matching counts.

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

+            <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>
+            ) : (
+              ""
+            )}


+              {typeOptions[0].subdata.map((x) => {
+                const type =
+                  types && types.find((t) => t.fieldValue === x.value);
+                const filterId = `type-${x.id}`;
+                return type ? (


vedant21-ctr suggested changes Sep 17, 2026

View reviewed changes

fix(resources): associate filter checkboxes with labels explicitly

c85bdcf

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>

tejaswiverma121-byte force-pushed the fix/8063-filter-checkboxes-labels branch from 69fb415 to c85bdcf Compare September 18, 2026 03:51

dhruveshmishra requested a lite review from Copilot September 22, 2026 13:50

Copilot AI reviewed Sep 22, 2026

View reviewed changes

Navigation Menu

fix(resources): associate filter checkboxes with labels explicitly - #8080

fix(resources): associate filter checkboxes with labels explicitly#8080
tejaswiverma121-byte wants to merge 1 commit into
layer5io:masterfrom
tejaswiverma121-byte:fix/8063-filter-checkboxes-labels

tejaswiverma121-byte commented Sep 17, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Sep 17, 2026 •

edited

Loading

Walkthrough

Changes

Uh oh!

vedant21-ctr left a comment •

edited

Loading

Uh oh!

tejaswiverma121-byte commented Sep 18, 2026

Uh oh!

github-actions Bot commented Sep 18, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

This branch has not been deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

tejaswiverma121-byte commented Sep 17, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented Sep 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Uh oh!

vedant21-ctr left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

tejaswiverma121-byte commented Sep 18, 2026

Uh oh!

github-actions Bot commented Sep 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Copilot review overview

Uh oh!

This branch has not been deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

tejaswiverma121-byte commented Sep 17, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Sep 17, 2026 •

edited

Loading

vedant21-ctr left a comment •

edited

Loading

github-actions Bot commented Sep 18, 2026 •

edited

Loading