mirror of
https://github.com/wukko/cobalt.git
synced 2024-11-15 12:50:01 +00:00
web/changelogs: focus on version on page load
This commit is contained in:
parent
b540703de8
commit
3218adf5fd
2 changed files with 8 additions and 2 deletions
|
@ -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>
|
||||||
|
|
|
@ -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}
|
||||||
>
|
>
|
||||||
|
|
Loading…
Reference in a new issue