refactor(core): replace menu-viewport-transition with menu-viewport by sampotts · Pull Request #1579 · videojs/v10

sampotts · 2026-05-21T00:59:00Z

Summary

Replace menu-viewport-transition with createMenuViewport for nested menu panel sizing and root/submenu view transitions.

Changes

Introduce menu-viewport.ts and DOM measure helpers
Wire transitioning state through core menu, popover, and dismiss-layer bindings
Add submenu trigger controller foundation for nested menu navigation

Pointer activation

Menu items and submenu triggers are div role="menuitem" surfaces with custom click handlers, not native buttons. Handlers guard with if (event.button !== 0) return before selecting or pushing a submenu.

A mouse click is usually primary-button only, but the check is deliberate: it limits activation to primary pointer input (ARIA menu model), prevents preventDefault() on submenu clicks from suppressing non-primary browser defaults if a stray click ever fires, and mirrors the same primary-button filter used on pointer events elsewhere. Keyboard activation (Enter, Space, ArrowRight) uses separate key handlers.

See internal/design/ui/menus.md → Accessibility → Pointer activation.

Testing

pnpm -F @videojs/core test src/dom/ui/menu/tests/menu-viewport.test.ts src/dom/ui/menu/tests/create-menu.test.ts
pnpm -F @videojs/html test src/ui/menu/tests/menu-element.test.ts
pnpm -F @videojs/react test src/ui/menu/tests/menu.test.tsx

Note

Medium Risk
Refactors core menu navigation/transition coordination (viewport sizing, focus restoration, popup grouping) across DOM/React/HTML implementations; regressions could affect menu open/close behavior and nested submenu animations.

Overview
Replaces menu-viewport-transition with a new createMenuViewport() implementation that measures stacked menu panels, drives --media-menu-width/height, and coordinates a persistent root panel transition while submenus enter/exit.

Updates menu transition and lifecycle handling: createMenuViewTransition now tracks transitioning, supports persistent panels, exposes reset(), and uses scheduleTransitionSettle() (added to dom/ui/transition) to clear transition attrs once animations/visual completion settle.

Refines menu behavior for nested menus and interactions: root vs submenu popup-group coordination is formalized (shared group by default, isolated groups for nested menus without an explicit group), navigation stack reset is deferred until close completes, trigger focus restoration is guarded to avoid stealing focus during deferred reopen/peer menu interactions, and highlight/navigation now syncs to the keyboard event target when hover highlight differs.

Aligns React/HTML menu parts with the new model: root views use data-menu-view-id="root" and persistent attrs, submenus register with the parent viewport via registerSubmenuView, menu items/back buttons/submenu triggers gate activation to primary pointer (event.button === 0) and add pointer-enter highlight behavior; introduces dom/utils/measure and a SubmenuTriggerController for consistent submenu trigger wiring.

^{Reviewed by Cursor Bugbot for commit 7ab5440. Bugbot is set up for automated code reviews on this repo. Configure here.}

vercel · 2026-05-21T00:59:05Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
v10-sandbox	Ready	Preview, Comment	May 21, 2026 10:28am

Introduce createMenuViewport for nested menu panel sizing and view transitions, add DOM measure helpers, and wire transitioning state through core menu and popover bindings. Co-authored-by: Cursor <cursoragent@cursor.com>

Co-authored-by: Cursor <cursoragent@cursor.com>

Explain why menuitem click handlers check event.button before activation. Co-authored-by: Cursor <cursoragent@cursor.com>

Register submenu views once instead of every update cycle, and invalidate viewport transition settle callbacks on destroy. Co-authored-by: Cursor <cursoragent@cursor.com>

HTML menus register the viewport host before child views connect, so the initial syncRoot pass can miss the root panel and leave sizing CSS vars unset. Re-measure on open after child custom elements mount. Co-authored-by: Cursor <cursoragent@cursor.com>

Settings menus register two submenu panels; bindChild previously replaced the active subscription so viewport transitions never ran for the first panel. Track bindings per view, restore the root panel when returning from a submenu, and animate initial open height via syncRoot. Co-authored-by: Cursor <cursoragent@cursor.com>

Introduce the helper alongside menu viewport sizing so the transition lifecycle PR stays focused on createTransition while viewport code can wait for layout and animation settle. Co-authored-by: Cursor <cursoragent@cursor.com>

