diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 33f0719b3297e..f665f02b988d6 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -5,6 +5,7 @@ ### Enhancements - `Modal`: Update corner radius to be between buttons and the site view frame, in a 2-4-8 system. ([#51254](https://github.com/WordPress/gutenberg/pull/51254)). +- `ItemGroup`: Update button focus state styles to be inline with other button focus states in the editor. ([#51576](https://github.com/WordPress/gutenberg/pull/51576)). ### Bug Fix diff --git a/packages/components/src/item-group/styles.ts b/packages/components/src/item-group/styles.ts index e90eac51c5244..07ef6ba28db6e 100644 --- a/packages/components/src/item-group/styles.ts +++ b/packages/components/src/item-group/styles.ts @@ -23,6 +23,16 @@ export const unstyledButton = css` &:hover { color: ${ COLORS.ui.theme }; } + + &:focus { + box-shadow: 0 0 0 var( --wp-admin-border-width-focus ) + var( + --wp-components-color-accent, + var( --wp-admin-theme-color, ${ COLORS.ui.theme } ) + ); + // Windows high contrast mode. + outline: 2px solid transparent; + } `; export const itemWrapper = css` diff --git a/packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap b/packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap index a6fbe704c6d5b..a962cfbe81919 100644 --- a/packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap +++ b/packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap @@ -616,6 +616,14 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)); } +.emotion-13:focus { + box-shadow: 0 0 0 var( --wp-admin-border-width-focus ) var( + --wp-components-color-accent, + var( --wp-admin-theme-color, var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)) ) + ); + outline: 2px solid transparent; +} + .emotion-15 { display: -webkit-box; display: -webkit-flex;