fix: improve search/clear a11y

[nolanlawson]

Fixes the issues described in #221:

1. Adds a new i18n.clear value (default of "Clear") as the accessible label for the clear button
2. To give the clear button a focus style, avoid making it disabled when the search is focused. Otherwise when you press tab, it doesn't change focus to the clear button. (Rather than disabling it, I made it so that if you somehow click the button while searching, it just does nothing.) ignore, I was wrong about this
3. Tweak the styles on the clear button to give it more padding, so that the outline appears nicer-looking. As an added bonus, this improves the touch target size for the button, although for the best a11y, it really should be at least 44x44 pixels (right now it's 23x19).

Visually the button should look exactly the same when not focused. When it is focused, it will use the user agent default stylesheet (in my case, Ubuntu orange):

I also made some other a11y fixes in the same part of the code:

1. Adds a <label> to the <input> because a placeholder is not enough for a11y.
2. Change <input type="text"> to <input type="search">, because that's what it is. 🙂 To fix issues with user agent styles adding their own "search" style, I added -webkit-appearance: none;.

[nolanlawson]

OK, I tweaked and fixed up some issues with the clear button. I kept the original behavior where it's only enabled when there is some search text.

I also added a small tweak where, when you search, focus is returned back to the input field. This means you can

1. Type some text
2. Press tab to focus on the clear button
3. Press spacebar to click the button
4. The input text is cleared, and the focus is back on the search input