Comments (11)
@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.
from skin.
@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.
from skin.
@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!
from skin.
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)
from skin.
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.
from skin.
If we want to do this issue we need the following:
- We need to have better affordance. We can't rely on text being cut off
- Is there a scrollbar? Where does it show?
- 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)
from skin.
Discussed about this. Possibly will add a common scrolling component.
from skin.
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).
from skin.
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.
from skin.
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.
from skin.
@randybascue could we get another look at this? I know this is being asked by some teams
from skin.
Related Issues (20)
- docs: code highlight style doesn't display properly in dark mode
- signal: text overflow does not truncate with ellipsis HOT 2
- 240712 - Icon Updates
- <ebay-button>: Inconsistent style for secondary href button HOT 1
- docs(tokens): Show semantic tokens before primitive
- Button — Update CTA to support trailing icons HOT 1
- ebay-textbox: placeholder variant has issue with border radius HOT 1
- button: fake button disabled missing styles
- Token: foreground-attention have the wrong token
- textbox: Different size between large select and input text
- Button: busy state broken in examples
- Progress-Spinner: svg is wobbly (Safari/Firefox)
- toggle-button-group:layout is breaking with skin v18
- textbox: Width of the input not respecting the container size HOT 1
- Sheets / Dialogs — No top divider on footer element
- Docs Site: Build a new Skin docs site
- Tourtip: Improve contrast of tip container
- Update Buttons to Design Spec HOT 1
- menu: icon not showing up
- file-upload: new component
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from skin.