TabPanel: Make the the focus styles consistent with Tabs (WordPre…

…ss#61317) * fix: The focus styles for tabPanel. * Docs: Update the changelog. Co-authored-by: vipul0425 <[email protected]> Co-authored-by: mirka <[email protected]>
patil-vipul · Jun 17, 2024 · 1acb487 · 1acb487
1 parent d3f29bd
commit 1acb487
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 0 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -14,6 +14,7 @@
 ### Bug Fixes
 
 -   `Autocomplete`: Stabilize rendering of autocomplete items ([#61877](https://github.com/WordPress/gutenberg/pull/61877)).
+-   `TabPanel`: Make the the focus styles consistent with `Tabs`. ([#61317](https://github.com/WordPress/gutenberg/pull/61317)).
 
 ### Internal
 

diff --git a/packages/components/src/tab-panel/style.scss b/packages/components/src/tab-panel/style.scss
@@ -81,3 +81,19 @@
 		outline: 2px solid transparent;
 	}
 }
+
+.components-tab-panel__tab-content {
+	&:focus {
+		box-shadow: none;
+		outline: none;
+	}
+
+	&:focus-visible {
+		border-radius: 2px;
+		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
+
+		// Windows high contrast mode.
+		outline: 2px solid transparent;
+		outline-offset: 0;
+	}
+}