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; 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) { :global(h1) {
font-size: 24px; font-size: 24px;
letter-spacing: -1px; letter-spacing: -1px;

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

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