Skip to content

feat(playground): replace native title attributes with v0 Tooltip - #637

Open
sridhar-3009 wants to merge 1 commit into
vuetifyjs:masterfrom
sridhar-3009:feat/replace-title-with-tooltip-495
Open

feat(playground): replace native title attributes with v0 Tooltip#637
sridhar-3009 wants to merge 1 commit into
vuetifyjs:masterfrom
sridhar-3009:feat/replace-title-with-tooltip-495

Conversation

@sridhar-3009

@sridhar-3009 sridhar-3009 commented Jul 18, 2026

Copy link
Copy Markdown
Contributor

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 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 spots already migrated to AppTooltip alongside one that was missed.

What changed

  • AppIconButton.vue: deleted. Its only consumer (AppThemeToggle) was wrapping a button-rendering component inside another button-rendering AppTooltip activator, which would nest 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.vue: wraps the icon directly in AppTooltip.
  • AppCloseButton.vue: 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 feat(genesis): add GnActionButton action-button primitive #359).
  • PlaygroundAppBar.vue: 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.vue: 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.vue: 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.

No changes to main.ts — neither apps/docs nor apps/playground installs createTooltipPlugin, so no plugin registration is needed; AppTooltip sets its own openDelay/closeDelay defaults.

Rebase note

This PR previously used the raw Tooltip.Root/Tooltip.Activator/Tooltip.Content pattern from before AppTooltip existed, and had drifted into merge conflicts. Fully rewrote it against current master to use AppTooltip — the same wrapper apps/docs already uses — rather than reintroducing a pattern AppTooltip was specifically created to replace.

Testing

  • pnpm lint — clean
  • pnpm typecheck — clean
  • pnpm build:play (client + SSR build, page rendering) — succeeds
  • pnpm repo:check (knip + sherif) — no issues, confirming AppIconButton's removal didn't leave any dangling references

All four checks run from a clean worktree of this exact commit (fresh pnpm install), not just my local working copy.

@johnleider

Copy link
Copy Markdown
Member

This PR currently has merge conflicts with its base branch (master) and can't be merged as-is. Could you rebase onto the latest master and resolve the conflicts when you get a chance?

Context: we're adopting a git-flow branch model — master for fixes/patches, dev for features (minor), next for breaking changes (major). This PR is correctly targeting master; it just needs a rebase to clear the conflicts. Thanks!

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
sridhar-3009 force-pushed the feat/replace-title-with-tooltip-495 branch from eb49406 to eb91cd9 Compare July 24, 2026 16:00
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Refactor] Replace native title attributes with v0 Tooltip across docs and playground

2 participants