scrollable md-tabs: align active element to the middle

[CicciLeo]

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

[asyncLiz]

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]

I think it's definitely less accessible if a person clicks on a tab positioned on the left and it moves to the right

Sequenza.01_2.mp4

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

Sequenza.01_1.mp4

[CarlosEGuerraSilva]

I think it is an improvement to the user experience. Certainly the current behavior is somewhat inconsistent.

[asyncLiz]

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]

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.

screen-20240304-145309.2.mp4

Flutter also shares same behavior on web, can be viewed on this demo.

Maybe we should follow the same behavior?