Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix: The focus styles for tabPanel. #61317

Merged
merged 3 commits into from
May 23, 2024
Merged

Conversation

vipul0425
Copy link
Contributor

What?

Fixes #60663
When a tab panel is focused, the focus ring styles differ from those of the Tabs component. The main distinctions lie in the color and outline width, as no styles are added for the tab items, and user agent styles are applicable to them.

Why?

This PR resolves the inconsistency between the focus styles for TabPanel and Tabs component.

How?

This PR adds the box-shadow and outline styles for the class .components-tab-panel__tab-content

Testing Instructions

  1. Open the Storybook and navigate to the TabPanel component.
  2. Either use the "Tab" key to navigate to the tabs or inspect the div below the Tabs labeled "Selected tab: Tab 1" and apply the focus:visible state to it.
  3. You can observe the styles there and compare them with the Tabs components under experimental components as well.

Testing Instructions for Keyboard

Nil

Screenshots or screencast

Before

image

After

image

@vipul0425 vipul0425 requested a review from ajitbohra as a code owner May 2, 2024 10:10
Copy link

github-actions bot commented May 2, 2024

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: vipul0425 <[email protected]>
Co-authored-by: mirka <[email protected]>
Co-authored-by: alpha951 <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@github-actions github-actions bot added the First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository label May 2, 2024
Copy link

github-actions bot commented May 2, 2024

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @vipul0425! In case you missed it, we'd love to have you join us in our Slack community.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

@vipul0425
Copy link
Contributor Author

@WordPress/gutenberg-components Can you please review it.

@mirka mirka requested a review from a team May 14, 2024 20:18
@mirka mirka added [Type] Bug An existing feature does not function as intended [Package] Components /packages/components CSS Styling Related to editor and front end styles, CSS-specific issues. labels May 14, 2024
Copy link
Member

@mirka mirka left a comment

Choose a reason for hiding this comment

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

Perfect, thank you!

Could you merge or rebase this PR onto current trunk and add a changelog for this as a bug fix please? Then we can merge 🚀

@vipul0425
Copy link
Contributor Author

Hi, @mirka Updated the changelog and merged trunk into this.
Thanks 🙇

@mirka mirka enabled auto-merge (squash) May 23, 2024 21:18
@mirka mirka merged commit de9a53a into WordPress:trunk May 23, 2024
62 checks passed
@github-actions github-actions bot added this to the Gutenberg 18.5 milestone May 23, 2024
carstingaxion pushed a commit to carstingaxion/gutenberg that referenced this pull request Jun 4, 2024
…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 pushed a commit to patil-vipul/gutenberg that referenced this pull request Jun 17, 2024
…ss#61317)

* fix: The focus styles for tabPanel.

* Docs: Update the changelog.

Co-authored-by: vipul0425 <[email protected]>
Co-authored-by: mirka <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CSS Styling Related to editor and front end styles, CSS-specific issues. First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository [Package] Components /packages/components [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging this pull request may close these issues.

TabPanel: Focus styles on tabpanel are wrong
2 participants