Update border and focus style of the Input selector in ColorPicker Component

[falgunihdesai]

Adds backdrop to the color value type input selector in the ColorPicker component. Previously, the backdrop for this component was hidden.

Fixes #50524

What?

Why?

How?

Testing Instructions

Run "npm storybook:dev" and select ColorPicker component. Focus the navigation tab on Color Value type dropdown selector

Testing Instructions for Keyboard

Open the Color Picker in Gutenberg editor and focus on the Color Value type dropdown selector using tab key

Screenshots or screencast

[github-actions]

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @falgunihdesai! In case you missed it, we'd love to have you join us in our Slack community, where we hold regularly weekly meetings open to anyone to coordinate with each other.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

[mcsf]

Hi, thanks for your patch!

I left a question about the choice of display: flex, but otherwise this looks good to me.

I've attached a screen recording clearly showing the focus on Hex select control.

gh-50703-testing.mov

[mcsf]

Was there a reason to prefer flex over block?

[falgunihdesai]

I used flex because other elements like Input box for color value and copy button both uses flex. Otherwise block was also working 😄. Was one of the two failed checks because of flex. Failure of Changelog diff check I understood. But the reason for another failed check is not clear to me.

[mcsf]

I didn't see it, but if you saw another failure it may have been a flaky end-to-end test. Everything looks good now, so I'll merge. :)

[mcsf]

I took the liberty of changing the display to block and added an entry to the corresponding change log. :)

[github-actions]

Congratulations on your first merged pull request, @falgunihdesai! We'd like to credit you for your contribution in the post announcing the next WordPress release, but we can't find a WordPress.org profile associated with your GitHub account. When you have a moment, visit the following URL and click "link your GitHub account" under "GitHub Username" to link your accounts:

https://profiles.wordpress.org/me/profile/edit/

And if you don't have a WordPress.org account, you can create one on this page:

https://login.wordpress.org/register

Kudos!

[mcsf]

Thanks for finding the issue and fixing it, @falgunihdesai !

[falgunihdesai]

Thank you for the help @mcsf .

[ciampo]

Just flagging that another PR (#50609) was also opened to fix this, in which we evaluated trade-offs between short-term fixes and design requirements

[mcsf]

Thanks for the heads-up, @ciampo! Feel free to override this in #50609, I trust everyone's judgement there.