[A11Y] Missing accessible label and landmark role on search input

[davwheat]

Bug Report

Current Behavior
There is no accessible label on the Search input, and the landmark search role is missing.

Placeholders should never be used in place of real landmarked elements, such as a <label>. This is because they prevent users with assistive technologies from selecting the input by voice control.

While placeholder text provides valuable guidance for many users, placeholder text is not a replacement for labels. Assistive technologies, such as screen readers, do not treat placeholder text as labels.

Possible Solution
The W3 consortium recommend using hidden <label>s for inputs where we don't want to visibly display the label to the user, as these allow assistive tech to still use them.

A label for a form control helps everyone better understand its purpose. In some cases, the purpose may be clear enough from the context when the content is rendered visually. The label can be hidden visually, though it still needs to be provided within the code to support other forms of presentation and interaction, such as for screen reader and speech input users.

However, in this scenario, using aria-label on the <input> is far easier, and also suggested as a possible approach for hiding label text

Source: https://www.w3.org/WAI/tutorials/forms/labels/#hidden