Skip to content

feat(docs): replace remaining native title= attributes with Tooltip (#495) - #643

Closed
sridhar-3009 wants to merge 1 commit into
vuetifyjs:masterfrom
sridhar-3009:docs/replace-title-tooltip-495-part2
Closed

feat(docs): replace remaining native title= attributes with Tooltip (#495)#643
sridhar-3009 wants to merge 1 commit into
vuetifyjs:masterfrom
sridhar-3009:docs/replace-title-tooltip-495-part2

Conversation

@sridhar-3009

Copy link
Copy Markdown
Contributor

Summary

Continues the #495 migration (see also #642) for the remaining apps/docs components with native title= HTML attributes.

File Change
DocsAskPanel.vue 4 icon buttons (Open in Bin, Copy conversation, Reset conversation, Fullscreen toggle) → Tooltip.Root / Tooltip.Activator / Tooltip.Content
DocsExampleCodePane.vue "Collapse code" button → Tooltip.Root / Tooltip.Activator
DocsCodeActions.vue 5 GnActionButton instances wrapped via renderless Tooltip.Activator (spreads onPointerenter, onFocus, aria-describedby through inheritAttrs); title= removed
AppSettingsSheet.vue "Sign out" button → Tooltip.Activator
AppSettingsTheme.vue "Copy theme" button → Tooltip.Root / Tooltip.Activator
AppThemeCustomButton.vue "Edit theme" button → Tooltip.Root / Tooltip.Activator
HomeInstallCommand.vue Popover.Activator (inside Popover.Root) wrapped via renderless Tooltip.Activator
AppSearchInline.vue Redundant title= removed (button has aria-label and visible "Search the docs…" text)

Closes part of #495 (remaining: DocsSearch.vue which has 9 dynamic title= bindings across complex list items)

…uetifyjs#495)

Continue the vuetifyjs#495 migration for the remaining docs components:

- DocsAskPanel.vue: 4 icon buttons (Open in Bin, Copy conversation,
  Reset conversation, Fullscreen toggle) converted to Tooltip wrappers
- DocsExampleCodePane.vue: 'Collapse code' button wrapped in Tooltip
- DocsCodeActions.vue: 5 GnActionButton instances wrapped via renderless
  Tooltip.Activator (spreads hover/focus attrs through inheritAttrs)
- AppSettingsSheet.vue: Sign out button replaced with Tooltip.Activator
- AppSettingsTheme.vue: Copy theme button wrapped in Tooltip
- AppThemeCustomButton.vue: Edit theme button wrapped in Tooltip
- HomeInstallCommand.vue: Popover.Activator for package manager wrapped
  via renderless Tooltip.Activator inside Popover.Root
- AppSearchInline.vue: redundant title= removed (button already has
  aria-label and visible text content)
@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!

@johnleider

Copy link
Copy Markdown
Member

Thanks for the work here, and apologies for the overlap. Closing this — it's been superseded.

The day after these PRs were opened, #621 landed and closed #495 by introducing a reusable AppTooltip wrapper and migrating the entire docs + playground chrome to it (now used in ~37 files on master). As a result:

One thing worth carrying forward regardless: Tooltip.Activator spreads aria-describedby (a description), not an accessible name. Several icon-only controls in this diff dropped title= without keeping an aria-label, which removes their accessible name (WCAG 4.1.2). AppTooltip and the retained aria-labels on master avoid that.

If you'd like to keep contributing to this area, the remaining un-migrated spots are the GnActionButton title= props in DocsCodeActions.vue — those should go through AppTooltip (renderless slot), not inline compounds. Happy to point you at a good first issue.

@johnleider johnleider closed this Jul 23, 2026
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.

2 participants