Tabs component scroll button on mobile scrolling very little

[gptt916]

What package(s) are you using?

• [ ] carbon-components
• [x] carbon-components-react

Detailed description

Describe in detail the issue you're having.

When on mobile, the scroll buttons only scroll by about 15 pixels when clicked on. Holding does not work on mobile as it brings up the item menu.

Is this issue related to a specific component?

Yes, Tabs

What did you expect to happen? What happened instead? What would you like to see changed?

Matching scroll distance/behaviour on mobile/desktop.

What browser are you working in?

any mobile, or alternatively, chrome responsive mode

What version of the Carbon Design System are you using?

Latest

What offering/product do you work on? Any pressing ship or release dates we should be aware of?

IBM Cloud docs

Steps to reproduce the issue

1. Go to https://react.carbondesignsystem.com/?path=/story/components-tabs--default
2. In desktop chrome, toggle on device toolbar
3. From the drop down, select Iphone X
4. click on the scroll buttons

• Screenshots or code

[emyarod]

cc @aagonzales we increased the scroll speed in https://github.com/carbon-design-system/carbon/pull/7148 but should it be modified again?

[joshblack]

bump @aagonzales when you get a sec!

[aagonzales]

It does seem pretty slow. The click and hold option doesn't seem to be making it move at all, didn't we used to have the function @emyarod

[aagonzales]

Looks like now when you click and hold it prompts a menu to appear instead of continuing to scroll at a faster speed

[emyarod]

mobile users should be able to swipe across the tabs to scroll. clicking and holding won't work on mobile because of the "long press" action, and I'm not sure if we should override that behavior

[aagonzales]

Oh interesting, yeah if I just use a smaller browser width vs the mobile view the speed seems to be correct. So I guess yes we should increase the speed on the mobile setting to match the speed of a click for the desktop version.

[emyarod]

the speed on mobile is currently the same as desktop, but desktop scrolls faster because a mouse click/trackpad press normally registers as several click events, but a tap on mobile only registers as a single click. to separate the behavior on mobile and nonmobile devices would be a bit tricky as well. I think this requires more investigation but for the time being at least mobile users will be able to swipe to scroll

[mekaufman]

We're using version 10 and experiencing this issue of very little scrolling left to right on desktop. Is this something addressed with version 11 or can this be applied to version 10 as well without breaking anything?

[tay1orjones]

@mekaufman The scrolling behavior for tabs was improved with v11 - the change is unfortunately not backwards compatible with v10. The recommendation from here would be to use v11 as it's fixed there.

https://user-images.githubusercontent.com/3360588/199058964-cf8477c3-47e0-470c-9eea-abd1ea7fc278.mov