mmintel/klz-cables.com
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

feat(a11y): implement screen reader support and accessibility optimizations
All checks were successful
Build & Deploy / 🔍 Prepare (push) Successful in 11s
Details
Build & Deploy / 🧪 QA (push) Successful in 2m6s
Details
Build & Deploy / 🏗️ Build (push) Successful in 7m29s
Details
Build & Deploy / 🚀 Deploy (push) Successful in 30s
Details
Build & Deploy / 🧪 Smoke Test (push) Successful in 1m13s
Details
Build & Deploy / 🔔 Notify (push) Successful in 1s
Details

Browse Source
This commit is contained in:
Marc Mintel
2026-02-18 00:59:31 +01:00
parent 02bd1dcd7f
commit 374fcc9689
23 changed files with 949 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
components/ContactForm.tsx
View File

@@ -66,7 +66,11 @@ export default function ContactForm() {
if (status === 'success') {
return (
<Card className="p-6 md:p-12 rounded-2xl md:rounded-[40px] border-none shadow-2xl text-center">
<Card
className="p-6 md:p-12 rounded-2xl md:rounded-[40px] border-none shadow-2xl text-center"
role="alert"
aria-live="polite"
>
<div className="w-20 h-20 bg-accent rounded-full flex items-center justify-center mx-auto mb-6 shadow-lg shadow-accent/20">
<svg
className="w-10 h-10 text-primary-dark"
@@ -93,7 +97,11 @@ export default function ContactForm() {
if (status === 'error') {
return (
<Card className="p-6 md:p-12 rounded-2xl md:rounded-[40px] border-destructive/20 shadow-2xl text-center bg-destructive/5 animate-slide-up">
<Card
className="p-6 md:p-12 rounded-2xl md:rounded-[40px] border-destructive/20 shadow-2xl text-center bg-destructive/5 animate-slide-up"
role="alert"
aria-live="assertive"
>
<div className="w-20 h-20 bg-destructive rounded-full flex items-center justify-center mx-auto mb-6 shadow-lg shadow-destructive/20">
<svg
className="w-10 h-10 text-destructive-foreground"
@@ -132,40 +140,43 @@ export default function ContactForm() {
</Heading>
<form onSubmit={handleSubmit} className="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-8">
<div className="space-y-1 md:space-y-2">
<Label htmlFor="name">{t('form.name')}</Label>
<Label htmlFor="contact-name">{t('form.name')}</Label>
<Input
type="text"
id="name"
id="contact-name"
name="name"
autoComplete="name"
enterKeyHint="next"
onFocus={() => handleFocus('name')}
onFocus={() => handleFocus('contact-name')}
aria-label={t('form.name')}
required
/>
</div>
<div className="space-y-1 md:space-y-2">
<Label htmlFor="email">{t('form.email')}</Label>
<Label htmlFor="contact-email">{t('form.email')}</Label>
<Input
type="email"
id="email"
id="contact-email"
name="email"
autoComplete="email"
inputMode="email"
enterKeyHint="next"
placeholder={t('form.emailPlaceholder')}
onFocus={() => handleFocus('email')}
onFocus={() => handleFocus('contact-email')}
aria-label={t('form.email')}
required
/>
</div>
<div className="md:col-span-2 space-y-1 md:space-y-2">
<Label htmlFor="message">{t('form.message')}</Label>
<Label htmlFor="contact-message">{t('form.message')}</Label>
<Textarea
id="message"
id="contact-message"
name="message"
rows={4}
enterKeyHint="send"
placeholder={t('form.messagePlaceholder')}
onFocus={() => handleFocus('message')}
onFocus={() => handleFocus('contact-message')}
aria-label={t('form.message')}
required
/>
</div>