BuzzbeeSCD/openchamber
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: make sync action tooltip trigger focusable

Browse Source 
Wraps the sync button in a focusable trigger when rebase sync is blocked
Preserves the existing sync button behavior and labels
Improves tooltip access for keyboard users
This commit is contained in:
Bohdan Triapitsyn
2026-07-28 19:29:34 +03:00
parent c8a08588d9
commit b369ed5821
1 changed files with 19 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/components/views/git/SyncActions.tsx
+19 -17
View File
@@ -74,23 +74,25 @@ export const SyncActions: React.FC<SyncActionsProps> = ({
<div className="inline-flex items-center rounded-[9px] [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-[50px] border border-border/60 bg-[var(--surface-elevated)] overflow-hidden"> <div className="inline-flex items-center rounded-[9px] [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-[50px] border border-border/60 bg-[var(--surface-elevated)] overflow-hidden">
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger asChild>
<button <span className="inline-flex" tabIndex={blocksRebaseSync ? 0 : undefined}>
type="button" <button
onClick={handleSync} type="button"
disabled={isPrimaryDisabled} onClick={handleSync}
className={cn( disabled={isPrimaryDisabled}
'inline-flex h-7 items-center gap-1.5 px-2 typography-ui-label font-medium text-foreground', className={cn(
'transition-colors hover:bg-interactive-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary disabled:cursor-not-allowed disabled:opacity-50' 'inline-flex h-7 items-center gap-1.5 px-2 typography-ui-label font-medium text-foreground',
)} 'transition-colors hover:bg-interactive-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary disabled:cursor-not-allowed disabled:opacity-50'
aria-label={t('gitView.sync.syncChanges')} )}
> aria-label={t('gitView.sync.syncChanges')}
{syncAction === 'sync' ? ( >
<Icon name="loader-4" className="size-4 animate-spin" /> {syncAction === 'sync' ? (
) : ( <Icon name="loader-4" className="size-4 animate-spin" />
<Icon name="refresh" className="size-4" /> ) : (
)} <Icon name="refresh" className="size-4" />
<span className="whitespace-nowrap tabular-nums">{primaryLabel}</span> )}
</button> <span className="whitespace-nowrap tabular-nums">{primaryLabel}</span>
</button>
</span>
</TooltipTrigger> </TooltipTrigger>
<TooltipContent sideOffset={8}>{tooltipLabel}</TooltipContent> <TooltipContent sideOffset={8}>{tooltipLabel}</TooltipContent>
</Tooltip> </Tooltip>