refac

src/lib/components/common/Collapsible.svelte

@@ -140,8 +140,8 @@
 			class="{buttonClassName} cursor-pointer"
 			on:click={(e) => {
 				e.stopPropagation();
+				toggleOpen();
 			}}
-			on:pointerup={toggleOpen}
 		>
 			<div>
 				<div class="flex items-start justify-between">
@@ -162,7 +162,7 @@
 					{#if open && !hide}
 						<div
 							transition:slide={{ duration: 300, easing: quintOut, axis: 'y' }}
-							on:pointerup={(e) => {
+							on:click={(e) => {
 								e.stopPropagation();
 							}}
 						>

src/lib/components/common/Folder.svelte

@@ -175,9 +175,6 @@
 					{#if onAdd}
 						<button
 							class="absolute z-10 right-2 invisible group-hover:visible self-center flex items-center dark:text-gray-300"
-							on:pointerup={(e) => {
-								e.stopPropagation();
-							}}
 							on:click={(e) => {
 								e.stopPropagation();
 								onAdd();

src/lib/components/common/ToolCallDisplay.svelte

@@ -95,6 +95,19 @@
 
 	$: parsedArgs = parseArguments(args);
 	$: parsedResult = parseJSONString(result);
+
+	const toggleOpen = () => {
+		open = !open;
+	};
+
+	const toggleOpenOnKeydown = (event: KeyboardEvent) => {
+		if (event.key !== 'Enter' && event.key !== ' ') {
+			return;
+		}
+
+		event.preventDefault();
+		toggleOpen();
+	};
 </script>
 
 <div {id} class={className}>
@@ -119,12 +132,12 @@
 		</div>
 	{:else}
 		<!-- Tool call display -->
-		<!-- svelte-ignore a11y-no-static-element-interactions -->
 		<div
 			class="{buttonClassName} cursor-pointer"
-			on:pointerup={() => {
+			role="button"
-				open = !open;
+			tabindex="0"
-			}}
+			on:click={toggleOpen}
+			on:keydown={toggleOpenOnKeydown}
 		>
 			<div
 				class="w-full max-w-full font-normal flex items-center gap-1.5 {isExecuting

src/lib/components/layout/Sidebar.svelte

@@ -1476,7 +1476,6 @@
 										type="button"
 										class="flex items-center justify-center w-7 h-7 rounded-lg text-gray-300 hover:text-gray-500 dark:text-gray-600 dark:hover:text-gray-400 transition-colors duration-100"
 										aria-label={$i18n.t('More')}
-										on:pointerup|stopPropagation
 									>
 										<MoreHorizontalIcon className="size-3.5" strokeWidth="2" />
 									</button>

src/lib/components/layout/Sidebar/RecursiveFolder.svelte

@@ -754,6 +754,7 @@
 				role="button"
 				tabindex="0"
 				on:click={async (e) => {
+					e.stopPropagation();
 					if (shouldIgnoreRowClick(e.target)) return;
 					if (clickTimer) {
 						clearTimeout(clickTimer);
@@ -772,9 +773,6 @@
 						openFolderHandler();
 					}
 				}}
-				on:pointerup={(e) => {
-					e.stopPropagation();
-				}}
 			>
 				<button
 					class="text-gray-600 dark:text-gray-400 transition-all p-1 hover:bg-gray-50/40 dark:hover:bg-gray-800/40 rounded-lg"

src/lib/components/layout/Sidebar/Section.svelte

@@ -131,8 +131,6 @@
 						class="group flex flex-1 h-full items-center gap-1 text-left text-xs text-gray-400 hover:text-gray-500 dark:text-gray-500 dark:hover:text-gray-400 transition-colors duration-100 {buttonClassName}"
 						aria-expanded={open}
 						aria-controls="{id}-content"
-						on:pointerup|stopPropagation
-						on:click={() => setOpen(!open)}
 					>
 						<span>{name}</span>
 						<span
@@ -143,16 +141,16 @@
 						</span>
 					</button>
 
-					<slot name="action" />
+					<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-static-element-interactions -->
+					<div class="contents" on:click={(e) => e.stopPropagation()}>
+						<slot name="action" />
+					</div>
 
 					{#if onAdd}
 						<button
 							type="button"
 							class="flex items-center justify-center w-7 h-7 rounded-lg text-gray-300 hover:text-gray-500 dark:text-gray-600 dark:hover:text-gray-400 transition-colors duration-100"
 							aria-label={onAddLabel}
-							on:pointerup={(e) => {
-								e.stopPropagation();
-							}}
 							on:click={(e) => {
 								e.stopPropagation();
 								onAdd();