Tabs and ToggleGroupControl: round indicator size

[ciampo]

What?

Fixes #66347

This PR adds rounding to the Tabs and ToggleGroupControl's indicators

Why?

As demonstrated in #66347, the indicator can sometimes cause scrolling in its container (eg. tablist) in an unreliable way, caused by subpixel rendering.

How?

• added a roundRect option to the useAnimatedOffsetRect hook which applies Math.floor to the rect measurements;
• enabled the option in Tabs and ToggleGroupControl components

Testing Instructions

Follow instructions from #66347, make sure the issue can't be reproduced while applying changes from this PR.

Screenshots or screencast

Kapture.2024-10-24.at.17.15.21.mp4

[github-actions]

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: ciampo <mciampini@git.wordpress.org>
Co-authored-by: stokesman <presstoke@git.wordpress.org>
Co-authored-by: DaniGuardiola <daniguardiola@git.wordpress.org>

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

[stokesman]

I tested and this fixes the issue.

I was curious if this might be a candidate for 6.7 but I can’t reproduce the issue on 6.7 RC1. That’s a bit of a curiosity since at least some of the recent Tabs updates seem to have landed there. I mostly mention that as something that could be investigated to figure out precisely why the issue is in trunk and not there. The unrounded values seem to be present in 6.7 yet not producing this issue.

Anyway, this seems like a solid fix especially because all property values are floor’d.

[stokesman]

• added a roundRect option to the useAnimatedOffsetRect hook which applies Math.floor to the rect measurements;

It almost feels like it could be a string type so it could be specified to either "ceil"|"floor"|"round" but I'm sure it’s fine as is for now. It’s not easy to imagine those other options being too useful, just that the name roundRect is more generic than what’s implemented (flooring). I suppose if we’re sure flooring is always going to be the only worthwhile option we could consider naming it "roundDownRect" 😆 or something else.

[ciampo]

Thank you for the review!

This can't be reproduced in 6.7 because not all recent Tabs work was backported (see this convo) — so I'd say it's expected.

Re. the rounding options and variable name, you have a point — but I think that the current solution is good enough for the time being, and I don't anticipate a need for more nuance (if anything, we may want to remove the option and always floor the measurements)

[ciampo]

I realized I never added a link in my previous message — this is the conversation with a detailed list of what Tabs changes made it to the 6.7 release, and which ones didn't.