From 3b1ffb21a67c7b17fd1423beea21e0f616a1fb27 Mon Sep 17 00:00:00 2001
From: Josh Creek <8179928+jcreek@users.noreply.github.com>
Date: Sun, 10 Nov 2024 19:55:57 +0000
Subject: [PATCH] feat(#79): Enhance form security and accessibility

---
 src/routes/contact/+page.svelte | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/routes/contact/+page.svelte b/src/routes/contact/+page.svelte
index 0c7bdde..3ad77a8 100644
--- a/src/routes/contact/+page.svelte
+++ b/src/routes/contact/+page.svelte
@@ -31,7 +31,9 @@
 		action="?"
 		use:enhance={handleSubmit}
 		class="max-w-lg mx-auto p-4 bg-base-200 rounded-lg shadow-md"
+		aria-labelledby="contact-form-title"
 	>
+		<h2 id="contact-form-title" class="text-xl font-bold mb-4">Contact Us</h2>
 		{#if error}
 			<div class="alert alert-error shadow-lg mb-4">
 				<div>
@@ -41,7 +43,7 @@
 		{/if}
 		<div class="form-control mb-4">
 			<label for="name" class="label">
-				<span class="label-text">Name</span>
+				<span class="label-text">Name *</span>
 			</label>
 			<input
 				id="name"
@@ -49,13 +51,16 @@
 				type="text"
 				bind:value={name}
 				class="input input-bordered"
+				aria-required="true"
+				minlength="2"
+				maxlength="100"
 				required
 			/>
 		</div>
 
 		<div class="form-control mb-4">
 			<label for="email" class="label">
-				<span class="label-text">Email</span>
+				<span class="label-text">Email *</span>
 			</label>
 			<input
 				id="email"
@@ -63,21 +68,28 @@
 				type="email"
 				bind:value={email}
 				class="input input-bordered"
+				aria-required="true"
+				minlength="5"
+				maxlength="100"
 				required
 			/>
 		</div>
 
 		<div class="form-control mb-4">
 			<label for="message" class="label">
-				<span class="label-text">Message</span>
+				<span class="label-text">Message *</span>
 			</label>
 			<textarea
 				id="message"
 				name="message"
 				bind:value={message}
 				class="textarea textarea-bordered"
+				aria-required="true"
+				minlength="10"
+				maxlength="1000"
 				required
 			></textarea>
+			<small class="text-sm mt-1">Maximum 1000 characters</small>
 		</div>
 
 		<div class="form-control">