search

eBay / skin

Pure CSS framework designed & developed by eBay for a branded, e-commerce marketplace.
https://ebay.github.io/skin/
MIT License
176 stars 66 forks source link

ebay-tabs: add scrollable container option #2062

Open randybascue opened 1 year ago

randybascue commented 1 year ago

Problem

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

Playbook → Figma →

Example

image

agliga commented 1 year ago

@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 commented 1 year ago

@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 commented 1 year ago

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 commented 1 year ago

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 commented 10 months ago

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 commented 8 months ago

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

ArtBlue commented 3 months ago

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 commented 3 months ago

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...

image

This is at 320px width.

The vertical tabs uses the same exact markup.

ianmcburnie commented 3 months ago

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 commented 3 months ago

@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 commented 2 months ago

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