From edb5af9cc510320f8fd498efda7969ea0c65507b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yuniel=20Acosta=20P=C3=A9rez?= <yunielacosta738@gmail.com>
Date: Fri, 23 Feb 2024 08:09:59 +0100
Subject: [PATCH] refactor: label on contact component

---
 src/components/organisms/Contact.astro | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/organisms/Contact.astro b/src/components/organisms/Contact.astro
index 6a080eb0e..1e24546f7 100644
--- a/src/components/organisms/Contact.astro
+++ b/src/components/organisms/Contact.astro
@@ -28,9 +28,9 @@ const t = useTranslations(lang);
 		</div>
 		<form id="contact-form" class="mx-auto" method="POST" action={import.meta.env.FORMSPREE}>
 			<div>
-				<span class="text-sm font-bold uppercase text-lightest-slate">
+				<label for="form-name" class="text-sm font-bold uppercase text-lightest-slate">
 					{t('yourFullName')}
-				</span>
+				</label>
 				<input
 					id="form-name"
 					class="focus:shadow-outline mt-2 w-full rounded-lg border-2 border-green-500 bg-transparent p-3 text-green-500 focus:outline-none"
@@ -41,9 +41,9 @@ const t = useTranslations(lang);
 				/>
 			</div>
 			<div class="mt-8">
-				<span class="text-sm font-bold uppercase text-lightest-slate">
+				<label for="form-email" class="text-sm font-bold uppercase text-lightest-slate">
 					{t('yourEmail')}
-				</span>
+				</label>
 				<input
 					id="form-email"
 					class="focus:shadow-outline mt-2 w-full rounded-lg border-2 border-green-500 bg-transparent p-3 text-green-500 focus:outline-none"
@@ -54,9 +54,9 @@ const t = useTranslations(lang);
 				/>
 			</div>
 			<div class="mt-8">
-				<span class="text-sm font-bold uppercase text-lightest-slate">
+				<label for="form-subject" class="text-sm font-bold uppercase text-lightest-slate">
 					{t('subject')}
-				</span>
+				</label>
 				<input
 					id="form-subject"
 					class="focus:shadow-outline mt-2 w-full rounded-lg border-2 border-green-500 bg-transparent p-3 text-green-500 focus:outline-none"
@@ -68,9 +68,9 @@ const t = useTranslations(lang);
 				/>
 			</div>
 			<div class="mt-8">
-				<span class="text-sm font-bold uppercase text-lightest-slate">
+				<label for="form-message" class="text-sm font-bold uppercase text-lightest-slate">
 					{t('message')}
-				</span>
+				</label>
 				<textarea
 					id="form-message"
 					placeholder={t('messagePlaceholder')}