…olves Lazy-create root panel transitions when parentMenu is known, register menu content after parent context is available, and skip redundant submenu view sync when navigation state is unchanged. Co-authored-by: Cursor <cursoragent@cursor.com>

Only skip redundant navigation sync in updateAsSubmenu; still apply transition attrs when phase changes without a navigation update. Co-authored-by: Cursor <cursoragent@cursor.com>

Resolve the base popup group on each delegated call so submenu open/close stays on the shared root group, and treat an explicit group resolver returning undefined as a dedicated createPopupGroup(). Co-authored-by: Cursor <cursoragent@cursor.com>

Match other menu surface handlers by ignoring non-primary clicks on MenuBack in HTML and React. Co-authored-by: Cursor <cursoragent@cursor.com>

Match MenuItem and MenuBack by ignoring non-primary pointer buttons before invoking consumer handlers or opening the submenu. Co-authored-by: Cursor <cursoragent@cursor.com>

cursor

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit 7ab5440. Configure here.}

cursor · 2026-05-21T10:41:11Z

  override disconnectedCallback(): void {
    super.disconnectedCallback();
+    this.#cleanupRegistration?.();
+    this.#cleanupRegistration = null;


Back button uses wrong ARIA role as menu item

Medium Severity

The back button is now registered as a navigable menu item via menu.registerItem(this), making it participate in ArrowUp/ArrowDown keyboard cycling. However, it retains role="button" (explicit in HTML, implicit via <button> in React). Items inside a role="menu" container are expected to have role="menuitem" per WAI-ARIA. This combination breaks the ARIA ownership model and may confuse assistive technology during keyboard navigation.

Additional Locations (1)

packages/react/src/ui/menu/menu-back.tsx#L24-L29

^{Reviewed by Cursor Bugbot for commit 7ab5440. Configure here.}

github-project-automation Bot added this to Video.js 10 Roadmap May 21, 2026

sampotts mentioned this pull request May 21, 2026

feat(packages): add settings menu (captions and speed) #1533

Closed

vercel Bot deployed to Preview May 21, 2026 00:59 View deployment

sampotts force-pushed the feat/menu-viewport branch from b0fa184 to 6b48ec8 Compare May 21, 2026 01:09

vercel Bot deployed to Preview May 21, 2026 01:10 View deployment

sampotts force-pushed the feat/menu-viewport branch from 6b48ec8 to da3fb64 Compare May 21, 2026 01:11

vercel Bot deployed to Preview May 21, 2026 01:12 View deployment

cursor Bot reviewed May 21, 2026

View reviewed changes

Comment thread packages/core/src/dom/ui/menu/menu-viewport.ts

vercel Bot deployed to Preview May 21, 2026 01:22 View deployment

sampotts force-pushed the feat/menu-viewport branch from b17c9aa to 92b7e6b Compare May 21, 2026 01:26

vercel Bot deployed to Preview May 21, 2026 01:26 View deployment

cursor Bot reviewed May 21, 2026

View reviewed changes

Comment thread packages/core/src/dom/ui/transition.ts

sampotts force-pushed the feat/menu-viewport branch from 92b7e6b to 58cbf21 Compare May 21, 2026 01:44

vercel Bot deployed to Preview May 21, 2026 01:44 View deployment

sampotts force-pushed the feat/menu-viewport branch from 58cbf21 to 29ecce6 Compare May 21, 2026 01:51

vercel Bot deployed to Preview May 21, 2026 01:52 View deployment

sampotts changed the base branch from feat/menu-popup-group to feat/transition-lifecycle May 21, 2026 01:52

sampotts mentioned this pull request May 21, 2026

feat(core): track animation settle with data-transitioning lifecycle #1582

Closed

3 tasks

vercel Bot deployed to Preview May 21, 2026 04:55 View deployment

cursor Bot reviewed May 21, 2026

View reviewed changes

Comment thread packages/html/src/ui/menu/submenu-trigger-controller.ts

Comment thread packages/html/src/ui/menu/menu-element.ts Outdated

sampotts force-pushed the feat/menu-viewport branch from 151123b to 57cfb53 Compare May 21, 2026 05:08

vercel Bot deployed to Preview May 21, 2026 05:09 View deployment

cursor Bot reviewed May 21, 2026

View reviewed changes

Comment thread packages/react/src/ui/menu/menu-view.tsx

vercel Bot deployed to Preview May 21, 2026 05:43 View deployment

sampotts force-pushed the feat/menu-viewport branch from 6618eb8 to baf8e20 Compare May 21, 2026 05:51

vercel Bot deployed to Preview May 21, 2026 05:52 View deployment

cursor Bot reviewed May 21, 2026

View reviewed changes

Comment thread packages/core/src/dom/ui/menu/create-menu.ts Outdated

sampotts force-pushed the feat/menu-viewport branch from baf8e20 to 7fd4b45 Compare May 21, 2026 06:00

vercel Bot deployed to Preview May 21, 2026 06:01 View deployment

cursor Bot reviewed May 21, 2026

View reviewed changes

Comment thread packages/core/src/dom/ui/menu/create-menu.ts

sampotts and others added 8 commits May 21, 2026 16:05

fix(core): bindChild cleanup only unsubscribes its own view

7a4944d

Co-authored-by: Cursor <cursoragent@cursor.com>

docs(design): document primary-button guard on menu click handlers

bd80bc4

Explain why menuitem click handlers check event.button before activation. Co-authored-by: Cursor <cursoragent@cursor.com>

fix(core,html): address menu viewport Bugbot findings

21263c3

Register submenu views once instead of every update cycle, and invalidate viewport transition settle callbacks on destroy. Co-authored-by: Cursor <cursoragent@cursor.com>

sampotts force-pushed the feat/menu-viewport branch from 7fd4b45 to 958f64d Compare May 21, 2026 06:06

sampotts force-pushed the feat/transition-lifecycle branch from f268699 to 49b4a5b Compare May 21, 2026 06:06

vercel Bot deployed to Preview May 21, 2026 06:06 View deployment

fix(html): keep submenu attrs in sync when view transitions settle

ff3fbc1

Only skip redundant navigation sync in updateAsSubmenu; still apply transition attrs when phase changes without a navigation update. Co-authored-by: Cursor <cursoragent@cursor.com>

vercel Bot deployed to Preview May 21, 2026 06:13 View deployment

vercel Bot deployed to Preview May 21, 2026 07:22 View deployment

sampotts force-pushed the feat/menu-viewport branch from b84020d to 67643a3 Compare May 21, 2026 07:23

vercel Bot deployed to Preview May 21, 2026 07:24 View deployment

cursor Bot reviewed May 21, 2026

View reviewed changes

Comment thread packages/html/src/ui/menu/menu-back-element.ts

fix(packages): guard menu back actions to primary pointer button

50cd5b8

Match other menu surface handlers by ignoring non-primary clicks on MenuBack in HTML and React. Co-authored-by: Cursor <cursoragent@cursor.com>

vercel Bot deployed to Preview May 21, 2026 10:21 View deployment

cursor Bot reviewed May 21, 2026

View reviewed changes

Comment thread packages/react/src/ui/menu/menu-trigger.tsx

fix(react): guard submenu trigger clicks before user onClick

7ab5440

Match MenuItem and MenuBack by ignoring non-primary pointer buttons before invoking consumer handlers or opening the submenu. Co-authored-by: Cursor <cursoragent@cursor.com>

vercel Bot deployed to Preview May 21, 2026 10:28 View deployment

cursor Bot reviewed May 21, 2026

View reviewed changes

sampotts closed this May 27, 2026

github-project-automation Bot moved this to Done in Video.js 10 Roadmap May 27, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor(core): replace menu-viewport-transition with menu-viewport#1579

refactor(core): replace menu-viewport-transition with menu-viewport#1579
sampotts wants to merge 12 commits into
feat/transition-lifecyclefrom
feat/menu-viewport

sampotts commented May 21, 2026 •

edited by cursor Bot

Loading

Uh oh!

vercel Bot commented May 21, 2026 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

cursor Bot left a comment

Uh oh!

cursor Bot May 21, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

sampotts commented May 21, 2026 • edited by cursor Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes

Pointer activation

Testing

Uh oh!

vercel Bot commented May 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

cursor Bot left a comment

Choose a reason for hiding this comment

Uh oh!

cursor Bot May 21, 2026

Choose a reason for hiding this comment

Back button uses wrong ARIA role as menu item

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

sampotts commented May 21, 2026 •

edited by cursor Bot

Loading

vercel Bot commented May 21, 2026 •

edited

Loading