mirror of
https://github.com/Psychotoxical/psysonic.git
synced 2026-07-22 07:15:47 +00:00
Unify button tooltips across the app (#972)
* feat(tooltip): 2s open delay and shared tooltipAttrs helper Add a 2s hover open delay in TooltipPortal (single behaviour source) so tooltips no longer flash on quick pointer passes; hiding stays immediate. Add tooltipAttrs() to pair data-tooltip with a matching aria-label for buttons touched in the unification work. Covered by Vitest. * feat(tooltip): lower open delay to 1s 2s felt too long in testing; 1s gives the same anti-flash behaviour without making intentional hovers wait. * feat(tooltip): action tooltips on the artist overview Add tooltips describing the action to Last.fm, Wikipedia, Play All, Shuffle and Radio. Shuffle/Radio now show a tooltip on desktop too, not just mobile. Strings added to all 9 locales. * feat(tooltip): action tooltips on the album overview Add tooltips describing the action to the desktop Play, Artist Bio and Download (ZIP) buttons, matching the mobile layout. Strings added to all 9 locales. * feat(tooltip): action tooltips on the All Albums toolbar Add tooltips describing the action to the sort, year and genre filter buttons. SortDropdown gains an optional tooltip prop; the year and genre filter components carry their own, so the tooltips also appear on the other browse pages that reuse them. Strings added to all 9 locales. * feat(tooltip): action tooltips on song-list rows Add Play and Add-to-queue tooltips to the per-row icons in SongRow, used by the Tracks browse list, Search and Advanced Search. Also localizes the aria-labels, which were hardcoded English. New common.addToQueue in all 9 locales. * fix(tooltip): uniform tooltip placement on the Artists toolbar The favourite and multi-select buttons forced tooltips below while the view-mode buttons auto-flipped above, so the row looked inconsistent. Pin the view-mode buttons below too, matching the rest of the row and the Albums toolbar. * feat(tooltip): clarify and align the Advanced Search scope row Add a leading "Search in:" label and per-chip tooltips so the All/Artists/Albums/Songs row reads as a scope limiter. Drop the forced below-placement on the small star filter (used only here) so the favourites chip flips with the others instead of sitting alone below. Strings added to all 9 locales. * docs(changelog): tooltip unification (#972)
This commit is contained in:
committed by
GitHub
parent
82c414d7bc
commit
c119a32277
@@ -0,0 +1,24 @@
|
||||
/**
|
||||
* Pairs a tooltip with its accessible label so the two never drift apart.
|
||||
*
|
||||
* Spread onto any element that should show a hover tooltip rendered by
|
||||
* `TooltipPortal`. The same already-translated string becomes both the
|
||||
* `data-tooltip` (visual hover label) and the `aria-label` (screen readers).
|
||||
*
|
||||
* <button {...tooltipAttrs(t('albums.sortTooltip'))} onClick={…}>
|
||||
*
|
||||
* `pos: 'bottom'` is a viewport-edge escape hatch only (forces the tooltip
|
||||
* below the anchor instead of the default auto-flip) — do not use it on
|
||||
* ordinary toolbar buttons. `wrap` enables multi-line wrapping.
|
||||
*/
|
||||
export function tooltipAttrs(
|
||||
text: string,
|
||||
opts?: { pos?: 'bottom'; wrap?: boolean },
|
||||
): Record<string, string> {
|
||||
return {
|
||||
'data-tooltip': text,
|
||||
'aria-label': text,
|
||||
...(opts?.pos ? { 'data-tooltip-pos': opts.pos } : {}),
|
||||
...(opts?.wrap ? { 'data-tooltip-wrap': '' } : {}),
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user