Mirrors/cobalt
1
0
Fork 0
mirror of https://github.com/wukko/cobalt.git synced 2024-11-15 12:50:01 +00:00
Code Issues Projects Releases Packages Wiki Activity

web/settings: focus the page after navigation

Browse source 
mobile: focus page header
desktop: focus page content
This commit is contained in:
wukko 2024-07-23 14:04:19 +06:00
parent c9ca0d51d9
commit 1234cc1083
No known key found for this signature in database
GPG key ID: 3E30B3F26C7B4AA2
2 changed files with 28 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
web/src/routes/+layout.svelte
View file

@ -366,6 +366,18 @@
margin-block: 0;
}
:global(
h1:focus-visible,
h2:focus-visible,
h3:focus-visible,
h4:focus-visible,
h5:focus-visible,
h6:focus-visible,
main:focus-visible
) {
box-shadow: none !important;
}
:global(h1) {
font-size: 24px;
letter-spacing: -1px;

26
web/src/routes/settings/+layout.svelte
View file

@ -29,16 +29,17 @@
$: currentPageTitle = $page.url.pathname.split("/").at(-1);
$: stringPageTitle =
currentPageTitle !== "settings" ? ` / ${$t(`settings.page.${currentPageTitle}`)}` : "";
currentPageTitle !== "settings"
? ` / ${$t(`settings.page.${currentPageTitle}`)}`
: "";
$: isMobile = screenWidth <= 750;
$: isHome = $page.url.pathname === '/settings';
$: isHome = $page.url.pathname === "/settings";
$: {
if (!isMobile && isHome) {
goto(defaultSettingsPage(), { replaceState: true });
}
}
</script>
<svelte:head>
@ -63,7 +64,12 @@
<IconArrowLeft />
</a>
{/if}
<h3 id="settings-page-title" aria-level="1">
<h3
id="settings-page-title"
aria-level="1"
data-first-focus
tabindex="-1"
>
{#if !isHome}
{$t(`settings.page.${currentPageTitle}`)}
{:else}
@ -140,16 +146,16 @@
{/if}
</SettingsNavSection>
{#if isMobile && isHome}
<div class="subtext settings-version center">
{versionText}
</div>
{/if}
{#if isMobile && isHome}
<div class="subtext settings-version center">
{versionText}
</div>
{/if}
</nav>
</div>
{#if !isMobile || !isHome}
<main id="settings-page-content">
<main id="settings-page-content" data-first-focus tabindex="-1">
<slot></slot>
</main>
{/if}