a11y: Search input is missing an accessible name/label

[iamjolly]

Description:

Form controls must have accessible names.

Screenshot:

WCAG SC:

• Success Criterion 1.3.1 Info and Relationships (Level A): Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.
• Success Criterion 3.3.2 Labels or Instructions (Level A): Labels or instructions are provided when content requires user input.

Recommended fix:

The second-level heading (h2) above the search form would make for a good label for the search input.

Current code:

<h2>Search for SORNs by entering a keyword (will return exact matches)</h2>

Proposed code:

<label for="general-search">Search for SORNs by entering a keyword (will return exact matches)</label>

Alternate fix:

If the team would prefer to keep the h2 as-is, then the search input could be assigned an aria-label attribute with a concise value to serve as the input's label, like:

<input class="usa-input" id="general-search" type="search" name="search" value="<%= params[:search] %>" aria-label="search"></input> 

Non-essential related code found:

There is a fieldset element wrapping the search input and button which is unnecessary. Fieldsets are typically used to represent "a set of form controls optionally grouped under a common name" (W3C HTML 5 Spec). If this is being used to attach CSS classes for presentational purposes, the div element may be a better choice here.