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:
@@ -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>
|
||||
)
|
||||
|
Reference in New Issue
Block a user