Tabs: Fix indicator misalignment when the browser width changes in RTL languages

[t-hamano]

Part of #64963

What?

This PR fixes the tab indicator misalignment when the browser width changes in RTL languages.

Why?

The horizontal position of the indicator is determined by the CSS left. However, in RTL languages, the tab buttons are located on the right side.

When we change the browser width, the left offset position of the button relative to the parent element will change, but the indicator position is fixed by the CSS left, so there is a misalignment between the button and the indicator.

How?

I think in RTL languages ​​we should determine the offset position via right instead of left.

First, to calculate the right offset position, I used the following logic:

• Get the parent element's width, including decimal points.
• Subtract the button element's width from its parent element. Round this value and convert it to an integer pixel value.
• Subtract the element's offsetLeft from this value. This is the basic right value for the indicator.
• Similar to the approach taken in #61979, subtract 1 to prevent unintended overflow. If the right value is negative, convert it to 0.

Next, apply the calculated value as CSS.

We can also use the CSS right instead of left in RTL languages. However, in this PR, I replaced the CSS left with inset-inline-start. Unlike the CSS left, this CSS applies a physical offset according to the document direction. This CSS is also supported by all browsers.

Testing Instructions

Storybook

• Start the storybook
• Access http://localhost:50240/?path=/story/components-experimental-tabs--default
• Change to an RTL language
• Make sure the indicator stays aligned with the tab buttons when the browser is resized

Before

storybook-before.mp4

After

storybook-after.mp4

Site Editor

The easiest way to confirm is to look at the Font Library modal.

• Access the Site Editor > Global Styles > Typography > Manage Fonts button
• Make sure the indicator stays aligned with the tab buttons when the browser is resized

Before

font-library-modal-before.mp4

After

font-library-modal-after.mp4

[t-hamano]

This change is necessary so that the indicator animations continue to work as before.

[t-hamano]

In this PR, the right value is calculated in the getElementOffsetRect() function, but if the right value is inappropriate for the getElementOffsetRect() function itself, we can also calculate the right value directly in the Tabs component.

[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: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>

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

[ciampo]

Thank you, @t-hamano !

@DaniGuardiola is already working on an iteration for this animation in #64926, so I'm not sure if it makes sense to keep this PR open.

At the same time, some of the fixes that you're proposing may be useful for Dani, since his new implementation still doesn't support RTL writing direction.

[DaniGuardiola]

Thank you @t-hamano! Closing as per #64926 (comment), but bookmarking as the work will be helpful to me in the near future :)