Inset Blue Focus Ring on Vertical Tabs

WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.

https://wordpress.org/gutenberg/

Other

10.4k stars 4.16k forks source link

Inset Blue Focus Ring on Vertical Tabs #65863

Open jeryj opened 12 hours ago

jeryj commented 12 hours ago

Description

The vertical tabs have a regression in their focus styles where it is inset from the highlighted indicator.

Step-by-step reproduction instructions

Go to the Preferences Pane
Go to the tabs
Use the arrow keys to move between the tabs
Blue focus ring is inset from the gray indicator

Screenshots, screen recording, code snippet

Patterns Category Tabs Inserter pattern tab with inset focus ring

Preferences Tabs

Environment info

No response

Please confirm that you have searched existing issues in the repo.

[x] Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

[x] Yes

jeryj commented 12 hours ago

@ciampo @DaniGuardiola @t-hamano - Pinging because it looks like y'all have been working hard on the animation improvement from https://github.com/WordPress/gutenberg/pull/64926 :)

DaniGuardiola commented 11 hours ago

Those screenshots are from an older version of Tabs. If you try the latest trunk you'll see the changes that I think fit what you're after in this issue, let me know :)

DaniGuardiola commented 11 hours ago

Ah, wait, I think the PR that was supposed to take care of this failed to merge due to test errors. Let me take a look. In any case, the associated PR should be closed, though appreciate the effort!

jeryj commented 11 hours ago

I tested out https://github.com/WordPress/gutenberg/pull/65387 and it looks like it fixes this well. Thanks!