USWDS - Feature: Add instructions to search component

[amycole501]

Is your feature request related to a problem? Please describe.

The search component needs to clarify what type of content is being searched. I suggest we add "search site" or "search directory" or other example help text to clarify what it is the person is searching.

Some webpages may have more than one search on a page (site search, directory search). Without clear instructions and labels, a someone could be confused as to what results to expect from each search.

Describe the solution you'd like

On the search component page I recommend we add labels or instructions in our example code. This would allow teams to know to specify what content the search component is indexing.

The labels need to be persistent (i.e. not helper text only).

This enhancement follows WCAG's guidance on labels and instructions.

Describe alternatives you've considered

No response

Additional context

No response

Code of Conduct

• I agree to follow this project's Code of Conduct.
• I checked the current issues for duplicate feature requests.

[mahoneycm]

On the component side of this, what do you think this should look like?

We'll need a label for screen readers. How should the visual instructions be presented? I was considering placeholders but I know those aren't great for usability 🤔

[amycole501]

I'd suggest it look something like this with the visible label above the field

This guidance may only need to be for pages where there are more than one search components. In that case I'd suggest the second, non-template version of the search be the one with a unique label.

[mejiaj]

@amycole501 to discuss in UX sync to come up with guidance to add the appropriate language.