From a9fdab10f10b4a8d36cfa09990f607d4a7709a88 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20F=2E?=
 <83635112+bjoernch@users.noreply.github.com>
Date: Tue, 21 Apr 2026 22:21:23 +0200
Subject: [PATCH] fix: improve keyboard navigation and screen-reader labels
 (#1445)

---
 .../components/header/header-avatar.svelte    |  2 +-
 frontend/src/lib/components/sidebar.svelte    |  6 ++++-
 .../components/table/advanced-table.svelte    | 11 +++++++++-
 .../lib/components/ui/table/table-head.svelte |  1 +
 .../login/alternative/code/+page.svelte       |  9 +++++++-
 .../login/alternative/email/+page.svelte      |  9 +++++++-
 tests/specs/navigation.spec.ts                | 22 +++++++++++++++++++
 7 files changed, 55 insertions(+), 5 deletions(-)
 create mode 100644 tests/specs/navigation.spec.ts

diff --git a/frontend/src/lib/components/header/header-avatar.svelte b/frontend/src/lib/components/header/header-avatar.svelte
index 119a4c41..0c7f96c8 100644
--- a/frontend/src/lib/components/header/header-avatar.svelte
+++ b/frontend/src/lib/components/header/header-avatar.svelte
@@ -17,7 +17,7 @@
 </script>
 
 <DropdownMenu.Root>
-	<DropdownMenu.Trigger
+	<DropdownMenu.Trigger aria-label={m.my_account()}
 		><Avatar.Root class="size-9">
 			<Avatar.Image src={cachedProfilePicture.getUrl($userStore!.id)} />
 		</Avatar.Root></DropdownMenu.Trigger
diff --git a/frontend/src/lib/components/sidebar.svelte b/frontend/src/lib/components/sidebar.svelte
index d2ed211a..bd1607b9 100644
--- a/frontend/src/lib/components/sidebar.svelte
+++ b/frontend/src/lib/components/sidebar.svelte
@@ -77,7 +77,11 @@
 	const delayUpdateLink = () => `${layout().total * ROW_STAGGER}ms`;
 </script>
 
-<nav class="text-muted-foreground grid gap-2 text-sm">
+<nav
+	class="text-muted-foreground grid gap-2 text-sm"
+	aria-label={m.settings()}
+	data-sveltekit-keepfocus
+>
 	{#each items as item, i}
 		{#if item.children?.length}
 			{@const id = groupId(item, i)}
diff --git a/frontend/src/lib/components/table/advanced-table.svelte b/frontend/src/lib/components/table/advanced-table.svelte
index 77ccd98e..98a393d9 100644
--- a/frontend/src/lib/components/table/advanced-table.svelte
+++ b/frontend/src/lib/components/table/advanced-table.svelte
@@ -223,7 +223,16 @@
 						{/if}
 
 						{#each visibleColumns as column}
-							<Table.Head class={cn(column.sortable && 'p-0')}>
+							<Table.Head
+								class={cn(column.sortable && 'p-0')}
+								aria-sort={column.sortable
+									? requestOptions.sort?.column === column.column
+										? requestOptions.sort?.direction === 'asc'
+											? 'ascending'
+											: 'descending'
+										: 'none'
+									: undefined}
+							>
 								{#if column.sortable}
 									<Button
 										variant="ghost"
diff --git a/frontend/src/lib/components/ui/table/table-head.svelte b/frontend/src/lib/components/ui/table/table-head.svelte
index eb0180cf..0fe7a26c 100644
--- a/frontend/src/lib/components/ui/table/table-head.svelte
+++ b/frontend/src/lib/components/ui/table/table-head.svelte
@@ -13,6 +13,7 @@
 <th
 	bind:this={ref}
 	data-slot="table-head"
+	scope="col"
 	class={cn(
 		'text-foreground h-12 px-4 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
 		className
diff --git a/frontend/src/routes/login/alternative/code/+page.svelte b/frontend/src/routes/login/alternative/code/+page.svelte
index a9f861b9..aa3236e9 100644
--- a/frontend/src/routes/login/alternative/code/+page.svelte
+++ b/frontend/src/routes/login/alternative/code/+page.svelte
@@ -68,7 +68,14 @@
 		<p class="text-muted-foreground mt-2">{m.enter_the_code_you_received_to_sign_in()}</p>
 	{/if}
 	<form onsubmit={preventDefault(authenticate)} class="w-full max-w-[450px]">
-		<Input id="Code" class="mt-7" placeholder={m.code()} bind:value={code} type="text" />
+		<Input
+			id="Code"
+			class="mt-7"
+			placeholder={m.code()}
+			aria-label={m.code()}
+			bind:value={code}
+			type="text"
+		/>
 		<div class="mt-8 flex justify-between gap-2">
 			<Button variant="secondary" class="flex-1" href={backHref}>{m.go_back()}</Button>
 			<Button class="flex-1" type="submit" {isLoading}>{m.submit()}</Button>
diff --git a/frontend/src/routes/login/alternative/email/+page.svelte b/frontend/src/routes/login/alternative/email/+page.svelte
index d6a31f56..3cef4135 100644
--- a/frontend/src/routes/login/alternative/email/+page.svelte
+++ b/frontend/src/routes/login/alternative/email/+page.svelte
@@ -63,7 +63,14 @@
 			<p class="text-muted-foreground mt-2" in:fade>
 				{m.enter_your_email_address_to_receive_an_email_with_a_login_code()}
 			</p>
-			<Input id="Email" class="mt-7" placeholder={m.your_email()} bind:value={email} type="email" />
+			<Input
+				id="Email"
+				class="mt-7"
+				placeholder={m.your_email()}
+				aria-label={m.email()}
+				bind:value={email}
+				type="email"
+			/>
 			<div class="mt-8 flex justify-between gap-2">
 				<Button variant="secondary" class="flex-1" href={'/login/alternative' + page.url.search}
 					>{m.go_back()}</Button
diff --git a/tests/specs/navigation.spec.ts b/tests/specs/navigation.spec.ts
new file mode 100644
index 00000000..b3b3c3df
--- /dev/null
+++ b/tests/specs/navigation.spec.ts
@@ -0,0 +1,22 @@
+import test, { expect } from '@playwright/test';
+import { cleanupBackend } from '../utils/cleanup.util';
+
+test.beforeEach(async () => await cleanupBackend());
+
+test('settings sidebar has an accessible name', async ({ page }) => {
+	await page.goto('/settings/account');
+
+	const nav = page.getByRole('navigation', { name: 'Settings' });
+	await expect(nav).toBeVisible();
+});
+
+test('keyboard focus stays on sidebar link after navigating', async ({ page }) => {
+	await page.goto('/settings/account');
+
+	const auditLog = page.getByRole('link', { name: 'Audit Log' });
+	await auditLog.focus();
+	await page.keyboard.press('Enter');
+
+	await page.waitForURL('**/settings/audit-log');
+	await expect(auditLog).toBeFocused();
+});