From 8fbb692a2c82601418363326229047ee985f3880 Mon Sep 17 00:00:00 2001
From: vaporvee <yannik@vaporvee.com>
Date: Thu, 21 Aug 2025 18:17:15 +0200
Subject: [PATCH] fixed accessibility

---
 .../lib/components/blocks/link-mark.svelte    |  9 +-
 .../lib/components/blocks/sanity-file.svelte  |  5 +-
 .../src/lib/components/link-button.svelte     | 41 +-------
 .../client/src/lib/components/navbar.svelte   | 80 ++++++++-------
 .../apps/client/src/routes/+layout.svelte     |  2 +-
 .../apps/client/src/routes/blog/+page.svelte  | 98 ++++++++++---------
 6 files changed, 113 insertions(+), 122 deletions(-)

diff --git a/template/apps/client/src/lib/components/blocks/link-mark.svelte b/template/apps/client/src/lib/components/blocks/link-mark.svelte
index f43fd47..9096e53 100644
--- a/template/apps/client/src/lib/components/blocks/link-mark.svelte
+++ b/template/apps/client/src/lib/components/blocks/link-mark.svelte
@@ -1,13 +1,16 @@
 <script lang="ts">
+	import Button from "../ui/button/button.svelte";
+
 	let { portableText, children } = $props();
 	const { value } = portableText;
 </script>
 
-<a 
+<Button 
 	href={value.href} 
+	variant="link"
 	target={value.blank ? '_blank' : '_self'}
 	rel={value.blank ? 'noopener noreferrer' : undefined}
-	class="text-primary hover:underline"
+	class="text-primary hover:underline p-0"
 >
 	{@render children()}
-</a>
+</Button>
diff --git a/template/apps/client/src/lib/components/blocks/sanity-file.svelte b/template/apps/client/src/lib/components/blocks/sanity-file.svelte
index 0e77d49..6a8c9df 100644
--- a/template/apps/client/src/lib/components/blocks/sanity-file.svelte
+++ b/template/apps/client/src/lib/components/blocks/sanity-file.svelte
@@ -2,6 +2,7 @@
 	import { getFileAsset } from '@sanity/asset-utils';
 	import { Download } from '@lucide/svelte';
 	import { client } from '$lib/sanity';
+	import Button from '../ui/button/button.svelte';
 
 	let { portableText } = $props();
 	const { value } = portableText;
