From cb67badf53d3768562dcba63ee9d01f4025db660 Mon Sep 17 00:00:00 2001
From: rasm-its <radoslaw.smolinski@intecion.com>
Date: Wed, 26 Aug 2026 03:18:02 +0200
Subject: [PATCH] fix(a11y): add htmlFor, id, name and aria-label attributes to
 all form elements for accessibility

---
 src/blocks/Form/Component.tsx | 40 ++++++++++++++++++++++++++++++-----
 1 file changed, 35 insertions(+), 5 deletions(-)

diff --git a/src/blocks/Form/Component.tsx b/src/blocks/Form/Component.tsx
index 593f0b0..9fab884 100644
--- a/src/blocks/Form/Component.tsx
+++ b/src/blocks/Form/Component.tsx
@@ -176,25 +176,37 @@ export function FormBlockComponent(props: FormBlockProps) {
                     <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
                       <div>
                         {nameLabel && (
-                          <label className="block text-xs font-black uppercase tracking-wider text-[#1f1f1f] mb-2">
+                          <label
+                            htmlFor="form-name"
+                            className="block text-xs font-black uppercase tracking-wider text-[#1f1f1f] mb-2"
+                          >
                             {nameLabel}
                           </label>
                         )}
                         <input
+                          id="form-name"
+                          name="name"
                           type="text"
                           required
+                          aria-label={nameLabel || 'Imię i Nazwisko'}
                           className="w-full border-2 border-[#1f1f1f] bg-white px-4 py-3.5 text-sm text-[#1f1f1f] focus:bg-[#fffde6] focus:outline-none transition-colors"
                         />
                       </div>
                       <div>
                         {phoneInputLabel && (
-                          <label className="block text-xs font-black uppercase tracking-wider text-[#1f1f1f] mb-2">
+                          <label
+                            htmlFor="form-phone"
+                            className="block text-xs font-black uppercase tracking-wider text-[#1f1f1f] mb-2"
+                          >
                             {phoneInputLabel}
                           </label>
                         )}
                         <input
+                          id="form-phone"
+                          name="phone"
                           type="tel"
                           required
+                          aria-label={phoneInputLabel || 'Numer Telefonu'}
                           className="w-full border-2 border-[#1f1f1f] bg-white px-4 py-3.5 text-sm text-[#1f1f1f] focus:bg-[#fffde6] focus:outline-none transition-colors font-mono"
                         />
                       </div>
@@ -203,23 +215,35 @@ export function FormBlockComponent(props: FormBlockProps) {
                     <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
                       <div>
                         {locationLabel && (
-                          <label className="block text-xs font-black uppercase tracking-wider text-[#1f1f1f] mb-2">
+                          <label
+                            htmlFor="form-location"
+                            className="block text-xs font-black uppercase tracking-wider text-[#1f1f1f] mb-2"
+                          >
                             {locationLabel}
                           </label>
                         )}
                         <input
+                          id="form-location"
+                          name="location"
                           type="text"
+                          aria-label={locationLabel || 'Miejscowość'}
                           className="w-full border-2 border-[#1f1f1f] bg-white px-4 py-3.5 text-sm text-[#1f1f1f] focus:border-[#FFED00] focus:outline-none transition-colors"
                         />
                       </div>
                       <div>
                         {areaLabel && (
-                          <label className="block text-xs font-black uppercase tracking-wider text-[#1f1f1f] mb-2">
+                          <label
+                            htmlFor="form-area"
+                            className="block text-xs font-black uppercase tracking-wider text-[#1f1f1f] mb-2"
+                          >
                             {areaLabel}
                           </label>
                         )}
                         <input
+                          id="form-area"
+                          name="area"
                           type="text"
+                          aria-label={areaLabel || 'Szacowany Metraż'}
                           className="w-full border-2 border-[#1f1f1f] bg-white px-4 py-3.5 text-sm text-[#1f1f1f] focus:border-[#FFED00] focus:outline-none transition-colors font-mono"
                         />
                       </div>
@@ -227,12 +251,18 @@ export function FormBlockComponent(props: FormBlockProps) {
 
                     <div>
                       {messageLabel && (
-                        <label className="block text-xs font-black uppercase tracking-wider text-[#1f1f1f] mb-2">
+                        <label
+                          htmlFor="form-message"
+                          className="block text-xs font-black uppercase tracking-wider text-[#1f1f1f] mb-2"
+                        >
                           {messageLabel}
                         </label>
                       )}
                       <textarea
+                        id="form-message"
+                        name="message"
                         rows={3}
+                        aria-label={messageLabel || 'Zakres prac'}
                         className="w-full border-2 border-[#1f1f1f] bg-white px-4 py-3.5 text-sm text-[#1f1f1f] focus:border-[#FFED00] focus:outline-none transition-colors"
                       />
                     </div>