Dialog system

Victory+ · Kidoodle.TV · APMC, 2026

Three modal systems replaced by one accessible base component, themed for two brands.

Context

Two streaming brands share one Nuxt monorepo. Dialogs are everywhere: sign-in, passcodes, TV provider sign-in, promotions.

Problem

Three ways to open a modal had grown side by side, and earlier attempts to unify them had stalled. Focus handling and accessibility depended on which one a screen used.

Three modal systems replaced by one base dialog with shared accessibility behaviour and a theme per brand.

What I did

  1. Shipped the base dialog and its theming tokens first, with no consumers moved, so the foundation landed on its own.
  2. One component, two brands: themes come from design tokens, down to a per-brand title font.
  3. Migrated consumers brand by brand in small pull requests, leaving the riskiest flows (TV provider sign-in, account deletion, TV pairing) for last.
  4. Removed the legacy modal systems.

Outcome

  • One place for focus management, Escape handling and ARIA.
  • New dialogs inherit accessibility instead of re-implementing it.

Stack

Vue 3, Reka UI, Design tokens, TypeScript

Want to talk about work like this?

I’m happy to go deeper on any of it, including what I’d do differently.

Email me Résumé