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 className="grid grid-cols-1 sm:grid-cols-2 gap-5">
<div> <div>
{nameLabel && ( {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} {nameLabel}
</label> </label>
)} )}
<input <input
id="form-name"
name="name"
type="text" type="text"
required 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" 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>
<div> <div>
{phoneInputLabel && ( {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} {phoneInputLabel}
</label> </label>
)} )}
<input <input
id="form-phone"
name="phone"
type="tel" type="tel"
required 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" 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> </div>
@@ -203,23 +215,35 @@ export function FormBlockComponent(props: FormBlockProps) {
<div className="grid grid-cols-1 sm:grid-cols-2 gap-5"> <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
<div> <div>
{locationLabel && ( {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} {locationLabel}
</label> </label>
)} )}
<input <input
id="form-location"
name="location"
type="text" 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" 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>
<div> <div>
{areaLabel && ( {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} {areaLabel}
</label> </label>
)} )}
<input <input
id="form-area"
name="area"
type="text" 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" 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> </div>
@@ -227,12 +251,18 @@ export function FormBlockComponent(props: FormBlockProps) {
<div> <div>
{messageLabel && ( {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} {messageLabel}
</label> </label>
)} )}
<textarea <textarea
id="form-message"
name="message"
rows={3} 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" 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>