search

mui / base-ui

Base UI is an open-source library of accessible, unstyled UI components for React.
https://mui.com/base-ui/
MIT License
240 stars 43 forks source link

[Tabs] Missing reference for RTL keyboard navigation direction #59

Open ojbaharav opened 9 months ago

ojbaharav commented 9 months ago

Search keywords

RTL keyboard navigation

Related page

https://mui.com/base-ui/react-tabs/

Kind of issue

Missing information

Issue description

I found that in the Tabs API props section, there is a 'direction' prop but it says that it affects "the direction of the text" which is true but incomplete, cause it also affects keyboard navigation direction.

Also, it would be helpful if the 'direction' prop were mentioned in the main page's Accessibility > keyboard navigation section as a relevant prop to the subject like is currently doing with the 'selectionFollowsFocus' prop.

Context 🔦

I was trying to figure out how to change the keyboard navigation direction on an RTL page so that I could use the right and left arrow keys according to the reading direction.

mj12albert commented 8 months ago

it would be helpful if the 'direction' prop were mentioned in the main page's Accessibility > keyboard navigation section

I agree it could be expanded in the docs more, but I don't think it's really an a11y topic, maybe Customization > RTL, what do you think? @samuelsycamore

I found that in the Tabs API props section, there is a 'direction' prop but it says that it affects "the direction of the text" which is true but incomplete

You are right, we should add that it also controls the navigation direction, would you be interested in creating a PR? @ojbaharav

samuelsycamore commented 8 months ago

@mj12albert agreed, it would be nice to have a section with a demo under Customization that shows how this prop works.

ojbaharav commented 8 months ago

it would be helpful if the 'direction' prop were mentioned in the main page's Accessibility > keyboard navigation section

I agree it could be expanded in the docs more, but I don't think it's really an a11y topic, maybe Customization > RTL, what do you think? @samuelsycamore

It would concern only people who want to make it accessible for keyboard use, not any RTL customization in general. In order to make this component display as RTL, I only need to set the direction of the page or the Tabs container with CSS or dir=rtl. For pointer (mouse) users, you don't really need the 'direction' prop in RTL websites.

I found that in the Tabs API props section, there is a 'direction' prop but it says that it affects "the direction of the text" which is true but incomplete

You are right, we should add that it also controls the navigation direction, would you be interested in creating a PR? @ojbaharav

Never done that before, but I'll try :)

ojbaharav commented 5 months ago

Well, it took me some time to get to it and now I want to modify the direction's description. Does the direction have any impact on the text or is it only useful for keyboard navigation purposes?

I made some tests on stackblitz with the Tabs component and reviewed the source code and found it's only used in the useTabsList.ts file to set 'listOrientation' horizontal direction, which is used later in listReducer.ts for the arrows keys logic. As far as I can tell this has nothing to do with text direction, hasn't it?