From 37a5c65ce0caf04aa63f6cb975f3ee83f48c2d9c Mon Sep 17 00:00:00 2001
From: Johannes Fleck <johannes.fleck@stackable.tech>
Date: Fri, 25 Sep 2026 10:15:12 +0200
Subject: [PATCH 1/5] fix: reorder headings

---
 .../components/storage/landing/StorageConnectForm.svelte  | 2 +-
 src/routes/(app)/storage/+error.svelte                    | 8 ++++----
 src/routes/(app)/storage/+page.svelte                     | 2 +-
 .../(app)/storage/[bucket]/[...prefix]/+page.svelte       | 6 +++---
 src/routes/(app)/storage/connections/+page.svelte         | 2 +-
 .../(app)/storage/connections/[id]/edit/+page.svelte      | 2 +-
 6 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/lib/components/storage/landing/StorageConnectForm.svelte b/src/lib/components/storage/landing/StorageConnectForm.svelte
index c93c963b..2682466a 100644
--- a/src/lib/components/storage/landing/StorageConnectForm.svelte
+++ b/src/lib/components/storage/landing/StorageConnectForm.svelte
@@ -95,7 +95,7 @@
     <StorageConnectionSidebar onselect={selectConnection} />
 
     <div class="min-w-0 flex-1">
-      <h1 class="mb-1 text-xl font-semibold">{m.storage_connect_title()}</h1>
+      <h2 class="mb-1 text-xl font-semibold">{m.storage_connect_title()}</h2>
       <p class="text-base-content/60 mb-6 text-sm">{m.storage_connect_subtitle()}</p>
 
       <form
diff --git a/src/routes/(app)/storage/+error.svelte b/src/routes/(app)/storage/+error.svelte
index bcc2ce6a..a27797d3 100644
--- a/src/routes/(app)/storage/+error.svelte
+++ b/src/routes/(app)/storage/+error.svelte
@@ -47,12 +47,12 @@
     >
       {m.storage_error_title()}
     </p>
-    <h1 class="text-base-content text-3xl font-bold">
+    <p class="text-base-content text-3xl font-bold">
       {page.status}
-    </h1>
-    <p class="text-base-content/70 mt-2 max-w-sm text-sm">
-      {errorMessage ?? page.error?.message ?? ''}
     </p>
+    <h2 class="text-base-content/70 mt-2 max-w-sm text-sm">
+      {errorMessage ?? page.error?.message ?? ''}
+    </h2>
   </div>
 
   <div class="flex flex-wrap items-center justify-center gap-3">
diff --git a/src/routes/(app)/storage/+page.svelte b/src/routes/(app)/storage/+page.svelte
index f0e99a79..81aa9cc3 100644
--- a/src/routes/(app)/storage/+page.svelte
+++ b/src/routes/(app)/storage/+page.svelte
@@ -27,7 +27,7 @@
         <span class="loading loading-md loading-spinner text-primary" aria-hidden="true"></span>
       </div>
     {/if}
-    <h1 class="mb-1 text-xl font-semibold">{m.storage_buckets_label()}</h1>
+    <h2 class="mb-1 text-xl font-semibold">{m.storage_buckets_label()}</h2>
     <p class="text-base-content/60 mb-6 text-sm">{m.storage_buckets_subtitle()}</p>
     <BucketGrid buckets={storage.buckets} />
     <RecentItems />
diff --git a/src/routes/(app)/storage/[bucket]/[...prefix]/+page.svelte b/src/routes/(app)/storage/[bucket]/[...prefix]/+page.svelte
index 49c8f26b..0ff5917f 100644
--- a/src/routes/(app)/storage/[bucket]/[...prefix]/+page.svelte
+++ b/src/routes/(app)/storage/[bucket]/[...prefix]/+page.svelte
@@ -64,10 +64,10 @@
       >
         {m.storage_error_title()}
       </p>
-      <h1 class="text-base-content text-3xl font-bold">403</h1>
-      <p class="text-base-content/70 mt-2 max-w-sm text-sm">
+      <p class="text-base-content text-3xl font-bold">403</p>
+      <h2 class="text-base-content/70 mt-2 max-w-sm text-sm">
         {m.storage_error_access_denied({ bucket: data.bucket })}
-      </p>
+      </h2>
     </div>
 
     <div class="flex flex-wrap items-center justify-center gap-3">
diff --git a/src/routes/(app)/storage/connections/+page.svelte b/src/routes/(app)/storage/connections/+page.svelte
index 7f5218b3..9e159e9e 100644
--- a/src/routes/(app)/storage/connections/+page.svelte
+++ b/src/routes/(app)/storage/connections/+page.svelte
@@ -98,7 +98,7 @@
     {m.storage_connections_back()}
   </a>
 
