Open CicciLeo opened 4 months ago
asyncLiz
commented
4 months ago This doesn't seem accessible, since the active tab element can be moved much further away from the pointer that clicked on it. What's your motivation for moving it to the center?
CicciLeo
commented
4 months ago I think it's definitely less accessible if a person clicks on a tab positioned on the left and it moves to the right
furthermore, in android it seems to be the default behavior to center the active tab in the google play store, if you click on a tab, it is automatically centered
CarlosEGuerraSilva
commented
4 months ago I think it is an improvement to the user experience. Certainly the current behavior is somewhat inconsistent.
asyncLiz
commented
4 months ago Ah I see, it's much more noticeable when scrolling from a tab off screen.
The use case I'm thinking of and handling would be something like this, clicking on "Drums" which is just off-screen.
And scrolling it just into view instead of pulling it all the way to the middle.
I agree that the UX is inconsistent, and we probably need some guidance from design here. Scrolling tabs on mobile may also need a different UX than scrolling tabs on large screens.
CarlosEGuerraSilva
commented
4 months ago The app "Compose Material Catalog" by Google has a demo for scrolling tabs, and it seems the default behavior is center the active tab, this behavior doesn't change on landscape mode, but I understand that is not the same as large screens.
Flutter also shares same behavior on web, can be viewed on this demo.
Maybe we should follow the same behavior?
What is affected?
Component
Description
with scrollable md-tabs, when I click on a tab it is automatically placed at the end of the container. I think the best way is to place it in the middle of the container
Reproduction
https://material-web.dev/components/tabs/stories/
Workaround
I tried to edit scrollToTab function by inserting this
tabToScrollTo.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
and it works pretty well
Is this a regression?
No or unsure. This never worked, or I haven't tried before.
Affected versions
1.2.0
Browser/OS/Node environment
Chrome on Windows, Chrome on Android