ItemGroup: Update button focus styles to use :focus-visible (WordPr…

…ess#51787) * Use focus-visible rather than focus on ItemGroup buttons * Update snapshot * Update Changelog
pewresearch · Jul 13, 2023 · 585bfbd · 585bfbd
1 parent 3f43588
commit 585bfbd
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
@@ -7,6 +7,7 @@
 -   `UnitControl`: Revamp support for changing unit by typing ([#39303](https://github.com/WordPress/gutenberg/pull/39303)).
 -   `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)).
+-   `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)) )