From 3218adf5fde2767fb07140d14811521d4775fb29 Mon Sep 17 00:00:00 2001
From: dumbmoron <log@riseup.net>
Date: Tue, 23 Jul 2024 11:42:13 +0000
Subject: [PATCH] web/changelogs: focus on version on page load

---
 web/src/components/changelog/ChangelogEntry.svelte | 9 ++++++++-
 web/src/routes/updates/+page.svelte                | 1 -
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/web/src/components/changelog/ChangelogEntry.svelte b/web/src/components/changelog/ChangelogEntry.svelte
index 75748940..9fa7153c 100644
--- a/web/src/components/changelog/ChangelogEntry.svelte
+++ b/web/src/components/changelog/ChangelogEntry.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
     import Skeleton from "$components/misc/Skeleton.svelte";
     import type { Optional } from "$lib/types/generic";
+    import { onMount } from "svelte";
 
     export let version: string;
     export let title: string;
@@ -22,12 +23,18 @@
             date.getUTCFullYear()
         ].join(' ');
     }
+
+    onMount(() => {
+        const to_focus: HTMLElement | null =
+            document.querySelector("[data-first-focus]");
+        to_focus?.focus();
+    });
 </script>
 
 <main>
     <div id="changelog-header" class:no-padding={!banner}>
         <div class="changelog-info">
-            <div class="changelog-version">{version}</div>
+            <div class="changelog-version" data-first-focus tabindex="-1">{version}</div>
             <div class="changelog-date">{formatDate(date)}</div>
         </div>
         <h1 class="changelog-title">{title}</h1>
diff --git a/web/src/routes/updates/+page.svelte b/web/src/routes/updates/+page.svelte
index 5e624e6d..475e9397 100644
--- a/web/src/routes/updates/+page.svelte
+++ b/web/src/routes/updates/+page.svelte
@@ -87,7 +87,6 @@
 <div
     class="news"
     tabindex="-1"
-    data-first-focus
     data-focus-ring-hidden
     on:wheel={handleScroll}
 >