Olivero: Search is unusable in desktop Safari (at wide widths)

This is a major problem, and IMO is 100% a bad implementation by the webkit team that causes non-standard behavior on the web. Unfortunately based on my research it seems unlikely to be fixed in webkit any time soon and there are a couple of issues remaining here.

1. Because the search icon that opens the dropdown is a button element, clicking it with JS disabled on Safari does nothing.
2. Because the fix is a JS-based solution, the issue persists when JS is disabled.

A potential solution would be to refactor the Search block to render <a href="/search">{{icon}}</a> and then re-render a button element over top of that and wiring up the dropdown functionality.

Tabbing over the search icon opens the drop-down though

@mherchel a less radical alternative is to listen for 'pointerdown'. Those events fire prior to focus leaving the other elements, closing the dropdown.

This still doesn't solve the issue of the search box opening on tab-over and then not interacting at all on click, though.

Adding `tabindex="0"` to the form allows the form to "catch" the dropped focus before it falls out of whatever element has `:focus-within` enabled.

Following a call this morning we want to move forward with the javascript implementation first and then handle the no-js fallback in safari in a separate issue. As Mike put it "this issue with javascript disabled is not something my mom will run into", and I'm inclined to agree.

This comment deliberately does not move the issue to RTBC just yet.

Looks like this still won't work as expected for two reasons:

1) A click event requires a mousedown+mouseup user interaction, but safari drops focus on mousedown. A fast click will keep the search bar open as expected, but if a user clicks slowly enough (outside the bounds of the text input) the mousedown event leads to focusout, triggering the search bar to close before the 'has-click' class is added

2) Once the 'has-click' class is added the only way for it to be removed is by using the close button. Clicking outside the search area leaves the search bar open

New patch attached that fixes the issue in Safari with javascript, and IMO improves the interface in Firefox and Chrome as well.

I added `tabindex="-1"` and that seems to allow the form wrapper to "catch" focus once it leaves the input element. The only remaining issue is the button is unusable in safari w/o javascript

Patch for 10.0.x attached

Changed comment wording for clarity and to not upset CSpell

Follow up issue for the rarer safari-and-no-javascript combination #3271227: Olivero: Search toggle button doesn't work on click in Safari without JavaScript

Committed cab778d and pushed to 10.0.x. Also cherry-picked to 9.4.x. Thanks!