Tabs and TabPanel: Fix arrow key navigation in RTL

[ciampo]

What?

Part of #64963

Respect writing direction when using arrow keys to navigate the tabs in the Tabs and TabPanel components

Why?

We should respect the writing direction

How?

using the rtl utility to detect writing direction, and passing that information to the underlying ariakit store

Testing Instructions

• See default Storybook story for Tabs and TabPanel
• Toggle the examples to RTL mode in the toolbar.
• Test that arrow key navigation works as expected.

Screenshots or screencast

Before (trunk)	After (this PR)
Kapture.2024-10-17.at.12.37.45.mp4	Kapture.2024-10-17.at.12.38.28.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: tyxla <tyxla@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>

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

[tyxla]

Works well in my testing. Thanks 🚀

[t-hamano]

The strange thing is that the TabPanel component (not the Tabs component) originally worked fine with RTL languages, so removing this line doesn't seem to change the result 🤔

Do you know anything about this?

[github-actions]

Flaky tests detected in 7de9f4d.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/11383326372
📝 Reported issues:

• [Flaky Test] Entering zoomed out mode zooms the canvas #66051 in /test/e2e/specs/site-editor/zoom-out.spec.js
• [Flaky Test] Navigates the items list via UP/DOWN arrow keys #64334 in /test/e2e/specs/site-editor/dataviews-list-layout-keyboard.spec.js
• [Flaky Test] Should insert content using the global inserter #57525 in /test/e2e/specs/widgets/editing-widgets.spec.js

[ciampo]

The strange thing is that the TabPanel component (not the Tabs component) originally worked fine with RTL languages, so removing this line doesn't seem to change the result 🤔

Do you know anything about this?

Nope, no idea 🙈 But I wouldn't spend too much time on it, since the plan is to deprecate TabPanel in favour of Tabs as soon as it's stable