Search input missing id, name, autocomplete, and accessible label

Description

On the Resources page (and other pages utilizing SearchBox), Chrome DevTools flags accessibility and best-practice warnings for the search bar:

• A form field element should have an id or name attribute
• An element doesn't have an autocomplete attribute
• No label associated with a form field
  In src/reusecore/Search/index.js, <DebounceInput /> lacks these attributes, which affects screen reader navigation and browser autofill compatibility.

Expected Behavior

The search input should:

• Have an accessible label via aria-label="Search resources"
• Include explicit id="resource-search" and name="resource-search" attributes
• Include autoComplete="off" (or "search") to satisfy HTML form best practices

Screenshots

flowchart LR
    subgraph Current ["❌ Current Implementation"]
        direction TB
        A1["<DebounceInput />"] --> B1["Has only: type, value, placeholder"]
        B1 --> C1["Accessibility Tree: No Accessible Name"]
        C1 --> D1["⚠️ DevTools Warnings:<br/>• Missing id/name<br/>• Missing autocomplete<br/>• No label associated"]
    end

    subgraph Proposed ["✅ Proposed Implementation"]
        direction TB
        A2["&lt;DebounceInput /&gt;"] --> B2["Adds: id, name, autoComplete, aria-label"]
        B2 --> C2["Accessibility Tree: Label = 'Search resources'"]
        C2 --> D2["🎉 Passes all accessibility audits"]
    end

    Current -.-> Proposed

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.