From d93b453d532daf5b2f5abe1875191a2a38f6e371 Mon Sep 17 00:00:00 2001 From: Marc Mintel Date: Wed, 18 Feb 2026 00:59:31 +0100 Subject: [PATCH] feat(a11y): implement screen reader support and accessibility optimizations --- .gitea/workflows/ci.yml | 6 + .pa11yci.json | 26 ++ app/[locale]/layout.tsx | 10 +- components/ContactForm.tsx | 33 +- components/DatasheetDownload.tsx | 9 +- components/Footer.tsx | 14 +- components/Header.tsx | 54 ++- components/Lightbox.tsx | 51 ++- components/ProductTechnicalData.tsx | 58 ++- components/RelatedProducts.tsx | 1 + components/RequestQuoteForm.tsx | 22 +- components/Scribble.tsx | 46 +- components/SkipLink.tsx | 16 + components/blog/PowerCTA.tsx | 61 ++- components/home/GallerySection.tsx | 2 + components/home/HeroIllustration.tsx | 1 + components/home/ProductCategories.tsx | 1 + components/home/RecentPosts.tsx | 1 + components/home/WhyChooseUs.tsx | 38 +- messages/en.json | 6 +- next-env.d.ts | 2 +- package.json | 4 + pnpm-lock.yaml | 587 +++++++++++++++++++++++++- 23 files changed, 949 insertions(+), 100 deletions(-) create mode 100644 .pa11yci.json create mode 100644 components/SkipLink.tsx diff --git a/.gitea/workflows/ci.yml b/.gitea/workflows/ci.yml index 048b4c53..211e9b32 100644 --- a/.gitea/workflows/ci.yml +++ b/.gitea/workflows/ci.yml @@ -34,3 +34,9 @@ jobs: - name: 🧪 QA Checks run: pnpm check:mdx && pnpm lint && pnpm typecheck && pnpm test + + - name: 🏗️ Build + run: pnpm build + + - name: ♿ Accessibility Check + run: pnpm check:a11y diff --git a/.pa11yci.json b/.pa11yci.json new file mode 100644 index 00000000..1de1549e --- /dev/null +++ b/.pa11yci.json @@ -0,0 +1,26 @@ +{ + "defaults": { + "standard": "WCAG2AA", + "runners": ["axe", "htmlcs"], + "ignore": ["color-contrast"], + "timeout": 50000, + "wait": 1000, + "chromeLaunchConfig": { + "args": ["--no-sandbox", "--disable-setuid-sandbox", "--disable-dev-shm-usage"] + }, + "threshold": 25 + }, + "urls": [ + "http://localhost:3000/en", + "http://localhost:3000/en/blog", + "http://localhost:3000/en/blog/which-cables-for-wind-power-differences-from-low-to-extra-high-voltage-explained-2", + "http://localhost:3000/en/contact", + "http://localhost:3000/en/team", + "http://localhost:3000/en/products", + "http://localhost:3000/en/products/medium-voltage-cables", + "http://localhost:3000/en/products/low-voltage-cables", + "http://localhost:3000/en/products/medium-voltage-cables/n2xs2y", + "http://localhost:3000/en/legal-notice", + "http://localhost:3000/en/privacy-policy" + ] +} diff --git a/app/[locale]/layout.tsx b/app/[locale]/layout.tsx index 2f253a5e..3a51b6df 100644 --- a/app/[locale]/layout.tsx +++ b/app/[locale]/layout.tsx @@ -3,6 +3,7 @@ import Header from '@/components/Header'; import JsonLd from '@/components/JsonLd'; import AnalyticsProvider from '@/components/analytics/AnalyticsProvider'; import ScrollDepthTracker from '@/components/analytics/ScrollDepthTracker'; +import SkipLink from '@/components/SkipLink'; import CMSConnectivityNotice from '@/components/CMSConnectivityNotice'; import { RecordModeProvider } from '@/components/record-mode/RecordModeContext'; import { RecordModeVisuals } from '@/components/record-mode/RecordModeVisuals'; @@ -100,9 +101,16 @@ export default async function Layout(props: { +
-
{children}
+
+ {children} +