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

This commit is contained in:
2026-02-18 00:59:31 +01:00
parent 02bd1dcd7f
commit 374fcc9689
23 changed files with 949 additions and 100 deletions

View File

@@ -80,7 +80,11 @@ export default function RequestQuoteForm({ productName }: RequestQuoteFormProps)
if (status === 'success') {
return (
<div className="bg-accent/5 border border-accent/20 text-primary-dark p-4 rounded-xl text-center animate-fade-in !mt-0 w-full">
<div
className="bg-accent/5 border border-accent/20 text-primary-dark p-4 rounded-xl text-center animate-fade-in !mt-0 w-full"
role="alert"
aria-live="polite"
>
<div className="flex justify-center mb-3">
<div className="w-10 h-10 bg-accent rounded-full flex items-center justify-center shadow-lg shadow-accent/20">
<svg
@@ -118,7 +122,11 @@ export default function RequestQuoteForm({ productName }: RequestQuoteFormProps)
if (status === 'error') {
return (
<div className="bg-destructive/5 border border-destructive/20 text-destructive p-4 rounded-xl text-center animate-fade-in !mt-0 w-full">
<div
className="bg-destructive/5 border border-destructive/20 text-destructive p-4 rounded-xl text-center animate-fade-in !mt-0 w-full"
role="alert"
aria-live="assertive"
>
<div className="flex justify-center mb-3">
<div className="w-10 h-10 bg-destructive rounded-full flex items-center justify-center shadow-lg shadow-destructive/20">
<svg
@@ -158,25 +166,27 @@ export default function RequestQuoteForm({ productName }: RequestQuoteFormProps)
<div className="space-y-1 !mt-0">
<Input
type="email"
id="email"
id="quote-email"
required
value={email}
onChange={(e) => setEmail(e.target.value)}
onFocus={() => handleFocus('email')}
onFocus={() => handleFocus('quote-email')}
placeholder={t('email')}
aria-label={t('email')}
className="h-9 text-xs !mt-0"
/>
</div>
<div className="space-y-1 !mt-0">
<Textarea
id="request"
id="quote-request"
required
rows={3}
value={request}
onChange={(e) => setRequest(e.target.value)}
onFocus={() => handleFocus('request')}
onFocus={() => handleFocus('quote-request')}
placeholder={t('message')}
aria-label={t('message')}
className="text-xs !mt-0"
/>
</div>