Filter checkboxes lack proper label associations on Resources page

Description

On the Resources page, Chrome DevTools reports:

• No label associated with a form field across the filter categories (Type, Product, Technology, Service Mesh).
  In src/sections/Resources/Resources-grid/filters.js, the <input type="checkbox" /> elements are rendered within JSX fragments nested inside generic <label> tags without explicit id and htmlFor pairings. Consequently, assistive technologies cannot reliably bind each checkbox to its respective category count and label.

Expected Behavior

Each checkbox should have a unique id attribute (e.g. id={filter-${x.value}}) and its corresponding <label> element should explicitly reference it via htmlFor={filter-${x.value}}.

Screenshots

flowchart TD
    subgraph Current ["❌ Current: Implicit / Broken Association"]
        direction TB
        L1["<label> (No htmlFor)"]
        F1["<Fragment>"]
        I1["<input type='checkbox' /> (No id)"]
        T1["<span> Blog (48) </span>"]
        
        L1 --> F1
        F1 --> I1
        F1 --> T1
        I1 -.->|"❌ Screen readers cannot bind"| T1
    end
    subgraph Proposed ["✅ Proposed: Explicit 1-to-1 Binding"]
        direction TB
        L2["<label htmlFor='filter-blog'>"]
        I2["<input id='filter-blog' type='checkbox' />"]
        T2["<span> Blog (48) </span>"]
        
        L2 --> T2
        I2 <===>|"✅ Explicit HTML association via id & htmlFor"| L2
    end

Environment:

• Host OS:macOS
• Browser:Chrome

Contributor Resources and Handbook

The layer5.io website uses Gatsby, React, and GitHub Pages. Site content is found under the master branch.

• 📚 See contributing instructions.
• 🎨 Wireframes and designs for Layer5 site in Figma (open invite)
• 🙋🏾🙋🏼 Questions: Discussion Forum and Community Slack.

Join the Layer5 Community by submitting your community member form.