[Tracking]: UX Papercuts

[ghengeveld]

Problem statement

Storybook is the tool developers use to prevent UI regressions. But ironically, its own UI includes small regressions, paper cuts, and unfinished flows. Over the years of rapid feature expansion (good!), we often deprioritized follow-through on UX.

That leaves us with:

• Incomplete internal Storybook (“Storybook’s Storybook”)
• UI components without stories, making them untestable and unreviewable in isolation. Bogs down all UX work.
• Inconsistent keyboard ergonomics and accessibility for users
• Toolbar items that we know could work better
• Technical debt like JS-based theme variables blocking user theming

Individually, these issues are quite small. Collectively, they create daily friction for our users.

Milestones

Build Storybook UI in Storybook

Timebox: 3 days

• Migrate critical manager UI components into Storybook for isolated dev and visual testing.
• Fix atomic components as needed.
• Replace JS color vars with CSS vars (primitives → semantics → component tokens). This also paves the way for future theming improvements.

Preview iframe UX

• Update Viewports UX
• Improved Zoom UX
• Merge Measure / Grid / Outline into a single compact dropdown
• Hotkey for "open in isolation"
• Panel bar causing viewport scroll (hiding toolbar)

Settings menu

• Allow switching Storybook’s light and dark themes in the settings menu
• Clean up settings menu
• Sidebar toggle for pages

P0 Accessibility improvements

See: Project board

• [Bug]: Sidebar item hover background colour makes text unreadable #30284
• [A11y]: Audit testing module ARIA markup #32252
• [A11y]: Sidebar is not accessible #31267
• [A11y]: Create aria live region component #32251

Demo fixes

• [Bug]: Storybook goes into white screen if code fails in the Manager UI #32968
• UI: Add global error boundary for Storybook UI #33211