Skip to content

Commit dbdaece

Browse files
allozaurallozaur
authored
Revert "ui: fix accessibility for hover-gated interactive elements assisted by claude(in debugging and tests) (ggml-org#24727)" (ggml-org#25098)
1 parent 7cb8576 commit dbdaece

3 files changed

Lines changed: 83 additions & 58 deletions

File tree

‎tools/ui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsList/ChatAttachmentsListItem/ChatAttachmentsListItemMcpPrompt.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@
3333

3434
{#if !readonly && onRemove}
3535
<div
36-
class="absolute top-10 right-2 flex items-center justify-center opacity-0 transition-opacity group-focus-within:opacity-100 group-hover:opacity-100"
36+
class="absolute top-10 right-2 flex items-center justify-center opacity-0 transition-opacity group-hover:opacity-100"
3737
>
3838
<ActionIcon icon={X} tooltip="Remove" stopPropagationOnClick onclick={() => onRemove?.()} />
3939
</div>

‎tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageUser/ChatMessageUserPending.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@
5656
<div class="relative flex h-6 items-center justify-between">
5757
<div class="right-0 flex items-center gap-2 opacity-100 transition-opacity">
5858
<div
59-
class="pointer-events-auto inset-0 flex items-center gap-1 opacity-0 transition-all duration-150 group-focus-within:opacity-100 group-hover:opacity-100"
59+
class="pointer-events-auto inset-0 flex items-center gap-1 opacity-0 transition-all duration-150 group-hover:opacity-100"
6060
>
6161
<ActionIcon icon={Edit} tooltip="Edit" onclick={editCtx.handleEdit} />
6262
<ActionIcon icon={Trash2} tooltip="Delete" onclick={onDelete} />

‎tools/ui/src/lib/components/app/navigation/SidebarNavigation/SidebarNavigationConversationItem.svelte‎

Lines changed: 81 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@
3939
depth = 0
4040
}: Props = $props();
4141
42+
let renderActionsDropdown = $state(false);
4243
let dropdownOpen = $state(false);
4344
4445
let isLoading = $derived(getAllLoadingChats().includes(conversation.id));
@@ -70,10 +71,26 @@
7071
}
7172
}
7273
74+
function handleMouseLeave() {
75+
if (!dropdownOpen) {
76+
renderActionsDropdown = false;
77+
}
78+
}
79+
80+
function handleMouseOver() {
81+
renderActionsDropdown = true;
82+
}
83+
7384
function handleSelect() {
7485
onSelect?.(conversation.id);
7586
}
7687
88+
$effect(() => {
89+
if (!dropdownOpen) {
90+
renderActionsDropdown = false;
91+
}
92+
});
93+
7794
onMount(() => {
7895
document.addEventListener('edit-active-conversation', handleGlobalEditEvent as EventListener);
7996
@@ -86,19 +103,23 @@
86103
});
87104
</script>
88105

