Add (standard) focus styles to all “Select” buttons on domain picker

[adamwoodnz]

Fixes https://github.com/Automattic/dotcom-forge/issues/10405

Proposed Changes

• Remove custom focus styles from domain selector elements to allow base focus styles to appear

Once these custom styles have been removed we can move onto updating the base styles across the app in https://github.com/Automattic/dotcom-forge/issues/10406

Note that the focus rings use --color-primary: var(--studio-blue-50); which is still the old WordPress blue, until #99033 lands and updates it to the modern WordPress blue (Blueberry).

Why are these changes being made?

• It's important for interactive elements to have focus styles for accessibility reasons.

Testing Instructions

• Navigate to http://calypso.localhost:3000/setup/onboarding/domains
• Enter a search term and wait for the list of options to be populated
• Use the tab key to move through the page focusing the interactive 'Select' button elements
• Observe that all buttons in the page have matching visible focus styles

Pre-merge Checklist

• Has the general commit checklist been followed? (PCYsg-hS-p2)
• Have you written new tests for your changes?
• Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
• Have you checked for TypeScript, React or other console errors?
• Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
• Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
  • For UI changes, have we tested the change in various languages (for example, ES, PT, FR, or DE)? The length of text and words vary significantly between languages.
• For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?

[github-actions]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-132685

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-132685&env=jetpack

Automattic for Agencies live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-132685&env=a8c-for-agencies

[matticbot]

This PR does not affect the size of JS and CSS bundles shipped to the user's browser.

Generated by performance advisor bot at iscalypsofastyet.com.

[jasmussen]

Nice one. Lots of red, that's the right way to do it!

Note that the focus rings use --color-primary: var(--studio-blue-50); which is still the old WordPress blue, until #99033 lands and updates it to the modern WordPress blue (Blueberry).

Correct, thank you for keeping this in mind.

The following is almost certainly unrelated, but in testing this PR out locally, I'm missing the site title column in my Sites list:

It's likely an env thing. I don't see how this CSS could affect that, but mentionining regardless.

Also separate, but these buttons still don't have focus styles:

I can confirm the focus styles are now visible and Calypso-generic in these two important places:

This one still has a custom one:

There's one small regression, it's unclear how this PR could've caused it, or if this is a trunk thing. But notice now that there's a white background behind the label here, even though the onboarding flow overall has a light gray background:

Can you tell what that is?

[adamwoodnz]

This one still has a custom one:

Yes, I considered including the search input, but decided to scope this PR to just the buttons, as we have this separate issue for standardizing button and input focus styles.

[adamwoodnz]

There's one small regression, it's unclear how this PR could've caused it, or if this is a trunk thing. But notice now that there's a white background behind the label here, even though the onboarding flow overall has a light gray background:

Can you tell what that is?

This one is interesting. I can't repro (can't see a white background) in dev, staging or the testing link, but looking at the shape in your screenshot it looks like it would be the .card.logged-out-form:

[adamwoodnz]

This one is interesting. I can't repro (can't see a white background) in dev, staging or the testing link, but looking at the shape in your screenshot it looks like it would be the .card.logged-out-form:

I have managed to reproduce this in a new branch, so I'll create a new issue and PR to fix it.