Enhance search bar UX

[renintw]

This PR makes three simple changes to the search bar UX mentioned here.

1. Make the Search Icon aligned with the global menu icon direction.
2. Make the focus state clear - the input ends before the icon.
3. Change the placeholder from Search ... to Search in Code Reference ....

As to how to make the search button in the search bar more obvious, since we might be able to just use the search on top of the handbook sidebar (comment) or just move the search bar control into the site-title (PR), I think it isn't worth spending time for the moment to figure out whether to implement any of the proposals or just remove the whole search bar.

Screenshots

Before	After

How to test

1. Go to any API detail page.
2. Click Search Icon
3. Check if the Search Icon Direction, Focus state, and Placeholder are correct.

[tellyworth]

Looks good to me!

[ryelle]

Which browsers need these prefixes?

[renintw]

https://caniuse.com/?search=transform
There are about 0.91% of users in total globally still using older browsers needing these prefixes, I used to just add these prefixes, but maybe it's not a good practice, should I just remove them?

(Just found that -o- is used for Opera 11.5 and no one is using that version anymore, I'm going to remove it first)

[ryelle]

Generally speaking we've followed the @wordpress/browserslist-config for which browsers to support.

Browser List

and_chr 101
android 101
chrome 101
chrome 100
chrome 99
edge 101
edge 100
firefox 100
firefox 99
ios_saf 15.4
ios_saf 15.2-15.3
ios_saf 14.5-14.8
op_mini all
opera 86
opera 85
safari 15.5
safari 15.4
samsung 16.0

The only one on this list that doesn't support unprefixed transform is Opera Mini, but it doesn't support transform at all, so we should be okay to drop the prefixes. In the past we've had people flag issues in older browsers (WordPress/wporg-mu-plugins#159), so I'd also check the support for Chrome 87 and make sure it's not broken, at least. But we're fine with unprefixed transform here, too 👍🏻

[renintw]

Thanks for the insight sharing!
I've removed them and also tested it on Chrome 87, it looks good 👍

[ryelle]

I found a few issues:

1. There's an underline under the search button — this is Mac/Firefox
   
2. The input has a focus style, but the search button also needs one — in this screenshot I'm focused on the button, but there's no indicator.
   
3. The search bar overlaps the icon on smaller screens, for example at 500px:
   

[StevenDufresne]

@renintw Just as an FYI: I am working on an alternate approach where the search bar moves to match other wordpress.org themes: #75. It's an experiment so it may not take but I would love it if you could take a look and let me know what you think!

[renintw]

I found a few issues:

1. There's an underline under the search button — this is Mac/Firefox
   
2. The input has a focus style, but the search button also needs one — in this screenshot I'm focused on the button, but there's no indicator.
   
3. The search bar overlaps the icon on smaller screens, for example at 500px:
   

Thanks for catching the issue on Firefox and on smaller screens, I've fixed them in the commit: Fix incorrect style, could you help review them again, thanks!
And after the review, I'll rebase it to the earlier commit.

Tested on Firefox and chrome as well as on different screen sizes: https://d.pr/i/rb0Nt2

[ryelle]

Suggested change

	&:active {
	&:focus {

The keyboard focus state is controlled with :focus. You can test this by using your keyboard, click into the search bar, then hit tab. It will move you to the button, but there's no visual indicator in the PR currently.

[renintw]

Thanks for pointing it out!

Done Fixing and also changing the active style to the one like the search bar in the pattern-directory.

[ryelle]

Where does this color come from? Maybe instead, try one of the colors in this list to keep the palette consistent. Like this:

Suggested change

	outline-color: rgb(0, 95, 204);
	outline-color: get-color(blue-60);

[renintw]

I got it from Chrome devTools directly.

the colors in this list to keep the palette consistent

I like the idea, thanks for sharing it! 👍 However, after applying it, I found the color is a bit different in Chrome (it's hard to tell without zooming in or looking carefully into it though), and it's somehow the same in Firefox. I think I'll change it to use get-color here anyway as it seems to me it's just a slight difference.

Done Changing.

[ryelle]

Looks great now! Thanks for iterating on it :)