More accessible search in header

[thamas]

Don't hide "search" button and change the styling.

On the jan 2 meeting (https://docs.google.com/document/d/1mF2C3K7HGg5rFv7E3UpmGcobSjDQLo18TH3BLN4ZWRo/edit#heading=h.nv9lhmyhuitv) we decided to go with option C design.

[thamas]

@kjays Please design hover/active states too and than provide access to the source sketch file!

[kjays]

@thamas This got me thinking whether we should address this styling issue as part of the global focus styles for fields first? At the moment we have standard browser outline styling of blue I believe? Do we want to style all text fields using outline or a custom approach?

[kjays]

But for starters. Here's the style guide snippet updated for our default styling:

[fuzzbomb]

Good to see movement on this! The invisible-but-operable button was a stability blocker IMO.

For focus, hover, active styles, I recommend addressing global styles first, then seeing if any exceptions are needed.

The trouble with the browser default styles, is they have occasionally been known to change abruptly between browser releases. Remember back in the day when Chrome used an orange outline? Chrome's current pale blue might not pass the new WCAG 2.1 Graphics Contrast criterion.

I'll start an issue for global focus styles.

[fuzzbomb]

Note that WCAG 2.1 Graphics Contrast also applies to the resting state. The grey input + button border should be at least 3:1 contrast to the background outside of the control. The idea is that users have an idea of the extent of the clickable area (e.g. buttons often bigger padding than the text inside them)

[thamas]

@kjays Other text inputs and buttons (eg. on the login form) are very different than the search form. The question is what should be done to the alpha deadline. I hope the new design is more accessible that the current state so should be done. And we can improve it further if it is needed.

FYI Chrome provides the blue outline on the text input but Firefox displays nothing.

I thinks focus / hover styles should be designed for this form.

[thamas]

So first round is in the dev branch! :)

• No focus / hover styles set yet!
• I set the font size a little bit smaller (0.875rem instead of 1rem) because I've found it to look better
• Styling leaks to the search page and possibly to other forms, that should be fixed too

[fuzzbomb]

close this, follow-ups are at drupal.org in

https://www.drupal.org/project/drupal/issues/2938194#comment-12466215