Enhance accessibility and structure across multiple components

- Updated the ContactForm component to include labels and aria-describedby attributes for better accessibility.
- Improved the Button component by conditionally adding aria-labels based on text input.
- Enhanced the Form component with aria-describedby attributes for validation feedback.
- Refactored the Layout component to include semantic HTML5 elements for better structure and accessibility.
- Updated the 404 page metadata for improved SEO and user experience.
This commit is contained in:
2025-06-24 21:05:49 +02:00
parent 0b16ad5a28
commit 3847f415d6
5 changed files with 41 additions and 13 deletions

View File

@@ -59,8 +59,9 @@ const { inputs, textarea, disclaimer, button = 'Contact us', description = '' }
placeholder={placeholder}
class="py-3 px-4 block w-full text-md rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-slate-900"
required={required}
aria-describedby={`invalid-feedback-${name}`}
/>
<div class="invalid-feedback hidden text-red-600 text-sm mt-1" />
<div id={`invalid-feedback-${name}`} class="invalid-feedback hidden text-red-600 text-sm mt-1" />
</div>
)
)
@@ -80,8 +81,9 @@ const { inputs, textarea, disclaimer, button = 'Contact us', description = '' }
placeholder={textarea.placeholder}
class="py-3 px-4 block w-full text-md rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-slate-900"
required
aria-describedby="invalid-feedback-textarea"
/>
<div class="invalid-feedback hidden text-red-600 text-sm mt-1" />
<div id="invalid-feedback-textarea" class="invalid-feedback hidden text-red-600 text-sm mt-1" />
</div>
)
}
@@ -96,6 +98,7 @@ const { inputs, textarea, disclaimer, button = 'Contact us', description = '' }
type="checkbox"
class="cursor-pointer mt-1 py-3 px-4 block w-full text-md rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-slate-900"
required
aria-describedby="invalid-feedback-disclaimer"
/>
</div>
<div class="ml-3">
@@ -103,7 +106,7 @@ const { inputs, textarea, disclaimer, button = 'Contact us', description = '' }
{disclaimer.label}
<span class="text-red-600">*</span>
</label>
<div class="invalid-feedback hidden text-red-600 text-sm mt-1" />
<div id="invalid-feedback-disclaimer" class="invalid-feedback hidden text-red-600 text-sm mt-1" />
</div>
</div>
)