radoslaw.smolinski/poi-preview
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(a11y): add htmlFor, id, name and aria-label attributes to all form elements for accessibility

Browse Source
This commit is contained in:
radoslaw.smolinski
2026-08-26 03:18:02 +02:00
parent 4c8d6f59b9
commit cb67badf53
1 changed files with 35 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/blocks/Form/Component.tsx
+35 -5
View File
@@ -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>