search

learningequality / kolibri-design-system

Kolibri Design System
https://design-system.learningequality.org
28 stars 66 forks source link

KTabsList: Improve overflow handling #656

Open AlexVelezLl opened 3 months ago

AlexVelezLl commented 3 months ago

Product

Kolibri.

Desired behavior

KTabsList, and therefore also KTabs (which is built on top of it) should always take up one row. If the tab list items can't fit into one row, we should show left and/or right arrows to slide through the tab list items:

image

image

You can see the full specs here.

Current behavior

With the current implementation, if tabs are overflowed, they are split and presented on multiple lines.

The Value Add

With this, KTabsList will dynamically adjust to accommodate additional tabs, providing smooth navigation and ensuring all tabs are accessible to mouse, keyboard and screenreader users, without cluttering or upsetting the interface.

nucleogenesis commented 3 months ago

@marcellamaki noted in a meeting that we did move away from the side-scrolling tabs pattern in part due to critical feedback - particularly on touchscreen devices. Additional feedback on the existing pattern may be useful in further discussions.