cleanup

src/routes/+page.svelte

@@ -11,10 +11,9 @@
 	}
 </script>
 
-<section class="relative overflow-hidden">
-	<!-- Hero -->
+<section class="relative overflow-hidden" aria-labelledby="hero-heading">
 	<div class="mx-auto max-w-6xl px-6 py-24 text-center">
-		<h1 class="text-4xl font-bold tracking-tight sm:text-5xl">
+		<h1 id="hero-heading" class="text-4xl font-bold tracking-tight sm:text-5xl">
 			Westuffinder
 		</h1>
 		<p class="mx-auto mt-6 max-w-2xl text-lg text-muted-foreground">
@@ -23,16 +22,24 @@
 		</p>
 
 		<div class="mt-10 flex flex-col items-center justify-center gap-4 sm:flex-row">
-			<Button size="lg" class="px-8" onclick={openCreateDialog}>
+			<Button
+				size="lg"
+				class="px-8"
+				onclick={openCreateDialog}
+				aria-label="Submit a found item"
+			>
 				Submit a Found Item
 			</Button>
-			<a href="/items" class={cn(buttonVariants({ variant: 'outline', size: 'lg' }), 'px-8')}>
+			<a
+				href="/items"
+				class={cn(buttonVariants({ variant: 'outline', size: 'lg' }), 'px-8')}
+				aria-label="Browse lost items"
+			>
 				Browse Lost Items
 			</a>
 		</div>
 	</div>
 
-	<!-- Subtle background accent -->
 	<div
 		aria-hidden="true"
 		class="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl"
@@ -43,37 +50,59 @@
 	</div>
 </section>
 
-<section class="mx-auto max-w-6xl px-6 py-20">
+<section class="mx-auto max-w-6xl px-6 py-20" aria-labelledby="info-cards-heading">
+	<h2 id="info-cards-heading" class="sr-only">Information</h2>
 	<div class="grid gap-8 md:grid-cols-3">
 		<Card>
 			<CardHeader>
-				<CardTitle>Found an Item?</CardTitle>
+				<CardTitle id="found-item-heading">Found an Item?</CardTitle>
 			</CardHeader>
-			<CardContent class="space-y-3 text-sm text-muted-foreground">
+			<CardContent
+				class="space-y-3 text-sm text-muted-foreground"
+				aria-labelledby="found-item-heading"
+			>
 				<p>
 					Turn it in digitally in less than a minute. Add a description and where you found it.
 				</p>
-				<Button class="mt-2 w-full" onclick={openCreateDialog}>Submit Item</Button>
+				<Button
+					class="mt-2 w-full"
+					onclick={openCreateDialog}
+					aria-label="Submit a found item"
+				>
+					Submit Item
+				</Button>
 			</CardContent>
 		</Card>
 
 		<Card>
 			<CardHeader>
-				<CardTitle>Lost Something?</CardTitle>
+				<CardTitle id="lost-item-heading">Lost Something?</CardTitle>
 			</CardHeader>
-			<CardContent class="space-y-3 text-sm text-muted-foreground">
+			<CardContent
+				class="space-y-3 text-sm text-muted-foreground"
+				aria-labelledby="lost-item-heading"
+			>
 				<p>
 					Browse items that have been turned in by students and staff.
 				</p>
-				<a href="/items" class={cn(buttonVariants({ variant: 'outline', size: 'lg' }), 'mt-2 w-full')}>Browse Items</a>
+				<a
+					href="/items"
+					class={cn(buttonVariants({ variant: 'outline', size: 'lg' }), 'mt-2 w-full')}
+					aria-label="Browse found items"
+				>
+					Browse Items
+				</a>
 			</CardContent>
 		</Card>
 
 		<Card>
 			<CardHeader>
-				<CardTitle>Safe &amp; School-Run</CardTitle>
+				<CardTitle id="safe-heading">Safe &amp; School-Run</CardTitle>
 			</CardHeader>
-			<CardContent class="space-y-3 text-sm text-muted-foreground">
+			<CardContent
+				class="space-y-3 text-sm text-muted-foreground"
+				aria-labelledby="safe-heading"
+			>
 				<p>
 					Managed by Waukesha West staff. Items are reviewed before being listed.
 				</p>
@@ -82,11 +111,16 @@
 	</div>
 </section>
 
-<section class="mx-auto max-w-6xl px-6 pb-24">
+<section class="mx-auto max-w-6xl px-6 pb-24" aria-labelledby="staff-heading">
+	<h2 id="staff-heading" class="sr-only">Staff Access</h2>
 	<div class="flex items-center justify-center">
 		<p class="text-xs text-muted-foreground">
 			Staff only:
-			<a href="/login" class="ml-1 underline underline-offset-4 hover:text-foreground">
+			<a
+				href="/login"
+				class="ml-1 underline underline-offset-4 hover:text-foreground"
+				aria-label="Admin sign in"
+			>
 				Admin sign in
 			</a>
 		</p>