Skip to content

Commit

Permalink
TabPanel: Make the the focus styles consistent with Tabs (#61317)
Browse files Browse the repository at this point in the history 
* fix: The focus styles for tabPanel.

* Docs: Update the changelog.

Co-authored-by: vipul0425 <vipulgupta003@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>
  • Loading branch information
@vipul0425 @mirka
3 people committed May 23, 2024
1 parent 5fbeee2 commit de9a53a
Show file tree
Hide file tree
Showing 2 changed files with 17 additions and 0 deletions.
1 change: 1 addition & 0 deletions packages/components/CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
16 changes: 16 additions & 0 deletions packages/components/src/tab-panel/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}

1 comment on commit de9a53a

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Flaky tests detected in de9a53a.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/9215164883
📝 Reported issues:

Please sign in to comment.