[Tabs] wrong keyboard nav on RTL layouts

[felixmosh]

Bug report

Current Behavior

When the layout applies direction: rtl, tabs are rendered correctly (the first tab at the most right) but when navigating
https://user-images.githubusercontent.com/9304194/108892474-940b6700-7618-11eb-9e52-c7df4a12de76.mov

Expected behavior

When direction: rtl is applied, the arrows should switch in behaviour

Reproducible example

CodeSandbox Example

Suggested solution

direction is an inherited property, this means that your can test once computedStyles of the tabs root element, and switch if it is rtl

Additional context

reach/reach-ui#235

Your environment

Software	Name(s)	Version
Radix Package(s)	tabs	0.0.5
React	n/a
Browser
Assistive tech
Node	n/a
npm/yarn
Operating System

[benoitgrelard]

Hey @felixmosh, thanks for bringing this up.

We actually handle that internally but for some reason it seems we haven't exposed the capability on this particular component.

When we need to explicitly support this (like here for better keyboard handling) we generally just expose a dir prop to the top-level component.

That's what's missing here, I'll add that up soon. 👍

[benoitgrelard]

@felixmosh This is now done and should go out some time next week. I'll update the issue to let you know.

[benoitgrelard]

This was part of the last release. Enjoy!