web/changelogs: focus on version on page load

This commit is contained in:
dumbmoron 2024-07-23 11:42:13 +00:00
parent b540703de8
commit 3218adf5fd
No known key found for this signature in database
2 changed files with 8 additions and 2 deletions

View file

@ -1,6 +1,7 @@
<script lang="ts"> <script lang="ts">
import Skeleton from "$components/misc/Skeleton.svelte"; import Skeleton from "$components/misc/Skeleton.svelte";
import type { Optional } from "$lib/types/generic"; import type { Optional } from "$lib/types/generic";
import { onMount } from "svelte";
export let version: string; export let version: string;
export let title: string; export let title: string;
@ -22,12 +23,18 @@
date.getUTCFullYear() date.getUTCFullYear()
].join(' '); ].join(' ');
} }
onMount(() => {
const to_focus: HTMLElement | null =
document.querySelector("[data-first-focus]");
to_focus?.focus();
});
</script> </script>
<main> <main>
<div id="changelog-header" class:no-padding={!banner}> <div id="changelog-header" class:no-padding={!banner}>
<div class="changelog-info"> <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 class="changelog-date">{formatDate(date)}</div>
</div> </div>
<h1 class="changelog-title">{title}</h1> <h1 class="changelog-title">{title}</h1>

View file

@ -87,7 +87,6 @@
<div <div
class="news" class="news"
tabindex="-1" tabindex="-1"
data-first-focus
data-focus-ring-hidden data-focus-ring-hidden
on:wheel={handleScroll} on:wheel={handleScroll}
> >