ItemGroup: Update button focus styles to be more consistent (#51576)

* Update item-group focus styles * Update test snapshot * Update changelog * Update changelog entry
WordPress · Jun 20, 2023 · c783dc8 · c783dc8
1 parent 115e7b1
commit c783dc8
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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;