feat(playground): replace native title attributes with v0 Tooltip - #637
Open
sridhar-3009 wants to merge 1 commit into
Open
feat(playground): replace native title attributes with v0 Tooltip#637sridhar-3009 wants to merge 1 commit into
sridhar-3009 wants to merge 1 commit into
Conversation
Member
|
This PR currently has merge conflicts with its base branch ( Context: we're adopting a git-flow branch model — |
Native title= tooltips don't work well for keyboard focus, touch, or screen readers. vuetifyjs#621 introduced AppTooltip and migrated apps/docs to it, but apps/playground was never covered — six files still had native title= attributes, and PlaygroundAppBar.vue had two already migrated to AppTooltip alongside one that was missed. - AppIconButton: deleted. Its only consumer (AppThemeToggle) wrapped a button-rendering component inside another button-rendering AppTooltip activator, which would have nested two interactive elements. Moved the icon markup directly into AppThemeToggle instead, matching how AppCloseButton (already migrated in apps/docs) wraps plain SVG/icon content rather than another button component. - AppThemeToggle: wraps the icon directly in AppTooltip. - AppCloseButton: same shape as the already-migrated apps/docs copy, including making the .close-button style block unscoped (AppTooltip renders a multi-root fragment, so a scoped selector wouldn't match the rendered button — see vuetifyjs#359). - PlaygroundAppBar: converts the one remaining native-title button (Switch to preview/editor) to AppTooltip, matching the two siblings in the same file that were already migrated. - PlaygroundMenuBar: the Menu trigger is a Popover.Activator, not a plain button — wrapping it in another trigger component would nest two overlay activators. Replaced title="Menu" with aria-label="Menu" instead of forcing AppTooltip onto it. - PlaygroundEditorFileTree: converts all four toolbar buttons (New file, New folder, Toggle config files, Delete) to AppTooltip, keeping each existing aria-label (static or dynamic) alongside the new text prop. Fixes vuetifyjs#495 (playground half)
sridhar-3009
force-pushed
the
feat/replace-title-with-tooltip-495
branch
from
July 24, 2026 16:00
eb49406 to
eb91cd9
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
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.
Fixes #495 (playground half — apps/docs was already migrated in #621).
Summary
Native
title=tooltips don't work well for keyboard focus, touch, or screen readers. #621 introducedAppTooltipand migratedapps/docsto it, butapps/playgroundwas never covered — six files still had nativetitle=attributes, andPlaygroundAppBar.vuehad two spots already migrated toAppTooltipalongside one that was missed.What changed
AppIconButton.vue: deleted. Its only consumer (AppThemeToggle) was wrapping a button-rendering component inside another button-renderingAppTooltipactivator, which would nest two interactive elements. Moved the icon markup directly intoAppThemeToggleinstead, matching howAppCloseButton(already migrated inapps/docs) wraps plain SVG/icon content rather than another button component.AppThemeToggle.vue: wraps the icon directly inAppTooltip.AppCloseButton.vue: same shape as the already-migratedapps/docscopy, including making the.close-buttonstyle block unscoped (AppTooltiprenders a multi-root fragment, so a scoped selector wouldn't match the rendered button — see feat(genesis): add GnActionButton action-button primitive #359).PlaygroundAppBar.vue: converts the one remaining native-title button (Switch to preview/editor) toAppTooltip, matching the two siblings in the same file that were already migrated.PlaygroundMenuBar.vue: the Menu trigger is aPopover.Activator, not a plain button — wrapping it in another trigger component would nest two overlay activators. Replacedtitle="Menu"witharia-label="Menu"instead of forcingAppTooltiponto it.PlaygroundEditorFileTree.vue: converts all four toolbar buttons (New file, New folder, Toggle config files, Delete) toAppTooltip, keeping each existingaria-label(static or dynamic) alongside the newtextprop.No changes to
main.ts— neitherapps/docsnorapps/playgroundinstallscreateTooltipPlugin, so no plugin registration is needed;AppTooltipsets its ownopenDelay/closeDelaydefaults.Rebase note
This PR previously used the raw
Tooltip.Root/Tooltip.Activator/Tooltip.Contentpattern from beforeAppTooltipexisted, and had drifted into merge conflicts. Fully rewrote it against currentmasterto useAppTooltip— the same wrapperapps/docsalready uses — rather than reintroducing a patternAppTooltipwas specifically created to replace.Testing
pnpm lint— cleanpnpm typecheck— cleanpnpm build:play(client + SSR build, page rendering) — succeedspnpm repo:check(knip + sherif) — no issues, confirmingAppIconButton's removal didn't leave any dangling referencesAll four checks run from a clean worktree of this exact commit (fresh
pnpm install), not just my local working copy.