fix(ui): give icon-only controls a tooltip with their label - #497
Merged
Merged
Conversation
Icon-only controls only carried a native title, which appears late, never on keyboard focus, and not at all for some canvas controls such as the zoom, reset, and fullscreen buttons over diagrams and charts. IconButton, IconButtonLink, and icon-only Dropdown triggers now show their label as the shared tooltip by default. The native title stays only in server HTML as the no-JavaScript fallback and is removed on hydration, so a hint never appears twice; a Tooltip.Anchor around a control keeps the only hint. Tooltips now open on hover and on visible (keyboard) focus only. Touch never opens one, and focus that a click, tap, or closing overlay returns without a ring opens none, so a default tooltip does not pop up after a menu or dialog closes. A tooltip that only repeats the accessible name is not added as a second description. @k2b/ui's own icon-only controls (zoom-pan and chart controls, chat, markdown editor, panes, file views) and app buttons that rendered an icon through Button now use the shared tooltip. The new icon-controls check reports icon-only Button/ButtonLink and native icon-only controls without an accessible name.
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.
Outcome
Icon-only controls now show their label as the shared
@k2b/uitooltip, in English and German, instead of relying on a late native browser title. This covers the zoom in, zoom out, reset, and fullscreen controls over Mermaid diagrams and otherZoomPanViewportcontent, the same controls on interactive charts, and everyIconButton,IconButtonLink, and icon-onlyDropdown.Triggeracross the apps.IconButton,IconButtonLink, andiconOnlyDropdown.Triggershowlabel(or an explicittitle) as the tooltip.tooltipstill overrides it;tooltip={false}still opts out. A control inside aTooltip.Anchorleaves the hint to the anchor, so no target shows two tooltips (the existing anchor-wrapped buttons previously showed the anchor tooltip and a native title).aria-labelis no longer added asaria-describedby, so screen readers do not read the name twice. Hints that add information, such asZoom in (+), still describe the control.title; hydration removes it.Button/ButtonLinkuses in Core (AI quota, SSH keys), Files shares, Grids (query parameters, custom app builder), and Spaces becameIconButton/IconButtonLink. The Cloud preferences menu no longer opts out of its tooltip. The Gateway admin column link got a localized name (EN/DE).icon-controlscheck fails on icon-onlyButton/ButtonLink(use theIconButtonfamily) and on native icon-onlybutton/a/Tooltip.Triggerwithout an accessible name.Field affordances (clear, stepper, remove-chip), tab close, dialog close, and calendar arrows keep their accessible name without a hover hint. They are part of a composite control and are left unchanged here.
Layout
Tooltips are top-layer popovers. A closed tooltip is
display: noneand sits after its control, so:first-childtap-area rules and row layouts do not change. A real-browser check (Chromium, light mode, EN and DE) showedZoom in (+)/Vergrößern (+)andChoose list view/Listenansicht wählenon hover, with no change to the control's box and no native title after hydration. A tap on a phone viewport left no tooltip open.Verification
packages/ui/test/icon-tooltips.behavior.test.tsxcovers: the label tooltip; no title or redundant description after hydration; hover opens it; touch and ring-less focus do not; keyboard focus does; explicit hints describe the control;tooltip={false}andTooltip.Anchorgive one hint; icon-only dropdown triggers and filter chips; and zoom-pan shortcut hints.scripts/checks/icon-controls.test.tscovers the new rule.bun run check(18/18),bun run test, and the@k2b/uiunit, render, and behavior suites pass.Docs and skill
The UI context is updated: Tooltip (defaults, focus and touch behavior, description rule, SSR fallback), Buttons, Menus, and FilterChip. The
cloud-devskill is unchanged: it already tells authors to use@k2b/uicontrols, and the per-component contract lives in the UI context.