fix(packages): make tooltips visual-only and auto-forward media button labels#1174
Merged
fix(packages): make tooltips visual-only and auto-forward media button labels#1174
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 — no changesPresets (7)
Media (7)
Players (3)
Skins (17)
UI Components (22)
Sizes are marginal over the root entry point. ⚛️ @videojs/react
Presets (7)
Media (6)
Skins (14)
UI Components (19)
Sizes are marginal over the root entry point. 🧩 @videojs/core — no changesEntries (8)
🏷️ @videojs/element — no changesEntries (2)
📦 @videojs/store — no changesEntries (3)
🔧 @videojs/utils — no changesEntries (10)
📦 @videojs/spf — no changesEntries (3)
ℹ️ How to interpretAll sizes are standalone totals (minified + brotli).
Run |
mihar-22
force-pushed
the
feat/tooltip-label-forwarding
branch
from
785933d to
85019be
Compare
mihar-22
force-pushed
the
feat/tooltip-label-forwarding
branch
from
85019be to
77413ec
Compare
mihar-22
force-pushed
the
feat/tooltip-label-forwarding
branch
from
77413ec to
8cf7ed9
Compare
mihar-22
force-pushed
the
feat/tooltip-label-forwarding
branch
from
8cf7ed9 to
d3d43f1
Compare
mihar-22
force-pushed
the
feat/tooltip-label-forwarding
branch
from
d3d43f1 to
781d64e
Compare
mihar-22
force-pushed
the
feat/tooltip-label-forwarding
branch
from
781d64e to
987129a
Compare
mihar-22
force-pushed
the
feat/tooltip-label-forwarding
branch
from
987129a to
3a0a2e4
Compare
mihar-22
changed the title
Member
Author
|
Moved this back to draft, few bugs to iron out. |
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 2 potential issues.
Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
sampotts
reviewed
Apr 1, 2026
Collaborator
sampotts
left a comment
sampotts
left a comment
There was a problem hiding this comment.
Nice clean up of all the label/tooltip state stuff 👍🏼
When a media button is inside a Tooltip.Root, its label is automatically forwarded to the tooltip popup. The ARIA strategy switches from aria-label (self-labelling) to aria-labelledby (tooltip provides the accessible name), eliminating duplicate screen reader announcements and manual label components. Review feedback applied: - Rename setLabelledByTooltip → setSuppressLabel (framework-agnostic naming) - Switch useEffect → useLayoutEffect (close first-render a11y timing gap) - Use isUndefined check for #content (treat empty string as forwarded content) - Add setSuppressLabel tests for all 7 button cores - Add empty string content test for TooltipCore - HTML parity: MediaButtonElement exposes getLabel/setSuppressLabel, TooltipElement auto-detects media button triggers and forwards labels, cleanup removes both aria-describedby and aria-labelledby Closes #1070 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Tooltips are now purely visual (role="presentation") with no ARIA relationship to the trigger. Buttons always keep their own aria-label. This eliminates the double screen-reader readout without coupling tooltip and button accessibility concerns. Label content is still auto-forwarded from media buttons to tooltip popups — skin authors don't need manual label components. Approach informed by Base UI's tooltip philosophy: tooltips are supplementary visual hints that should not carry critical a11y info. Closes #1070 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Tooltip content is now auto-forwarded from media buttons, so manual label components (PlayLabel, CaptionsLabel, etc.) and CSS-driven tooltip-state visibility rules are no longer needed. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
mihar-22
force-pushed
the
feat/tooltip-label-forwarding
branch
from
4ffd4fb to
2e6643d
Compare
Use a MutationObserver on the trigger element to re-read the label when data attributes change (e.g. paused → playing). Also clear textContent when the label becomes falsy instead of leaving stale text. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
mihar-22
force-pushed
the
feat/tooltip-label-forwarding
branch
from
2e6643d to
d978bc8
Compare
mihar-22
force-pushed
the
feat/tooltip-label-forwarding
branch
2 times, most recently
from
1ef2bfb to
0cd8063
Compare
mihar-22
force-pushed
the
feat/tooltip-label-forwarding
branch
from
0cd8063 to
7e162b0
Compare
mihar-22
force-pushed
the
feat/tooltip-label-forwarding
branch
from
7e162b0 to
8ebcc44
Compare
mihar-22
force-pushed
the
feat/tooltip-label-forwarding
branch
from
8ebcc44 to
5704e5f
Compare
mihar-22
force-pushed
the
feat/tooltip-label-forwarding
branch
from
5704e5f to
2c91289
Compare
mihar-22
force-pushed
the
feat/tooltip-label-forwarding
branch
from
2c91289 to
bebef08
Compare
Button cores now include `label` in their state via a `ButtonState` base interface and expose it through a reactive `State<T>` container (following the BufferingIndicatorCore pattern). MediaButtonElement exposes `$state` for external subscription. The HTML tooltip element replaces its MutationObserver with a proper state subscription via `$state.subscribe()`, keeping tooltip content in sync through the same reactive graph as all other state. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
mihar-22
force-pushed
the
feat/tooltip-label-forwarding
branch
from
bebef08 to
2f9a625
Compare
Merged
github-actions bot
added a commit
that referenced
this pull request
Apr 2, 2026
…ltips Reflect API changes from #1174 where tooltips became visual-only and button labels are auto-forwarded: - Update tooltip.mdx accessibility section: tooltips no longer set aria-describedby or role="tooltip", now use role="presentation" - Update tooltip.mdx HTML behavior section: remove mention of ARIA attribute management - Update accessibility.mdx: clarify that button labels are auto-forwarded and tooltips are visual-only Closes #1204 Co-authored-by: rahim <github-actions[bot]@users.noreply.github.com>
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
2 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 #1070
Tooltips are now visual-only (
role="presentation") with no ARIA relationship to the trigger — noaria-describedby, noaria-labelledby. Media buttons always self-label witharia-label, so the accessible name never depends on tooltip visibility. This eliminates the double screen-reader readout where both the button'saria-labeland the tooltip'saria-describedbyannounced the same text.The DX improvement of auto-forwarding labels is preserved: when a media button is inside a tooltip, it pushes its current label (e.g. "Play", "Pause") to the tooltip popup as default content. Skin authors no longer need manual label components like
<PlayLabel />— the tooltip content updates automatically as media state changes.Approach informed by Base UI's tooltip philosophy: tooltips are supplementary visual hints for sighted mouse/keyboard users and should not carry critical accessibility information, since they're invisible to touch users and unreliable for screen readers.
Note
Medium Risk
Changes tooltip ARIA semantics and rewires how tooltip text is produced across HTML/React presets; regressions could affect accessibility expectations or leave some tooltips empty if a trigger doesn’t provide a label.
Overview
Tooltips are changed to be visual-only:
TooltipCore.getTriggerAttrs()no longer setsaria-describedby, andgetPopupAttrs()now usesrole="presentation"(tests updated accordingly).Tooltip content is now auto-derived from the trigger’s current label. HTML
MediaButtonElementexposesgetLabel()andTooltipElementcopies that label into its text, while React addscontentto tooltip context andcreateMediaButton()pushescore.getLabel(state)into the surroundingTooltip.RootsoTooltip.Popupcan render it as default children.Default/minimal audio+video skins (HTML, React, and Tailwind) are updated to remove multi-state tooltip label markup and the shared
tooltip-stateCSS/Tailwind exports are deleted since label switching is no longer done via CSS selectors.Written by Cursor Bugbot for commit 4ffd4fb. This will update automatically on new commits. Configure here.