@@ -10,8 +11,8 @@
 
 {#if value?.asset}
 	{@const file = getFileAsset(value, { projectId, dataset })}
-	<a href={file.url} download class="inline-flex items-center gap-2 text-primary hover:underline">
+	<Button href={file.url} download class="inline-flex items-center gap-2 text-primary hover:underline">
 		<Download size={16} />
 		{value.title || 'Download file'}
-	</a>
+	</Button>
 {/if}
diff --git a/template/apps/client/src/lib/components/link-button.svelte b/template/apps/client/src/lib/components/link-button.svelte
index c6c2ee4..95ab32c 100644
--- a/template/apps/client/src/lib/components/link-button.svelte
+++ b/template/apps/client/src/lib/components/link-button.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { cn } from '$lib/utils';
 	import { ArrowRight, ExternalLink } from '@lucide/svelte';
+	import Button from './ui/button/button.svelte';
 
 	let {
 		text,
@@ -28,54 +29,18 @@
 
 	const baseClasses = cn(
 		'group',
-		'rounded-full',
-		'font-semibold',
-		'transition-all',
-		'duration-300',
-		'no-underline',
-		'flex',
-		'items-center',
 		'gap-2',
 		'inline-flex',
-		'justify-center',
 		'whitespace-nowrap',
-		'text-sm',
-		'font-medium',
-		'ring-offset-background',
-		'transition-colors',
-		'focus-visible:outline-none',
-		'focus-visible:ring-2',
-		'focus-visible:ring-ring',
-		'focus-visible:ring-offset-2',
-		'disabled:pointer-events-none',
-		'disabled:opacity-50',
 		showIcon ? 'pr-4' : 'px-6',
 		'active:transform',
 		'active:translate-y-[1px]',
-		{
-			// Variant styles
-			'bg-primary text-primary-foreground hover:bg-primary/90': variant === 'default',
-			'bg-destructive text-destructive-foreground hover:bg-destructive/90':
-				variant === 'destructive',
-			'border border-input bg-background hover:bg-accent hover:text-accent-foreground':
-				variant === 'outline',
-			'bg-secondary text-secondary-foreground hover:bg-secondary/80': variant === 'secondary',
-			'hover:bg-accent hover:text-accent-foreground': variant === 'ghost',
-			'text-primary underline-offset-4 hover:underline': variant === 'link'
-		},
-		{
-			// Size styles
-			'h-10 px-4 py-2': size === 'default',
-			'h-9 rounded-md px-3': size === 'sm',
-			'h-11 rounded-md px-8': size === 'lg',
-			'h-10 w-10': size === 'icon'
-		},
 		className
 	);
 </script>
 
 {#if linkData}
-	<a
+	<Button
 		href={linkData.href}
 		target={linkData?.target ?? '_self'}
 		rel={isExternal ? 'noopener noreferrer' : undefined}
@@ -102,5 +67,5 @@
 				{/if}
 			</span>
 		{/if}
-	</a>
+		</Button>
 {/if}
diff --git a/template/apps/client/src/lib/components/navbar.svelte b/template/apps/client/src/lib/components/navbar.svelte
index 7abb8cb..a77e775 100644
--- a/template/apps/client/src/lib/components/navbar.svelte
+++ b/template/apps/client/src/lib/components/navbar.svelte
@@ -116,22 +116,28 @@
 		expandedSubmenu = expandedSubmenu === itemName ? null : itemName;
 	}
 
+
+
 	const shouldReload = $derived($page.url.pathname.startsWith('/blog/'));
 </script>
 
-<nav class="relative z-[50] bg-primary py-3">
+<nav class="bg-primary relative z-[50] py-3">
 	<div class="container px-4 md:mx-auto md:px-0">
 		<div class="relative flex items-center">
 			<div class="flex items-center">
 				{#if settings}
-					<a href="/">
-						<Button variant="ghost">
-							<Logo {settings} class="text-white" />
-						</Button>
-					</a>
+					<Button variant="ghost" href="/">
+						<Logo {settings} class="text-white" />
+					</Button>
 				{:else}
 					<div class="text-lg font-semibold text-white">Logo</div>
 				{/if}
+				<a
+					href="#main-content"
+					class="sr-only ml-2 focus:not-sr-only focus:bg-white focus:text-black focus:px-3 focus:py-1 focus:rounded focus:text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all"
+				>
+					Skip navigation
+				</a>
 			</div>
 
 			<div class="absolute left-1/2 hidden -translate-x-1/2 transform md:flex">
@@ -146,10 +152,12 @@
 								<NavigationMenuItem data-navigation-menu-item>
 									{#if item.url && !item.subitems}
 										<NavigationMenuLink
-											class={cn('relative z-20 text-white transition-colors hover:text-white/80')}
+											class={cn(
+												'relative z-20 text-white transition-colors hover:text-white/80 focus:bg-white/10 focus:outline-none focus:ring-2 focus:ring-white/20'
+											)}
 											href={item.url}
 											data-sveltekit-reload={item.url?.startsWith('/blog/') && shouldReload
-												? 'true'
+												? true
 												: undefined}
 										>
 											{item.name}
@@ -157,12 +165,13 @@
 									{:else if item.subitems}
 										{#if item.url}
 											<NavigationMenuTrigger
-												class="relative z-20 cursor-pointer px-2 text-white transition-colors hover:text-white/80"
+												class="relative z-20 cursor-pointer px-2 text-white transition-colors hover:text-white/80 focus:bg-white/10 focus:outline-none focus:ring-2 focus:ring-white/20 data-[state=open]:bg-white/10"
 											>
 												<NavigationMenuLink
 													href={item.url}
+													class="focus:outline-none"
 													data-sveltekit-reload={item.url?.startsWith('/blog/') && shouldReload
-														? 'true'
+														? true
 														: undefined}
 												>
 													{item.name}
@@ -170,20 +179,20 @@
 											</NavigationMenuTrigger>
 										{:else}
 											<NavigationMenuTrigger
-												class="relative z-20 cursor-pointer text-white transition-colors hover:text-white/80"
+												class="relative z-20 cursor-pointer text-white transition-colors hover:text-white/80 focus:bg-white/10 focus:outline-none focus:ring-2 focus:ring-white/20 data-[state=open]:bg-white/10"
 											>
 												{item.name}
 											</NavigationMenuTrigger>
 										{/if}
 										<NavigationMenuContent
-											class="absolute left-1/2 z-[50] mt-2 min-w-max -translate-x-1/2 rounded-md border border-white/20 bg-primary shadow-lg"
+											class="bg-primary absolute left-1/2 z-[50] mt-2 min-w-max -translate-x-1/2 space-y-1 rounded-md border border-white/20 p-2 shadow-lg"
 										>
 											{#each item.subitems as subitem}
 												<NavigationMenuLink
 													href={subitem.url}
-													class="block rounded-md px-4 py-2 text-white transition-colors hover:text-white/80"
+													class="block rounded-md px-4 py-2 text-white transition-colors hover:bg-white/10 hover:text-white/80 focus:bg-white/10 focus:text-white focus:outline-none focus:ring-2 focus:ring-white/20"
 													data-sveltekit-reload={subitem.url?.startsWith('/blog/') && shouldReload
-														? 'true'
+														? true
 														: undefined}
 												>
 													{subitem.name}
@@ -204,15 +213,13 @@
 							<MoreHorizontal size={24} />
 						</Button>
 					</SheetTrigger>
-					<SheetContent side="top" class="h-full w-full border-primary bg-primary text-white">
+					<SheetContent side="top" class="border-primary bg-primary h-full w-full text-white">
 						<SheetHeader class="border-b border-white/20 pb-4">
 							<SheetTitle class="flex items-center justify-start">
 								{#if settings}
-									<a href="/">
-										<Button variant="ghost" class="px-1">
-											<Logo {settings} class="text-white" />
-										</Button>
-									</a>
+									<Button variant="ghost" class="px-1" href="/">
+										<Logo {settings} class="text-white" />
+									</Button>
 								{:else}
 									<div class="text-lg font-semibold">Navigation</div>
 								{/if}
@@ -222,7 +229,7 @@
 							{#each items || [] as item, index}
 								{#if item.url && !item.subitems}
 									<div class="relative">
-										<a
+										<Button
 											href={item.url}
 											class={cn(
 												'mx-2 block rounded-md px-4 py-2 text-sm transition-colors hover:text-white/80',
@@ -230,22 +237,26 @@
 											)}
 											onclick={closeMobileMenu}
 											data-sveltekit-reload={item.url?.startsWith('/blog/') && shouldReload
-												? 'true'
+												? true
 												: undefined}
 										>
 											{item.name}
-										</a>
+										</Button>
 									</div>
 								{:else if item.subitems}
 									<div class="relative space-y-1">
 										{#if index === activeIndex}
 											<div
-												class="absolute top-0 bottom-0 left-0 w-1 rounded-r-md bg-white/20"
+												class="absolute bottom-0 left-0 top-0 w-1 rounded-r-md bg-white/20"
 											></div>
 										{/if}
 										<Button
-											class="flex w-full items-center justify-between rounded-md px-4 py-2 text-left text-sm font-medium transition-all duration-200 hover:text-white/80"
+											class="flex w-full items-center justify-between rounded-md px-4 py-2 text-left text-sm font-medium text-white transition-all duration-200 hover:text-white/80 focus:outline-none focus:ring-2 focus:ring-white/20"
 											onclick={() => toggleSubmenu(item.name)}
+											aria-expanded={expandedSubmenu === item.name}
+											aria-controls={`submenu-${item.name}`}
+											id={`submenu-trigger-${item.name}`}
+											type="button"
 										>
 											<span>{item.name}</span>
 											<div
@@ -261,30 +272,33 @@
 											<div
 												class="ml-4 space-y-1"
 												transition:slide={{ duration: 300, easing: quintOut }}
+												id={`submenu-${item.name}`}
+												role="group"
+												aria-labelledby={`submenu-trigger-${item.name}`}
 											>
 												{#if item.url}
-													<a
+													<Button
 														href={item.url}
-														class="block rounded-md px-6 py-2 text-sm text-white/80 transition-colors hover:text-white"
+														class="block rounded-md px-6 py-2 text-sm text-white/80 transition-colors hover:text-white focus:outline-none focus:ring-2 focus:ring-white/20"
 														onclick={closeMobileMenu}
 														data-sveltekit-reload={item.url?.startsWith('/blog/') && shouldReload
-															? 'true'
+															? true
 															: undefined}
 													>
 														{item.name}
-													</a>
+													</Button>
 												{/if}
 												{#each item.subitems as subitem}
-													<a
+													<Button
 														href={subitem.url}
-														class="block rounded-md px-6 py-2 text-sm text-white/80 transition-colors hover:text-white"
+														class="block rounded-md px-6 py-2 text-sm text-white/80 transition-colors hover:text-white focus:outline-none focus:ring-2 focus:ring-white/20"
 														onclick={closeMobileMenu}
 														data-sveltekit-reload={subitem.url?.startsWith('/blog/') && shouldReload
-															? 'true'
+															? true
 															: undefined}
 													>
 														{subitem.name}
-													</a>
+													</Button>
 												{/each}
 											</div>
 										{/if}
diff --git a/template/apps/client/src/routes/+layout.svelte b/template/apps/client/src/routes/+layout.svelte
index 1680454..ae0dd9b 100644
--- a/template/apps/client/src/routes/+layout.svelte
+++ b/template/apps/client/src/routes/+layout.svelte
@@ -25,7 +25,7 @@
 
 <div class="scroll-smooth font-sans antialiased">
 	<Navbar settings={data.settings} items={data.navigation} />
-	<main class="min-h-[calc(100vh-11.3rem)] md:min-h-[calc(100vh-9.05rem)]">
+	<main id="main-content" tabindex="-1" class="min-h-[calc(100vh-11.3rem)] md:min-h-[calc(100vh-9.05rem)] focus:outline-none">
 		{@render children()}
 	</main>
 	{#if data.settings}
diff --git a/template/apps/client/src/routes/blog/+page.svelte b/template/apps/client/src/routes/blog/+page.svelte
index 962cb7f..b07a9c3 100644
--- a/template/apps/client/src/routes/blog/+page.svelte
+++ b/template/apps/client/src/routes/blog/+page.svelte
@@ -78,9 +78,9 @@
 <main class="container mx-auto min-h-screen max-w-6xl p-8">
 	<header class="mb-12">
 		<h1 class="mb-4 font-serif text-3xl font-bold sm:text-4xl md:text-5xl">Blog</h1>
-		<p class="text-lg text-muted-foreground">{meta.description}</p>
+		<p class="text-muted-foreground text-lg">{meta.description}</p>
 		{#if pagination.totalBlogs > 0}
-			<p class="mt-2 text-sm text-muted-foreground">
+			<p class="text-muted-foreground mt-2 text-sm">
 				Showing {blogs.length} of {pagination.totalBlogs} posts
 			</p>
 		{/if}
@@ -88,7 +88,7 @@
 
 	{#if blogs.length === 0}
 		<div class="py-16 text-center">
-			<p class="text-lg text-muted-foreground">No blog posts found.</p>
+			<p class="text-muted-foreground text-lg">No blog posts found.</p>
 		</div>
 	{:else}
 		<div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
@@ -100,7 +100,7 @@
 				{@const extendedBlog = blog as any}
 
 				<Card
-					class="group cursor-pointer overflow-hidden transition-all focus-within:ring-2 focus-within:ring-primary/20 hover:shadow-md"
+					class="focus-within:ring-primary/20 group cursor-pointer overflow-hidden transition-all focus-within:ring-2 hover:shadow-md"
 					onclick={() => navigateToPost(blog.slug?.current)}
 					onkeydown={(e) => {
 						if (e.key === 'Enter' || e.key === ' ') {
@@ -124,22 +124,22 @@
 							/>
 						</div>
 					{:else}
-						<div class="flex aspect-video items-center justify-center bg-muted">
+						<div class="bg-muted flex aspect-video items-center justify-center">
 							<div class="text-center">
-								<div class="mb-2 text-4xl text-muted-foreground">📝</div>
-								<p class="text-sm text-muted-foreground">No cover image</p>
+								<div class="text-muted-foreground mb-2 text-4xl">📝</div>
+								<p class="text-muted-foreground text-sm">No cover image</p>
 							</div>
 						</div>
 					{/if}
 
 					<CardHeader class="pb-3">
 						<CardTitle
-							class="font-serif text-xl leading-tight transition-colors group-hover:text-primary"
+							class="group-hover:text-primary font-serif text-xl leading-tight transition-colors"
 						>
 							{blog.title}
 						</CardTitle>
 
-						<div class="flex flex-col gap-1 text-sm text-muted-foreground">
+						<div class="text-muted-foreground flex flex-col gap-1 text-sm">
 							{#if blog.author}
 								<div class="flex items-center gap-2">
 									<span class="font-medium">By {blog.author}</span>
@@ -154,13 +154,13 @@
 							<div class="mt-3 flex flex-wrap gap-1">
 								{#each blog.tags.slice(0, 3) as tag}
 									<span
-										class="inline-block rounded bg-muted px-2 py-1 text-xs font-medium text-muted-foreground"
+										class="bg-muted text-muted-foreground inline-block rounded px-2 py-1 text-xs font-medium"
 									>
 										{tag}
 									</span>
 								{/each}
 								{#if blog.tags.length > 3}
-									<span class="text-xs text-muted-foreground">+{blog.tags.length - 3} more</span>
+									<span class="text-muted-foreground text-xs">+{blog.tags.length - 3} more</span>
 								{/if}
 							</div>
 						{/if}
@@ -168,13 +168,13 @@
 
 					<CardContent class="pt-0">
 						{#if blog.excerpt || extendedBlog.description}
-							<p class="mb-4 line-clamp-3 text-sm leading-relaxed text-muted-foreground">
+							<p class="text-muted-foreground mb-4 line-clamp-3 text-sm leading-relaxed">
 								{blog.excerpt || extendedBlog.description}
 							</p>
 						{/if}
 
 						<div
-							class="inline-flex items-center text-sm font-medium text-primary transition-colors group-hover:text-primary/80"
+							class="text-primary group-hover:text-primary/80 inline-flex items-center text-sm font-medium transition-colors"
 						>
 							Read more
 							<svg class="ml-1 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -195,51 +195,59 @@
 			<nav class="mt-12 flex justify-center" aria-label="Pagination">
 				<div class="flex items-center gap-1">
 					{#if pagination.hasPreviousPage}
-						<a href={createPageUrl(pagination.currentPage - 1)} data-sveltekit-reload>
-							<Button variant="outline" size="sm">
-								<svg class="mr-1 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-									<path
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										stroke-width="2"
-										d="M15 19l-7-7 7-7"
-									></path>
-								</svg>
-								Previous
-							</Button>
-						</a>
+						<Button
+							variant="outline"
+							size="sm"
+							href={createPageUrl(pagination.currentPage - 1)}
+							data-sveltekit-reload
+						>
+							<svg class="mr-1 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M15 19l-7-7 7-7"
+								></path>
+							</svg>
+							Previous
+						</Button>
 					{/if}
 
 					{#each getVisiblePages() as pageItem}
 						{#if pageItem === 'ellipsis'}
-							<span class="px-3 py-2 text-muted-foreground">...</span>
+							<span class="text-muted-foreground px-3 py-2">...</span>
 						{:else if pageItem === pagination.currentPage}
 							<Button variant="default" size="sm" disabled>
 								{pageItem}
 							</Button>
 						{:else}
-							<a href={createPageUrl(pageItem)} data-sveltekit-reload>
-								<Button variant="ghost" size="sm">
-									{pageItem}
-								</Button>
-							</a>
+							<Button
+								variant="ghost"
+								size="sm"
+								href={createPageUrl(pageItem)}
+								data-sveltekit-reload
+							>
+								{pageItem}
+							</Button>
 						{/if}
 					{/each}
 
 					{#if pagination.hasNextPage}
-						<a href={createPageUrl(pagination.currentPage + 1)} data-sveltekit-reload>
-							<Button variant="outline" size="sm">
-								Next
-								<svg class="ml-1 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-									<path
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										stroke-width="2"
-										d="M9 5l7 7-7 7"
-									></path>
-								</svg>
-							</Button>
-						</a>
+						<Button
+							variant="outline"
+							size="sm"
+							href={createPageUrl(pagination.currentPage + 1)}
+							data-sveltekit-reload
+						>
+							<svg class="ml-1 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M9 5l7 7-7 7"
+								></path>
+							</svg>
+						</Button>
 					{/if}
 				</div>
 			</nav>