89-
<div
90-
class="conversation-item group relative flex min-h-9 w-full items-center justify-between space-x-3 rounded-lg py-1.5 transition-colors hover:bg-foreground/10 {isActive
106+
<!-- svelte-ignore a11y_mouse_events_have_key_events -->
107+
<button
108+
class="group flex min-h-9 w-full cursor-pointer items-center justify-between space-x-3 rounded-lg py-1.5 text-left transition-colors hover:bg-foreground/10 {isActive
91109
? 'bg-foreground/5 text-accent-foreground'
92110
: ''} px-3"
111+
onclick={handleSelect}
112+
onmouseover={handleMouseOver}
113+
onmouseleave={handleMouseLeave}
114+
onfocusin={handleMouseOver}
115+
onfocusout={(e) => {
116+
if (!e.currentTarget.contains(e.relatedTarget as Node | null)) {
117+
handleMouseLeave();
118+
}
119+
}}
93120
>
94-
<button
95-
class="absolute inset-0 z-0 cursor-pointer rounded-lg focus:outline-none focus-visible:ring-2 focus-visible:ring-ring"
96-
onclick={handleSelect}
97-
aria-label={conversation.name}
98-
>
99-
</button>
100121
<div
101-
class="pointer-events-none relative z-10 flex min-w-0 flex-1 items-center gap-2"
122+
class="flex min-w-0 flex-1 items-center gap-2"
102123
style:padding-left="{depth * FORK_TREE_DEPTH_PADDING}px"
103124
>
104125
{#if depth > 0}
@@ -109,7 +130,7 @@
109130
<a
110131
{...props}
111132
href={RouterService.chat(conversation.forkedFromConversationId)}
112-
class="pointer-events-auto flex shrink-0 items-center text-muted-foreground transition-colors hover:text-foreground"
133+
class="flex shrink-0 items-center text-muted-foreground transition-colors hover:text-foreground"
113134
>
114135
<GitBranch class="h-3.5 w-3.5" />
115136
</a>
@@ -125,15 +146,18 @@
125146
{#if isLoading}
126147
<Tooltip.Root>
127148
<Tooltip.Trigger>
128-
<button
129-
class="stop-button pointer-events-auto flex h-4 w-4 shrink-0 cursor-pointer items-center justify-center rounded text-muted-foreground transition-colors hover:text-foreground"
149+
<div
150+
class="stop-button flex h-4 w-4 shrink-0 cursor-pointer items-center justify-center rounded text-muted-foreground transition-colors hover:text-foreground"
130151
onclick={handleStop}
152+
onkeydown={(e) => e.key === 'Enter' && handleStop(e)}
153+
role="button"
154+
tabindex="0"
131155
aria-label="Stop generation"
132156
>
133157
<Loader2 class="loading-icon h-3.5 w-3.5 animate-spin" />
134158

135159
<Square class="stop-icon hidden h-3 w-3 fill-current text-destructive" />
136-
</button>
160+
</div>
137161
</Tooltip.Trigger>
138162

139163
<Tooltip.Content>
@@ -145,50 +169,52 @@
145169
<TruncatedText text={conversation.name} class="text-sm font-medium" showTooltip={false} />
146170
</div>
147171

148-
<div class="actions pointer-events-auto relative z-20 flex items-center">
149-
<DropdownMenuActions
150-
triggerIcon={MoreHorizontal}
151-
triggerTooltip="More actions"
152-
bind:open={dropdownOpen}
153-
actions={[
154-
{
155-
icon: conversation.pinned ? PinOff : Pin,
156-
label: conversation.pinned ? 'Unpin' : 'Pin',
157-
onclick: (e: Event) => {
158-
e.stopPropagation();
159-
handleTogglePin();
160-
}
161-
},
162-
{
163-
icon: Pencil,
164-
label: 'Edit',
165-
onclick: handleEdit,
166-
shortcut: ['shift', 'cmd', 'e']
167-
},
168-
{
169-
icon: Download,
170-
label: 'Export',
171-
onclick: (e: Event) => {
172-
e.stopPropagation();
173-
conversationsStore.downloadConversation(conversation.id);
172+
{#if renderActionsDropdown}
173+
<div class="actions flex items-center">
174+
<DropdownMenuActions
175+
triggerIcon={MoreHorizontal}
176+
triggerTooltip="More actions"
177+
bind:open={dropdownOpen}
178+
actions={[
179+
{
180+
icon: conversation.pinned ? PinOff : Pin,
181+
label: conversation.pinned ? 'Unpin' : 'Pin',
182+
onclick: (e: Event) => {
183+
e.stopPropagation();
184+
handleTogglePin();
185+
}
174186
},
175-
shortcut: ['shift', 'cmd', 's']
176-
},
177-
{
178-
icon: Trash2,
179-
label: 'Delete',
180-
onclick: handleDelete,
181-
variant: 'destructive',
182-
shortcut: ['shift', 'cmd', 'd'],
183-
separator: true
184-
}
185-
]}
186-
/>
187-
</div>
188-
</div>
187+
{
188+
icon: Pencil,
189+
label: 'Edit',
190+
onclick: handleEdit,
191+
shortcut: ['shift', 'cmd', 'e']
192+
},
193+
{
194+
icon: Download,
195+
label: 'Export',
196+
onclick: (e: Event) => {
197+
e.stopPropagation();
198+
conversationsStore.downloadConversation(conversation.id);
199+
},
200+
shortcut: ['shift', 'cmd', 's']
201+
},
202+
{
203+
icon: Trash2,
204+
label: 'Delete',
205+
onclick: handleDelete,
206+
variant: 'destructive',
207+
shortcut: ['shift', 'cmd', 'd'],
208+
separator: true
209+
}
210+
]}
211+
/>
212+
</div>
213+
{/if}
214+
</button>
189215

190216
<style>
191-
.conversation-item {
217+
button {
192218
:global([data-slot='dropdown-menu-trigger']:not([data-state='open'])) {
193219
opacity: 0;
194220
}
@@ -213,8 +239,7 @@
213239
}
214240
}
215241
216-
&:is(:hover) .stop-button,
217-
&:focus-within .stop-button {
242+
&:is(:hover) .stop-button {
218243
:global(.stop-icon) {
219244
display: block;
220245
}

0 commit comments

Comments
 (0)