feat(tooltip): simplify implementation#3368
Draft
jpzwarte wants to merge 49 commits into
Draft
Conversation
jpzwarte
requested review from
Diaan,
a11ymiko,
anna-lach and
michal-sanoma
as code owners
🦋 Changeset detectedLatest commit: 7db9e85 The changes in this PR will be included in the next version bump. This PR includes changesets to release 42 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
jpzwarte
changed the title
tooltip property to sl-buttontooltip directly on button
Contributor
🕸 Storybook previewYou can view a preview here (commit |
Contributor
There was a problem hiding this comment.
Pull request overview
This PR adds a tooltip property to @sl-design-system/button (<sl-button>) so consumers can attach an <sl-tooltip> directly to the button and have ARIA relationships applied automatically, improving ergonomics especially for icon-only buttons.
Changes:
- Added a new
tooltipproperty tosl-buttonand render an internal<sl-tooltip>via scoped elements. - Wired tooltip-based ARIA (
aria-describedbyfor text buttons,aria-labelledbyfor icon-only buttons) and added logic to merge forwardedaria-labelledbyelements. - Added Storybook and unit test updates plus a changeset for a minor release.
Reviewed changes
Copilot reviewed 5 out of 6 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
yarn.lock |
Updates workspace dependency metadata for the button package (adds tooltip/scoped-elements/lit entries). |
packages/components/button/src/button.ts |
Implements the tooltip property, internal tooltip rendering, and ARIA wiring/merging logic. |
packages/components/button/src/button.stories.ts |
Updates stories to demonstrate tooltip usage, including icon-only example. |
packages/components/button/src/button.spec.ts |
Adds unit tests for tooltip rendering and ARIA behavior. |
packages/components/button/package.json |
Adds @sl-design-system/tooltip dependency and declares scoped-elements/lit peer/dev dependencies. |
.changeset/afraid-parents-nail.md |
Declares a minor release for the new tooltip API. |
Contributor
🕸 Website previewYou can view a preview here (commit |
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.
Closes #3344
The new
sl-tooltipThe
sl-tooltipcomponent has been rewritten from ~1 300 lines down to ~390 lines. The new implementation is built entirely on platform primitives:popover="manual") for show/hide lifecycle and light-dismiss behaviour.anchor-name/position-anchor) for layout — the tooltip positions itself relative to its anchor with zero JavaScript.ariaLabelledByElements/ariaDescribedByElements) for cross-shadow-boundary ARIA relationships.Note
CSS Anchor Positioning is not yet supported in all browsers. You may need to include the CSS Anchor Positioning polyfill in your application.
The anchor is referenced by ID through the
forattribute. Thetypeproperty ('label'|'description') determines which ARIA relation is established. Thetriggerproperty ('focus','hover','click','manual') controls which interactions open and close the tooltip.What has been removed
lazy()static factory — components now render tooltips declaratively usingfor="…"instead of imperatively creating them at runtime.AnchorControllerandEventsControllerdependencies — anchor tracking and event wiring are now handled directly in the component.positionandoffsetproperties — replaced by CSSposition-areaandposition-try-fallbacksin the stylesheet.arrowPadding— the new design does not use an arrow.TooltipOptionsinterface and thesl-closeevent.ShadowRoot.createElementtype workaround that was required for scoped-elements compatibility.New
tooltipproperty on componentsThe following components now expose a
tooltipproperty that renders an<sl-tooltip>in their shadow DOM and wires up ARIA automatically:sl-buttonstringariaLabelledByElements; text button →ariaDescribedByElementssl-toggle-buttonstringsl-buttonsl-menu-buttonstringsl-buttonsl-tagboolean | stringtrueshows a tooltip with the truncated label; a string overrides the textComponents migrated to the new tooltip
These components have been migrated from the old
lazy()API to declarative<sl-tooltip>rendering:sl-avatar— shows a tooltip with the display name when it overflows, usingfor.sl-breadcrumbs— tooltips for truncated breadcrumb links now useforinstead of manual cleanup functions.sl-calendar(month-view) — day-indicator tooltips useforinstead of per-dayid+aria-describedby.sl-ellipsize-text— shows a tooltip with the full text when it overflows, usingfor.sl-grid— the "cancel selection" button uses the newtooltipproperty; column-header tooltips useforinstead ofid+aria-describedby.sl-tag-list— the overflow group button uses the newtooltipproperty instead of a manually managed<sl-tooltip>.Other changes
Bug fixes
sl-menu-button: Fix clicking the button a second time not dismissing the menu. The menu would immediately reopen because the button click fired after the popover'stoggleevent. Fixed by tracking a#popoverJustClosedflag viabeforetoggle.sl-button-bar: Fix not giving buttons enough time to set the icon-only state.Accessibility
sl-menu-button,sl-toggle-button: Exposearia-disabled="true"on disabled items so assistive technologies announce them as unavailable while keeping them focusable.sl-tool-bar: Overflow menu items now preserve disabled semantics witharia-disabledinstead of rendering hard-disabled menu items.sl-grid: Addedaria-expandedto the toggle group button in the group header.ForwardAriaMixin(sl-shared)ForwardAriaMixinno longer overrides any existingariaDescribedByElementsorariaLabelledByElementsvalues. This allows components that use the mixin to maintain their own ARIA relationships without interference while still forwarding additional ARIA attributes.