From de9a53a44464cb0fa8f9e8a0c8c0e76b0991142c Mon Sep 17 00:00:00 2001 From: Vipul Gupta <55375170+vipul0425@users.noreply.github.com> Date: Fri, 24 May 2024 03:04:09 +0530 Subject: [PATCH] `TabPanel`: Make the the focus styles consistent with `Tabs` (#61317) * fix: The focus styles for tabPanel. * Docs: Update the changelog. Co-authored-by: vipul0425 Co-authored-by: mirka <0mirka00@git.wordpress.org> --- packages/components/CHANGELOG.md | 1 + packages/components/src/tab-panel/style.scss | 16 ++++++++++++++++ 2 files changed, 17 insertions(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index d957e31ed5fefe..836732d8e1f061 100644 --- 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 index a6b6189e6c204b..2855f8c2b06a01 100644 --- 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; + } +}