fix(resources): associate filter checkboxes with labels explicitly

[tejaswiverma121-byte]

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]

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

• X
• Mastodon
• Reddit
• LinkedIn

_{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.

[tejaswiverma121-byte]

@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]

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.