From 34f1bc3acf415f1d6295075f165a6a12dc53b81d Mon Sep 17 00:00:00 2001 From: Falguni Desai Date: Wed, 17 May 2023 18:12:08 +0400 Subject: [PATCH 1/4] Add border and focus style to the Input selector in ColorPicker Adds backdrop to the color value type input selector in the ColorPicker component. Previously, the backdrop for this component was hidden. Fixes #50524 --- packages/components/src/color-picker/styles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/color-picker/styles.ts b/packages/components/src/color-picker/styles.ts index bf25707ba9c936..33e8f521e71507 100644 --- a/packages/components/src/color-picker/styles.ts +++ b/packages/components/src/color-picker/styles.ts @@ -30,7 +30,7 @@ export const SelectControl = styled( InnerSelectControl )` margin-left: ${ space( -2 ) }; width: 5em; ${ BackdropUI } { - display: none; + display: flex; } `; From 75897535406b9a632cd37c9b5b3e364cdd682270 Mon Sep 17 00:00:00 2001 From: Miguel Fonseca Date: Fri, 19 May 2023 15:35:30 +0100 Subject: [PATCH 2/4] Use display: block instead of flex --- packages/components/src/color-picker/styles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/color-picker/styles.ts b/packages/components/src/color-picker/styles.ts index 33e8f521e71507..1592f6a201656a 100644 --- a/packages/components/src/color-picker/styles.ts +++ b/packages/components/src/color-picker/styles.ts @@ -30,7 +30,7 @@ export const SelectControl = styled( InnerSelectControl )` margin-left: ${ space( -2 ) }; width: 5em; ${ BackdropUI } { - display: flex; + display: block; } `; From 3cc146935c109b2a479822e52d6ce715e7c70eb0 Mon Sep 17 00:00:00 2001 From: Miguel Fonseca Date: Fri, 19 May 2023 16:23:03 +0100 Subject: [PATCH 3/4] Update CHANGELOG.md --- packages/components/CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index d49f137f467c84..a415c20b702e6c 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Enhancements + +- `ColorPicker`: its private `SelectControl` component no longer hides BackdropUI, thus making its focus state visible for keyboard users ([50703](https://github.com/WordPress/gutenberg/pull/50703)). + ## 24.0.0 (2023-05-10) ### Breaking Changes From aa8b11b5bde7455c21625dbcae0ce875b8d4cc81 Mon Sep 17 00:00:00 2001 From: Miguel Fonseca Date: Fri, 19 May 2023 18:08:02 +0100 Subject: [PATCH 4/4] Fix formatting in CHANGELOG.md --- packages/components/CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 74eb4d32e7201e..83d74153ccb1cc 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -11,7 +11,7 @@ - `Modal`: Remove children container's unused class name ([#50655](https://github.com/WordPress/gutenberg/pull/50655)). - `DropdownMenu`: Convert to TypeScript ([#50187](https://github.com/WordPress/gutenberg/pull/50187)). - Added experimental v2 of `DropdownMenu` ([#49473](https://github.com/WordPress/gutenberg/pull/49473)). -- `ColorPicker`: its private `SelectControl` component no longer hides BackdropUI, thus making its focus state visible for keyboard users ([50703](https://github.com/WordPress/gutenberg/pull/50703)). +- `ColorPicker`: its private `SelectControl` component no longer hides BackdropUI, thus making its focus state visible for keyboard users ([#50703](https://github.com/WordPress/gutenberg/pull/50703)). ### Bug Fix