ebay-tabs: add scrollable container option

[randybascue]

Problem

Tabs can extend beyond their container. Users need to be able to scroll tabs to view those off screen.

Playbook →
Figma →

Example

[agliga]

@ianmcburnie I wanted to get your perspective on this first, if there are any issues from an accessibility perspective on this?
Especially with the navigation left/right on tabs.

[ianmcburnie]

@ianmcburnie I wanted to get your perspective on this first, if there are any issues from an accessibility perspective on this? Especially with the navigation left/right on tabs.

I think so long as .focus() is being set on every arrow key press (which it is, via makeup-roving-tabindex), then the horizontal scrollable region should automatically scroll into place. Worth testing to make sure!

[ianmcburnie]

What if the text of the tabs falls within the space of the viewport (i.e. the text isn't cut off like in the screen shot above)? In this case, there would be no visual affordance that the region is horizontally scrollable. Needs further discussion with design team.

Could an overflow menu button be an alternative to scrolling? (horizontal scrolling is not much fun)

[PrashantAshok]

Maybe "scroll shadow" can work (Along with some aria-labels)? I think except Safari other browsers are ok. All browsers work, would need to check older versions.

[agliga]

If we want to do this issue we need the following:

1. We need to have better affordance. We can't rely on text being cut off
2. Is there a scrollbar? Where does it show?
3. Discussion on A11Y: https://www.w3.org/WAI/WCAG21/Understanding/pointer-gestures.html
   • Potentially resolved automatically if we go with native HTML scrollbar (see 2)

[agliga]

Discussed about this. Possibly will add a common scrolling component.

[ArtBlue]

If we do use the scrolling solution, we absolutely must have a scroll shadow to provide affordance that there are additional items hidden from view. It's not a strong indicator, but it's something.

If we want to make the solution as robust as possible, we may also want to consider both 2-row tabs AND scrolling (w/scroll shadow).

[ArtBlue]

I did some digging after we briefly looked at it as a team. It would be preferable to allow for more text, so I explored what that would look like...

This is at 320px width.

The vertical tabs uses the same exact markup.

[ianmcburnie]

Ooo - I like the vertical tabs! I guess the main concern though is whether that's a comfortable enough line length for reading (in the content panel I mean). Maybe the tabs could go even narrower if not, but good to check with design.

[ArtBlue]

@ianmcburnie , yea, we can make the tabs even narrower. If the max-width of each tab on horizontal matches the max-width of the vertical tabs, it allows more flexibility since the longer length of one tab doesn't impact the others and you can have more tabs without impacting others.

[agliga]

@randybascue could we get another look at this? I know this is being asked by some teams