From 9f09d2adf8354363b0b1d3344a87ff53cc619ac9 Mon Sep 17 00:00:00 2001
From: silentoplayz <jacwoo21@outlook.com>
Date: Tue, 3 Nov 2026 14:16:59 -0500
Subject: [PATCH] fix(a11y): note title generation, note panels and channel
 threads and edits keep keyboard focus

---
 src/lib/components/channel/Channel.svelte     | 26 +++++++++----------
 .../channel/Messages/Message.svelte           |  8 ++++--
 src/lib/components/notes/NoteEditor.svelte    | 18 +++++++++++--
 3 files changed, 35 insertions(+), 17 deletions(-)

diff --git a/src/lib/components/channel/Channel.svelte b/src/lib/components/channel/Channel.svelte
index aa9a892c6e..a44090162d 100644
--- a/src/lib/components/channel/Channel.svelte
+++ b/src/lib/components/channel/Channel.svelte
@@ -141,6 +141,16 @@
 		);
 	};
 
+	const closeThread = async () => {
+		const messageId = threadId;
+		threadId = null;
+
+		await tick();
+		if (document.activeElement === document.body) {
+			document.querySelector<HTMLElement>(`#message-${messageId} .reply-in-thread-button`)?.focus();
+		}
+	};
+
 	const pinHandler = (
 		messageId: string,
 		pinned: boolean,
@@ -532,22 +542,14 @@
 
 		{#if !largeScreen}
 			{#if threadId !== null}
-				<Drawer
-					show={threadId !== null}
-					ariaLabel={$i18n.t('Thread')}
-					onClose={() => {
-						threadId = null;
-					}}
-				>
+				<Drawer show={threadId !== null} ariaLabel={$i18n.t('Thread')} onClose={closeThread}>
 					<div class=" {threadId !== null ? ' h-screen  w-full' : 'px-6 py-4'} h-full">
 						<Thread
 							{threadId}
 							{channel}
 							bind:chatInputElement={threadChatInputElement}
 							onPin={pinHandler}
-							onClose={() => {
-								threadId = null;
-							}}
+							onClose={closeThread}
 						/>
 					</div>
 				</Drawer>
@@ -567,9 +569,7 @@
 						{channel}
 						bind:chatInputElement={threadChatInputElement}
 						onPin={pinHandler}
-						onClose={() => {
-							threadId = null;
-						}}
+						onClose={closeThread}
 					/>
 				</div>
 			</ResizableSidePanel>
diff --git a/src/lib/components/channel/Messages/Message.svelte b/src/lib/components/channel/Messages/Message.svelte
index f67f349553..2ee9395eeb 100644
--- a/src/lib/components/channel/Messages/Message.svelte
+++ b/src/lib/components/channel/Messages/Message.svelte
@@ -122,6 +122,7 @@
 	};
 
 	let edit = false;
+	let editButtonElement: HTMLButtonElement;
 	let editedContent = null;
 	let showDeleteConfirmDialog = false;
 	$: renderedMessageId = message ? (id ? `${id}-${message.id}` : message.id) : null;
@@ -334,7 +335,7 @@
 								<Tooltip content={$i18n.t('Reply in Thread')}>
 									<button
 										aria-label={$i18n.t('Reply in Thread')}
-										class="hover:bg-gray-100 dark:hover:bg-gray-800 transition rounded-lg p-1"
+										class="hover:bg-gray-100 dark:hover:bg-gray-800 transition rounded-lg p-1 reply-in-thread-button"
 										on:click={() => {
 											onThread(message.id);
 										}}
@@ -348,6 +349,7 @@
 								{#if onEdit}
 									<Tooltip content={$i18n.t('Edit')}>
 										<button
+											bind:this={editButtonElement}
 											aria-label={$i18n.t('Edit')}
 											id="edit-message-{renderedMessageId}"
 											class="hover:bg-gray-100 dark:hover:bg-gray-800 transition rounded-lg p-1"
@@ -640,9 +642,11 @@
 									<button
 										id="close-edit-message-button"
 										class="flex h-7 shrink-0 items-center justify-center gap-1.5 rounded-lg px-2.5 text-xs font-normal text-gray-600 transition hover:bg-gray-100 hover:text-gray-900 disabled:opacity-60 dark:text-gray-400 dark:hover:bg-gray-850 dark:hover:text-white"
-										on:click={() => {
+										on:click={async () => {
 											edit = false;
 											editedContent = null;
+											await tick();
+											editButtonElement?.focus();
 										}}
 									>
 										{$i18n.t('Cancel')}
diff --git a/src/lib/components/notes/NoteEditor.svelte b/src/lib/components/notes/NoteEditor.svelte
index 68397d0b7a..cc80492ef6 100644
--- a/src/lib/components/notes/NoteEditor.svelte
+++ b/src/lib/components/notes/NoteEditor.svelte
@@ -362,9 +362,12 @@
 	});
 	let noteCommentCount = 0;
 	$: if (currentNoteComments) showNoteChat = true;
-	const closeNotePanel = () => {
+	const closeNotePanel = async () => {
 		currentNoteComments = null;
 		showNoteChat = false;
+
+		await tick();
+		if (document.activeElement === document.body) noteChatButtonElement?.focus();
 	};
 	let noteChatId = null;
 	let noteChatLoading = false;
@@ -390,6 +393,9 @@
 	let ignoreBlur = false;
 	let titleInputFocused = false;
 	let titleGenerating = false;
+	let titleInputElement: HTMLInputElement;
+	let noteChatButtonElement: HTMLButtonElement;
+	let pagesToggleElement: HTMLButtonElement;
 
 	let dragged = false;
 	let loading = false;
@@ -579,6 +585,7 @@ ${content}
 
 		titleGenerating = false;
 		await tick();
+		if (document.activeElement === document.body) titleInputElement?.focus();
 		changeDebounceHandler();
 	};
 
@@ -1150,6 +1157,7 @@ ${content}
 									? 'ml-1'
 									: ''}"
 								type="text"
+								bind:this={titleInputElement}
 								bind:value={note.title}
 								placeholder={titleGenerating ? $i18n.t('Generating...') : $i18n.t('Title')}
 								aria-label={$i18n.t('Title')}
@@ -1249,6 +1257,7 @@ ${content}
 										type="button"
 										class="p-1 bg-transparent hover:bg-white/5 transition rounded-lg"
 										aria-label={$i18n.t('Chat')}
+										bind:this={noteChatButtonElement}
 										on:click={openNoteChat}
 									>
 										<ChatBubbleOval className="size-4" strokeWidth="1.8" />
@@ -1423,6 +1432,7 @@ ${content}
 										class="flex max-w-full items-center gap-1 bg-transparent text-xs text-gray-500 hover:text-gray-900 dark:hover:text-gray-100 transition"
 										aria-expanded={showNoteTabs}
 										aria-controls="note-tabs-panel"
+										bind:this={pagesToggleElement}
 										on:click={() => {
 											showNoteTabs = !showNoteTabs;
 										}}
@@ -1521,7 +1531,11 @@ ${content}
 							floating
 						>
 							<NoteTabs
-								onClose={() => (showNoteTabs = false)}
+								onClose={async () => {
+									showNoteTabs = false;
+									await tick();
+									pagesToggleElement?.focus();
+								}}
 								pages={note.data.pages.map((page) =>
 									page.id === 'main' && page.inherit_note_title !== false
 										? { ...page, title: note.title || $i18n.t('Untitled') }