Vertical Tab Focus Auto-select Movement is disorienting

[jeryj]

Description

The animated background is neat when used with an Enter Keypress or a click, but when selection happens on arrow keypress, it is visually disorienting. It feels laggy and busy.

If the tabs auto-select the category and arrow keys are used, I think we should disable the animation.

Step-by-step reproduction instructions

• Go to the Preferences Pane
• Go to the tabs
• Use the arrow keys to move between the tabs
• Animated gray background moves along with each arrow key, making it look delayed and overly busy.

Screenshots, screen recording, code snippet

Video of #65864 using fixed focus ring:

Screen.Recording.2024-10-03.at.3.35.35.PM.mov

Environment info

No response

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

• Yes

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

• Yes

[jeryj]

@DaniGuardiola @ciampo - What do you think?

[DaniGuardiola]

The animation already respects the "reduced motion" setting, I wonder if that'd be enough. I do agree with selectOnMove it could potentially be a bit too much even for those that do not normally want to reduce motion, though I think it'd be a bit tricky to implement.

@WordPress/gutenberg-design thoughts?

[jasmussen]

If we can't/won't animate the focus-ring, would it be an option to use focus-visible to omit the animation if you're keyboarding? A bit of the inverse, but it's a first question to ponder.

[DaniGuardiola]

Here's what I did: #65387 (comment)

Let me know what you think.

[ciampo]

I like it, and I think it aligns with @jasmussen 's preferred option.

@jeryj , what do you think?

[jeryj]

That's much better! I hadn't considered that option. I tested it with keyboard in the preferences pane and it feels really smooth now. Thank you for addressing it! I would consider this fixed when #65387 lands.