Skip to content

Tabs: Reset focus styles to avoid visual glitch #74225

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.

Sign up for GitHub

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

Jump to bottom
Merged
mikachan merged 1 commit into from
Dec 29, 2025
Merged

Tabs: Reset focus styles to avoid visual glitch #74225

mikachan merged 1 commit into from
Dec 29, 2025

Conversation

@SirLouen
Copy link
Member

@SirLouen SirLouen commented Dec 25, 2025 •
edited
Loading

What?

Closes #73935

Why?

There is a visual glitch when clicking the tabs caused by the global WordPress :focus style that is applying the outline on click.

How?

Since the tabs already have a :focus-visible style for keyboard accessibility, we need to reset the :focus outline to prevent this.

Testing Instructions

  1. Enable Tabs in the Gutenberg > Experiments > Blocks: add experimental blocks
  2. Create a new post
  3. Add the tabs block and add a couple tabs
  4. Use a block theme like TT5
  5. Go to the front end and click on the Tabs (click and hold)
  6. 🐞 You will see that visual glitch

Screencast

Before

74225v1.mp4

After

74225v2.mp4

@github-actions
Copy link

github-actions bot commented Dec 25, 2025

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: SirLouen <[email protected]>
Co-authored-by: dhanson-wp <[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 [Package] Block library /packages/block-library label Dec 25, 2025
@SirLouen SirLouen requested review from mikachan and removed request for ajitbohra and fabiankaegy December 25, 2025 20:40
@SirLouen SirLouen self-assigned this Dec 25, 2025
@SirLouen SirLouen added [Block] Tabs Affects the Tabs Block [Type] Bug An existing feature does not function as intended labels Dec 25, 2025
mikachan
mikachan approved these changes Dec 29, 2025
View reviewed changes
Copy link
Member

@mikachan mikachan left a comment

Choose a reason for hiding this comment

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

This fixes the issue for me, and the change is nice and simple. I think this can come in. Thanks @SirLouen!

@mikachan mikachan merged commit e90c88f into WordPress:trunk Dec 29, 2025
48 of 51 checks passed
@github-actions github-actions bot added this to the Gutenberg 22.4 milestone Dec 29, 2025
@dhanson-wp dhanson-wp mentioned this pull request Dec 29, 2025
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@mikachan mikachan mikachan approved these changes

Assignees

@SirLouen SirLouen

Labels

[Block] Tabs Affects the Tabs Block [Package] Block library /packages/block-library [Type] Bug An existing feature does not function as intended

Projects

None yet

Milestone

Gutenberg 22.4

Development

Successfully merging this pull request may close these issues.

[Tabs block] Needs Consistent Vertical Tabs Behavior

2 participants

@SirLouen @mikachan