Background
The search toggle on narrow screens is currently rendered an anchor element, even though it behaves as button most of the time. The anchor is used as a no-JS fallback.
Some browsers (macOS) don't focus <a> elements by default (only actual buttons are), and screenreaders read out the element as a link, which doesn't match the expected behavior. Originally reported in T311294
Instead we should render both <a> and <button>, and hide the appropriate element based off JS support
User story
As a user of assistive tech, I want the semantics of the search toggle to be correct whether im using JS or not.
AC
- The search toggle is a button when JS is enabled
- The search toggle should have a descriptive label when it is a button
- The search toggle is a link when JS is disabled