feat(packages): compound tooltips with label and shortcut parts#1494
Merged
Conversation
✅ Deploy Preview for vjs10-site ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
📦 Bundle Size Report🎨 @videojs/html
Presets (7)
Media (9)
Players (5)
Skins (30)
UI Components (38)
Sizes are marginal over the root entry point. ⚛️ @videojs/react
Presets (7)
Media (8)
Skins (27)
UI Components (32)
Sizes are marginal over the root entry point. 🧩 @videojs/core — no changesEntries (11)
🏷️ @videojs/element — no changesEntries (2)
📦 @videojs/store — no changesEntries (3)
🔧 @videojs/utils — no changesEntries (10)
📦 @videojs/spf — no changesEntries (4)
ℹ️ How to interpretAll sizes are standalone totals (minified + brotli).
Run |
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
sampotts
force-pushed
the
feat/hotkey-tooltips
branch
from
c44be58 to
d8da58e
Compare
sampotts
force-pushed
the
feat/hotkey-tooltips
branch
from
d8da58e to
c90d477
Compare
sampotts
force-pushed
the
feat/hotkey-tooltips
branch
from
c90d477 to
ae01567
Compare
sampotts
force-pushed
the
feat/hotkey-tooltips
branch
from
ae01567 to
4060516
Compare
sampotts
force-pushed
the
feat/hotkey-tooltips
branch
from
4060516 to
ce49849
Compare
sampotts
force-pushed
the
feat/hotkey-tooltips
branch
from
ce49849 to
fb354ff
Compare
sampotts
force-pushed
the
feat/hotkey-tooltips
branch
from
fb354ff to
df3efdc
Compare
sampotts
force-pushed
the
feat/hotkey-tooltips
branch
from
df3efdc to
1e6f504
Compare
sampotts
force-pushed
the
feat/hotkey-tooltips
branch
from
1e6f504 to
0eb9592
Compare
sampotts
force-pushed
the
feat/hotkey-tooltips
branch
from
0eb9592 to
d404a48
Compare
luwes
approved these changes
Jun 17, 2026
luwes
left a comment
luwes
left a comment
Collaborator
There was a problem hiding this comment.
Scanned through it, quick test, lgtm!
New markup looks intuitive.
mihar-22
approved these changes
Jun 17, 2026
sampotts
force-pushed
the
feat/hotkey-tooltips
branch
from
d404a48 to
74518ea
Compare
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes using default effort 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 74518ea. Configure here.
Made-with: Cursor
sampotts
force-pushed
the
feat/hotkey-tooltips
branch
from
74518ea to
0682ce3
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #1299
Summary
Adds compound tooltips with separate label and keyboard-shortcut regions across HTML custom elements, React, and skins. Hotkey metadata flows through an extended coordinator (display shortcuts, optional action
value, subscriber notifications). Playback rate uses core-owned copy and spinbutton semantics so tooltip and accessibility stay aligned on both platforms. Coordinator-driven shortcut updates no longer double-fire tooltip sync.Screenshots
Changes
media-tooltip-labelandmedia-tooltip-shortcut; tooltip syncs label/shortcut from the trigger and can create default parts when markup is emptygetShortcut, display formatting, subscribe/notify, andHOTKEY_SHORTCUT_CHANGE_EVENT; exportsgetHotkeyCoordinatorandtoDisplayKeyShortcutTooltip.Label/Tooltip.Shortcut,useHotkeyShortcut(replacesuseAriaKeyShortcuts), tooltip context updates<media-hotkey>wiring in minimal skins where appropriaterequestUpdate;MediaButtonElementcontinues to emithotkey-shortcut-changewhen the display shortcut actually changes (avoids duplicate tooltip sync)Playback speedfor tooltip andaria-label;role="spinbutton"witharia-valuenow,aria-valuetext(e.g.1.25×, same numeric string asvaluenow), andaria-valuemin/aria-valuemaxfrom the currentplaybackRateslist when non-emptycreateMediaButton: merge order[getButtonProps(), elementProps, last attrs]sogetAttrs()(spinbutton role and ARIA) wins overcreateButton’s defaultrole="button"Implementation details
MediaButtonElement.#syncHotkeyShortcutdedupes by last display shortcut string before dispatchingHOTKEY_SHORTCUT_CHANGE_EVENT.aria-valuenowand the numeric part ofaria-valuetextstay identical.Testing
pnpm typecheckpnpm -F @videojs/core test src/core/ui/playback-rate-button src/dom/hotkeypnpm -F @videojs/html test src/ui/tooltip src/ui/hotkey src/ui/playback-rate-buttonpnpm -F @videojs/react test src/ui/Note
Medium Risk
Refactors hotkey shortcut resolution and fans out through accessibility attributes and tooltip UI across HTML/React presets; behavior is covered by tests but registration-order and value-matching semantics affect what users see in tooltips and
aria-keyshortcuts.Overview
Tooltips now split into label and keyboard shortcut regions (
media-tooltip-label/media-tooltip-shortcutin HTML;Tooltip.Label/Tooltip.Shortcutin React). Presets and skins wire those parts and style the shortcut (e.g.media-tooltip__kbd,popup.tooltipShortcut).Hotkey metadata is unified in
HotkeyCoordinator: the separate ARIA registry is removed in favor ofgetShortcut(action, value?), which returns botharia(toAriaKeyShortcut) and a compactshortcut(toDisplayKeyShortcut, e.g.Ctrl+K). Bindings can be filtered by actionvalue(e.g. seek step seconds), disabled bindings are excluded, and the latest registration is preferred for display.subscribeShortcutChangesandHOTKEY_SHORTCUT_CHANGE_EVENTnotify controls when registrations change.Controls subscribe to that flow:
AriaKeyShortcutsController/useHotkeyShortcut(replacinguseAriaKeyShortcuts) refresharia-keyshortcutsand display shortcuts;MediaButtonElementdedupes and dispatches shortcut-change events; tooltips sync label + shortcut from triggers (includinggetShortcut()on media buttons). Seek and playback rate buttons declare matching hotkey actions/values in HTML and React.Tooltip popup styling adds flex layout when open so shortcut chips layout correctly without breaking closed
[popover]hiding. Slider skin tokens pick up minor drag/focus-ring tweaks unrelated to tooltips.Reviewed by Cursor Bugbot for commit 0682ce3. Bugbot is set up for automated code reviews on this repo. Configure here.