ItemGroup: Update button focus styles to use :focus-visible (#51787)

* Use focus-visible rather than focus on ItemGroup buttons * Update snapshot * Update Changelog
WordPress · Jun 27, 2023 · b909d90 · b909d90
1 parent be4546d
commit b909d90
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 2 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -9,6 +9,7 @@
 -   `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)).
 -   `Button`: Introduce `size` prop with `default`, `compact`, and `small` variants ([#51842](https://github.com/WordPress/gutenberg/pull/51842)).
 -   `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)).
+-   `ItemGroup`: Update button focus state styles to target `:focus-visible` rather than `:focus`. ([#51787](https://github.com/WordPress/gutenberg/pull/51787)).
 
 ### Bug Fix
 

diff --git a/packages/components/src/item-group/styles.ts b/packages/components/src/item-group/styles.ts
@@ -24,7 +24,7 @@ export const unstyledButton = css`
 		color: ${ COLORS.ui.theme };
 	}
 
-	&:focus {
+	&:focus-visible {
 		box-shadow: 0 0 0 var( --wp-admin-border-width-focus )
 			var(
 				--wp-components-color-accent,

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
@@ -616,7 +616,7 @@ 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 {
+.emotion-13:focus-visible {
   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)) )