-  <h1 class="mb-1 text-xl font-semibold">{m.storage_connections_title()}</h1>
+  <h2 class="mb-1 text-xl font-semibold">{m.storage_connections_title()}</h2>
   <p class="text-base-content/60 mb-6 text-sm">{m.storage_connections_subtitle()}</p>
 
   {#if !loaded}
diff --git a/src/routes/(app)/storage/connections/[id]/edit/+page.svelte b/src/routes/(app)/storage/connections/[id]/edit/+page.svelte
index e09ebb98..86c19127 100644
--- a/src/routes/(app)/storage/connections/[id]/edit/+page.svelte
+++ b/src/routes/(app)/storage/connections/[id]/edit/+page.svelte
@@ -157,7 +157,7 @@
   </div>
 </Modal>
 
-<h1 class="mb-1 text-xl font-semibold">{m.storage_connection_edit_title()}</h1>
+<h2 class="mb-1 text-xl font-semibold">{m.storage_connection_edit_title()}</h2>
 
 {#if !loaded}
   <div class="flex items-center justify-center py-12">

From 23df7f643dc2a9ea19e93abc1e7d765ffa8fcbce Mon Sep 17 00:00:00 2001
From: Johannes Fleck <johannes.fleck@stackable.tech>
Date: Fri, 25 Sep 2026 10:17:40 +0200
Subject: [PATCH 2/5] feat: add skip to content link

---
 messages/de.json                |  1 +
 messages/en.json                |  1 +
 src/routes/(app)/+layout.svelte | 17 ++++++++++++++++-
 3 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/messages/de.json b/messages/de.json
index 6173dea8..203b7f11 100644
--- a/messages/de.json
+++ b/messages/de.json
@@ -25,6 +25,7 @@
   "sidebar_expand": "Seitenleiste ausklappen",
   "sidebar_collapse": "Seitenleiste einklappen",
   "sidebar_collapse_label": "Einklappen",
+  "skip_to_content": "Zum Hauptinhalt springen",
   "header_open_nav": "Navigation öffnen",
   "header_close_nav": "Navigation schließen",
   "header_user_menu": "Benutzermenü",
diff --git a/messages/en.json b/messages/en.json
index b9216ce0..b9770c86 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -25,6 +25,7 @@
   "sidebar_expand": "Expand sidebar",
   "sidebar_collapse": "Collapse sidebar",
   "sidebar_collapse_label": "Collapse",
+  "skip_to_content": "Skip to main content",
   "header_open_nav": "Open navigation",
   "header_close_nav": "Close navigation",
   "header_user_menu": "User menu",
diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
index f538f0f6..a5f39bf8 100644
--- a/src/routes/(app)/+layout.svelte
+++ b/src/routes/(app)/+layout.svelte
@@ -43,6 +43,17 @@
 </svelte:head>
 
 <div class="bg-base-100 flex h-dvh overflow-hidden">
+  <!-- Bypass block (WCAG 2.4.1): first tab stop on every page. -->
+  <a
+    href="#main-content"
+    class="
+      btn btn-primary btn-sm sr-only
+      focus:not-sr-only focus:absolute focus:top-3 focus:left-3 focus:z-100
+    "
+  >
+    {m.skip_to_content()}
+  </a>
+
   <Sidebar
     bind:collapsed={sidebarCollapsed}
     bind:mobileOpen
@@ -57,7 +68,11 @@
       onToggleMobile={() => (mobileOpen = !mobileOpen)}
     />
 
-    <main class="bg-base-200 flex-1 overflow-auto p-6">
+    <main
+      id="main-content"
+      tabindex="-1"
+      class="bg-base-200 flex-1 overflow-auto p-6 focus:outline-none"
+    >
       {@render children()}
     </main>
   </div>

From 19f706cfd82ed1f8b020ecac86927e661269ffc0 Mon Sep 17 00:00:00 2001
From: Johannes Fleck <johannes.fleck@stackable.tech>
Date: Fri, 25 Sep 2026 10:18:58 +0200
Subject: [PATCH 3/5] fix: color usage

---
 src/lib/components/storage/explorer/SelectionToolbar.svelte  | 2 +-
 src/lib/components/storage/explorer/StorageBreadcrumb.svelte | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/storage/explorer/SelectionToolbar.svelte b/src/lib/components/storage/explorer/SelectionToolbar.svelte
index 91dd742f..6f038a0e 100644
--- a/src/lib/components/storage/explorer/SelectionToolbar.svelte
+++ b/src/lib/components/storage/explorer/SelectionToolbar.svelte
@@ -59,7 +59,7 @@
 
       <div class="ml-auto">
         <button
-          class="btn btn-ghost btn-xs gap-1 text-white"
+          class="btn btn-ghost btn-xs gap-1"
           title={m.storage_action_refresh()}
           onclick={() => storage.refresh()}
           disabled={storage.loading}
diff --git a/src/lib/components/storage/explorer/StorageBreadcrumb.svelte b/src/lib/components/storage/explorer/StorageBreadcrumb.svelte
index 7ac0e33d..e4d4f049 100644
--- a/src/lib/components/storage/explorer/StorageBreadcrumb.svelte
+++ b/src/lib/components/storage/explorer/StorageBreadcrumb.svelte
@@ -105,7 +105,7 @@
     <button
       class="
           tooltip tooltip-bottom btn btn-ghost btn-xs group/pin z-60 size-5 p-0
-          {pinned ? 'hover:text-error' : 'hover:text-white'}
+          {pinned ? 'hover:text-error' : 'hover:text-primary'}
         "
       data-tip={pinned ? m.storage_action_unpin() : m.storage_action_pin()}
       aria-label={pinned ? m.storage_action_unpin() : m.storage_action_pin()}

From a7eb0a72dbfdce54fdf378d9d2c37feaf1aa36cb Mon Sep 17 00:00:00 2001
From: Johannes Fleck <johannes.fleck@stackable.tech>
Date: Fri, 25 Sep 2026 10:20:06 +0200
Subject: [PATCH 4/5] feat: explicit for/id on input

---
 src/lib/components/trino/StatementResult.svelte | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/lib/components/trino/StatementResult.svelte b/src/lib/components/trino/StatementResult.svelte
index 5548e608..9c842343 100644
--- a/src/lib/components/trino/StatementResult.svelte
+++ b/src/lib/components/trino/StatementResult.svelte
@@ -206,11 +206,13 @@
             {m.trino_export_csv()}
           </button>
           <label
+            for="{uid}-include-headers"
             class="
               flex cursor-pointer items-center gap-1 text-xs whitespace-nowrap
             "
           >
             <input
+              id="{uid}-include-headers"
               type="checkbox"
               class="checkbox checkbox-xs checkbox-primary size-3.5"
               checked={includeHeaders}

From 2810665947a30f28ffbc9645209b2e9c12cd0dc5 Mon Sep 17 00:00:00 2001
From: Johannes Fleck <johannes.fleck@stackable.tech>
Date: Fri, 25 Sep 2026 10:25:26 +0200
Subject: [PATCH 5/5] fix: make navbar not focusable if hidden

also drop unused sidebarEl
---
 .../components/layout/sidebar/Sidebar.svelte  | 35 +++++++++++++++++++
 1 file changed, 35 insertions(+)

diff --git a/src/lib/components/layout/sidebar/Sidebar.svelte b/src/lib/components/layout/sidebar/Sidebar.svelte
index 8b517ace..80935e6e 100644
--- a/src/lib/components/layout/sidebar/Sidebar.svelte
+++ b/src/lib/components/layout/sidebar/Sidebar.svelte
@@ -5,6 +5,7 @@
   import type { Component } from 'svelte';
   import IconChevronLeft from 'virtual:icons/material-symbols/chevron-left';
   import IconChevronRight from 'virtual:icons/material-symbols/chevron-right';
+  import { MediaQuery } from 'svelte/reactivity';
   import type { NavItem } from '$lib/types/navigation.js';
   import { getNavSections } from './nav-items.js';
 
@@ -20,6 +21,10 @@
 
   const sections = $derived(getNavSections({ storageBrowserEnabled }));
 
+  // make mobile navbar not focusable if its hidden
+  const isDesktop = new MediaQuery('min-width: 64rem', true);
+  const hiddenFromUser = $derived(!isDesktop.current && !mobileOpen);
+
   function isActive(href: string): boolean {
     if (href === '/') return page.url.pathname === '/';
     return page.url.pathname.startsWith(href);
@@ -40,8 +45,35 @@
   }
 
   let sidebarEl: HTMLElement | undefined = $state();
+
+  $effect(() => {
+    if (isDesktop.current || !mobileOpen || !sidebarEl) return;
+    sidebarEl.focus();
+  });
+
+  function handleWindowKeydown(event: KeyboardEvent) {
+    if (isDesktop.current || !mobileOpen) return;
+
+    if (event.key === 'Escape') {
+      event.preventDefault();
+      mobileOpen = false;
+    }
+  }
+
+  // Tabbing off either end of the open panel would land on the page behind the
+  // backdrop, so send focus back to the top of the panel instead.
+  function handleFocusOut(event: FocusEvent) {
+    if (isDesktop.current || !mobileOpen) return;
+
+    const next = event.relatedTarget as Node | null;
+    if (next && sidebarEl?.contains(next)) return;
+
+    sidebarEl?.focus();
+  }
 </script>
 
+<svelte:window onkeydown={handleWindowKeydown} />
+
 {#snippet navIcon(IconComponent: Component)}
   <IconComponent class="h-5 w-5 shrink-0" aria-hidden="true" />
 {/snippet}
@@ -59,8 +91,11 @@
 <!-- Sidebar -->
 <aside
   bind:this={sidebarEl}
+  onfocusout={handleFocusOut}
   id="sidebar"
   aria-label={m.sidebar_label()}
+  tabindex="-1"
+  inert={hiddenFromUser}
   class="border-base-300 bg-base-200 fixed inset-y-0 left-0 z-50 flex flex-col border-r
     transition-[transform,width] duration-200 ease-out
     lg:relative lg:inset-auto lg:z-auto lg:translate-x-0