cleanup

src/routes/+page.svelte

@@ -11,10 +11,9 @@
 	}
 </script>
 
-<section class="relative overflow-hidden">
+<section class="relative overflow-hidden" aria-labelledby="hero-heading">
-	<!-- Hero -->
 	<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>

src/routes/login/+page.svelte

@@ -16,39 +16,47 @@
 		<div class="flex-1"></div>
 		<div class="justify-center flex">
 			<div class="w-full max-w-xs">
-				<form class="flex flex-col gap-6" method="post">
+				<form class="flex flex-col gap-6" method="post" aria-labelledby="login-heading">
 					<FieldGroup>
 						<div class="flex flex-col items-center gap-1 text-center">
-							<h1 class="text-2xl font-bold">Login to your account</h1>
+							<h1 id="login-heading" class="text-2xl font-bold">Login to your account</h1>
-							<p class="text-muted-foreground text-sm text-balance">
+							<p id="login-description" class="text-muted-foreground text-sm text-balance">
 								Only admins need to log in.<br>Lost something? Go <a href="/" class="underline text-primary">home</a>.
 							</p>
 						</div>
 						<Field>
 							<FieldLabel for="email">Email</FieldLabel>
-							<Input id="email" type="email" name="email" placeholder="m@example.com" required />
+							<Input
+								id="email"
+								type="email"
+								name="email"
+								placeholder="m@example.com"
+								required
+								aria-required="true"
+							/>
 						</Field>
 						<Field>
 							<div class="flex items-center">
 								<FieldLabel for="password">Password</FieldLabel>
-								<!--				<a href="##" class="ms-auto text-sm underline-offset-4 hover:underline">-->
-								<!--					Forgot your password?-->
-								<!--				</a>-->
 							</div>
-							<Input id="password" name="password" type="password" required />
+							<Input
+								id="password"
+								name="password"
+								type="password"
+								required
+								aria-required="true"
+								aria-describedby={form?.message ? "password-error" : undefined}
+								aria-invalid={form?.message ? "true" : "false"}
+							/>
 							{#if form?.message}
-								<p class="text-error">{form.message}</p>
+								<p id="password-error" class="text-error" role="alert" aria-live="assertive">
+									{form.message}
+								</p>
 							{/if}
 						</Field>
 						<Field>
-							<Button type="submit">Login</Button>
+							<Button type="submit" aria-label="Login to your account">Login</Button>
 						</Field>
-						<!--		<Field>-->
-						<!--			<FieldDescription class="text-center">-->
-						<!--				Don't have an account?-->
-						<!--				<a href="/signup" class="underline underline-offset-4">Sign up</a>-->
-						<!--			</FieldDescription>-->
-						<!--		</Field>-->
 					</FieldGroup>
 				</form>
 			</div>
@@ -59,6 +67,7 @@
 		<img
 			src="login-hero.png"
 			alt=""
+			aria-hidden="true"
 			class="absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale"
 		/>
 	</div>