Tabs: Keyboard navigation and indicator issues in RTL languages

[t-hamano]

Description

I think there are two problems with the Tabs component in RTL languages.

⚒️ Keyboard Navigation

• Tabs and TabPanel: Fix arrow key navigation in RTL #66201

Note: This problem occurs not only in the Tab component, but also in the following two components:

• ToggleGroupControl: ToggleGroupControl: Fix arrow key navigation in RTL #65735
• RadioGroup (deprecated): RadioGroup: Fix arrow key navigation in RTL #66202

When I press the left or right key, I expect the focus to move to the tab in that direction. However, in RTL languages, the direction of the key and the direction in which the focus actually moves are opposite:

22a2f1bd4be87fd6cdd8189c7723e39a.mp4

From what I understand, this component is based on @ariakit/react.

Therefore, when I tested the ariakit Tab component itself, the problem seemed to be reproduced in the same way. I tested it by adding direction:rtl to the html element on the component preview page:

d51cbeee08a2bed5e81e548291e62fc0.mp4

✅ Indigator position

(Fixed in #64926)

When the browser width changes, the indicator position is misaligned:

8e9e44481a7565e73ff6b7da9243761f.mp4

Probably in RTL languages, ​​we need to calculate the right position instead of the left position:

gutenberg/packages/components/src/tabs/tablist.tsx

Line 81 in 2157b85

'--indicator-left': `${ indicatorPosition.left }px`,

Step-by-step reproduction instructions

• Access https://wordpress.github.io/gutenberg/?path=/story/components-experimental-tabs--default&globals=direction:rtl.
• Keyboard navigation issue: Focus on one of the tabs and press the left or right key.
• Indicator position issue: Resize your browser width and check the position of the indicator.

Screenshots, screen recording, code snippet

No response

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

[DaniGuardiola]

I think we should file the keyboard issue in the Ariakit repo, cc @diegohaz for visibility too.

[DaniGuardiola]

All indicator issues are fixed in #64926.

[diegohaz]

The rtl prop must be explicitly set. Related: ariakit/ariakit#2930 (comment)

[t-hamano]

I found that this problem occurs not only in the Tabs component but also in other components. As far as I could tell, it occurs in the following two components:

• ToggleGroupControl: https://wordpress.github.io/gutenberg/?path=/story/components-experimental-togglegroupcontrol--default&globals=direction:rtl
• RadioGroup (deprecated): https://wordpress.github.io/gutenberg/?path=/story/components-radiogroup--default&globals=direction:rtl

[mirka]

• ToggleGroupControl: https://wordpress.github.io/gutenberg/?path=/story/components-experimental-togglegroupcontrol--default&globals=direction:rtl

ToggleGroupControl bug fix in #65735

[ciampo]

• Tabs and TabPanel fix in Tabs and TabPanel: Fix arrow key navigation in RTL #66201
• RadioGroup fix in RadioGroup: Fix arrow key navigation in RTL #66202

[ciampo]

Closing this issue as all flagged components have been improved