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

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

2
components/home/GallerySection.tsx
View File

@@ -33,6 +33,8 @@ export default function GallerySection() {
{images.map((src, idx) => (
<button
key={idx}
type="button"
aria-label={`${t('alt')} ${idx + 1}`}
onClick={() => {
const params = new URLSearchParams(searchParams.toString());
params.set('photo', idx.toString());

1
components/home/HeroIllustration.tsx
View File

@@ -137,6 +137,7 @@ export default function HeroIllustration() {
preserveAspectRatio="xMidYMid meet"
fill="none"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
>
<defs>
<linearGradient id="energy-pulse" x1="0%" y1="0%" x2="100%" y2="0%">

1
components/home/ProductCategories.tsx
View File

@@ -43,6 +43,7 @@ export default function ProductCategories() {
return (
<Section className="bg-neutral-light py-0 md:py-0 lg:py-0 -mt-px">
<h2 className="sr-only">{t('title')}</h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
{categories.map((category, idx) => (
<Link

1
components/home/RecentPosts.tsx
View File

@@ -72,6 +72,7 @@ export default async function RecentPosts({ locale }: RecentPostsProps) {
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
strokeLinecap="round"

38
components/home/WhyChooseUs.tsx
View File

@@ -17,16 +17,29 @@ export default function WhyChooseUs() {
<p className="text-base md:text-lg text-text-secondary leading-relaxed">
{t('subtitle')}
</p>
<div className="mt-12 space-y-6">
{[0, 1, 2, 3].map((i) => (
<div key={i} className="flex items-center gap-4">
<div className="flex-shrink-0 w-6 h-6 rounded-full bg-accent flex items-center justify-center">
<svg className="w-4 h-4 text-primary-dark" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
<svg
className="w-4 h-4 text-primary-dark"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={3}
d="M5 13l4 4L19 7"
/>
</svg>
</div>
<span className="font-bold text-primary-dark text-base md:text-base">{t(`features.${i}`)}</span>
<span className="font-bold text-primary-dark text-base md:text-base">
{t(`features.${i}`)}
</span>
</div>
))}
</div>
@@ -34,12 +47,21 @@ export default function WhyChooseUs() {
</div>
<div className="lg:col-span-8 grid grid-cols-1 md:grid-cols-2 gap-8 order-2 lg:order-1">
{[0, 1, 2, 3].map((idx) => (
<div key={idx} className="p-10 bg-white rounded-3xl border border-neutral-medium hover:border-accent transition-all duration-500 hover:shadow-xl group">
<div
key={idx}
className="p-10 bg-white rounded-3xl border border-neutral-medium hover:border-accent transition-all duration-500 hover:shadow-xl group"
>
<div className="w-14 h-14 bg-saturated/10 rounded-2xl flex items-center justify-center mb-8 group-hover:bg-accent transition-colors duration-500">
<span className="text-white font-bold text-lg group-hover:text-primary-dark">0{idx + 1}</span>
<span className="text-white font-bold text-lg group-hover:text-primary-dark">
0{idx + 1}
</span>
</div>
<h3 className="text-xl font-bold mb-4 text-primary-dark">{t(`items.${idx}.title`)}</h3>
<p className="text-text-secondary text-base md:text-base leading-relaxed">{t(`items.${idx}.description`)}</p>
<h3 className="text-xl font-bold mb-4 text-primary-dark">
{t(`items.${idx}.title`)}
</h3>
<p className="text-text-secondary text-base md:text-base leading-relaxed">
{t(`items.${idx}.description`)}
</p>
</div>
))}
</div>