search

mlaursen / react-md

React material design - An accessible React component library built from the Material Design guidelines in Sass
https://react-md.dev
MIT License
2.33k stars 300 forks source link

Support automatic activation of tabs #1411

Open dgreene1 opened 2 years ago

dgreene1 commented 2 years ago

Is your feature request related to a problem? Please describe.

When using a keyboard to navigate tabs, the new tab does not become active until you press enter or space.

W3 says:

It is recommended that tabs activate automatically when they receive focus as long as their associated tab panels are displayed without noticeable latency. This typically requires tab panel content to be preloaded. Otherwise, automatic activation slows focus movement, which significantly hampers users' ability to navigate efficiently across the tab list. For additional guidance, see § 6.4 Deciding When to Make Selection Automatically Follow Focus.

(link)

Describe the solution you'd like A clear and concise description of what you want to happen.

A new property would be added to TabProps called activationMode that would be of type "automatic" | "manual". This property would be optional and would default to "manual" since that is the current behavior.

When activationMode: "automatic", if you pressed the right arrow key on the keyboard to cycle through the tabs, the tab panel that is associated with that tab would be shown.

We can consider linking this feature to the persistent flag since the W3 quote above shows that you shouldn't use automatic activation unless the component has been pre-rendered.

Describe alternatives you've considered

I haven't considered any other options.

Additional context none

mlaursen commented 2 years ago

I believe this feature has been implemented but on the Tabs component instead of the Tab itself by enabling the automatic prop. The Configurable Tabs Demo can be used to preview that functionality and with the persistent flag as well. Maybe it would be better for me to simplify the example and showcase the selection mode as a separate demo.

That being said, I like the activationMode: "manual" | "automatic" naming more than automatic: boolean, so I'll probably rename that prop in the future.