From a136c9c236f760d81631cb27fd62e5b977695a01 Mon Sep 17 00:00:00 2001 From: "google-labs-jules[bot]" <161369871+google-labs-jules[bot]@users.noreply.github.com> Date: Thu, 5 Feb 2026 02:00:18 +0000 Subject: [PATCH] feat(a11y): add Skip Link component and main content IDs - Add `SkipLink` component that appears on focus and jumps to main content. - Update `en.ts` and `de.ts` with "Skip to content" translation. - Add `id="main-content"`, `tabIndex={-1}`, and `outline: 'none'` to `Home`, `About`, and `Contact` pages to ensure proper focus management. - Add tests for `SkipLink`. - Document Skip Link pattern in `.Jules/palette.md`. This improves accessibility for keyboard and screen reader users by allowing them to bypass navigation. Co-authored-by: ragusa-it <196988693+ragusa-it@users.noreply.github.com> --- .Jules/palette.md | 4 +++ src/App.tsx | 3 +- src/components/ui/SkipLink.module.css | 22 ++++++++++++ src/components/ui/SkipLink.tsx | 12 +++++++ src/components/ui/__tests__/SkipLink.test.tsx | 36 +++++++++++++++++++ src/components/ui/index.ts | 1 + src/i18n/de.ts | 1 + src/i18n/en.ts | 1 + src/pages/About.tsx | 8 ++++- src/pages/Contact.tsx | 7 +++- src/pages/Home.tsx | 2 +- 11 files changed, 93 insertions(+), 4 deletions(-) create mode 100644 src/components/ui/SkipLink.module.css create mode 100644 src/components/ui/SkipLink.tsx create mode 100644 src/components/ui/__tests__/SkipLink.test.tsx diff --git a/.Jules/palette.md b/.Jules/palette.md index 7d3d798..690800f 100644 --- a/.Jules/palette.md +++ b/.Jules/palette.md @@ -9,3 +9,7 @@ ## 2024-05-24 - Enhancing Inputs Safely **Learning:** Adding features like character counters to generic input components must handle both controlled and uncontrolled states. Assuming a component is controlled (using `props.value`) can break uncontrolled usage by showing stale data (e.g., sticking at 0/100). **Action:** When enhancing generic components, detect uncontrolled state (e.g., `props.value === undefined`) and either implement internal state tracking or gracefully degrade (hide the feature) to avoid misleading UX. + +## 2025-05-24 - Skip Link Focus Management +**Learning:** For a "Skip to content" link to effectively move focus in an SPA, the target container (e.g., `
`) must be programmatically focusable. Simply having an ID is not enough; `tabIndex={-1}` is required. Additionally, standard browser behavior might show a focus ring on the container, which is often undesirable for non-interactive wrappers, so `outline: 'none'` should be applied inline or via CSS. +**Action:** Always add `tabIndex={-1}` and `outline: 'none'` to the target of a Skip Link (`#main-content`) to ensure correct focus behavior without visual clutter. diff --git a/src/App.tsx b/src/App.tsx index 5c4e796..41f5efc 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -3,7 +3,7 @@ import { BrowserRouter, Routes, Route } from 'react-router-dom'; import { LanguageProvider } from './i18n'; import { Navbar, Footer, FancyCursor, ScrollToTop } from './components/layout'; import { Home } from './pages/Home'; -import { PageLoader } from './components/ui'; +import { PageLoader, SkipLink } from './components/ui'; import './styles/global.css'; // Lazy load pages to reduce initial bundle size. @@ -15,6 +15,7 @@ export function App() { return ( + diff --git a/src/components/ui/SkipLink.module.css b/src/components/ui/SkipLink.module.css new file mode 100644 index 0000000..89e3687 --- /dev/null +++ b/src/components/ui/SkipLink.module.css @@ -0,0 +1,22 @@ +.skipLink { + position: fixed; + top: 0; + left: 0; + width: 100%; + padding: 1rem; + background-color: var(--md-sys-color-background); + color: var(--md-sys-color-primary); + text-align: center; + font-weight: 600; + z-index: 10000; + transform: translateY(-100%); + transition: transform 0.2s ease-in-out; + text-decoration: none; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); +} + +.skipLink:focus { + transform: translateY(0); + outline: 2px solid var(--md-sys-color-primary); + outline-offset: -2px; +} diff --git a/src/components/ui/SkipLink.tsx b/src/components/ui/SkipLink.tsx new file mode 100644 index 0000000..7e1dcdc --- /dev/null +++ b/src/components/ui/SkipLink.tsx @@ -0,0 +1,12 @@ +import { useTranslation } from '../../i18n'; +import styles from './SkipLink.module.css'; + +export function SkipLink() { + const { t } = useTranslation(); + + return ( + + {t.nav.skipToContent} + + ); +} diff --git a/src/components/ui/__tests__/SkipLink.test.tsx b/src/components/ui/__tests__/SkipLink.test.tsx new file mode 100644 index 0000000..296721f --- /dev/null +++ b/src/components/ui/__tests__/SkipLink.test.tsx @@ -0,0 +1,36 @@ +// @vitest-environment jsdom +import { render, screen, cleanup } from '@testing-library/react'; +import { vi, describe, it, expect, afterEach } from 'vitest'; +import { SkipLink } from '../SkipLink'; + +// Mock translation +vi.mock('../../../i18n', () => ({ + useTranslation: () => ({ + t: { + nav: { + skipToContent: 'Skip to content', + }, + }, + }), +})); + +describe('SkipLink', () => { + afterEach(() => { + cleanup(); + }); + + it('renders correctly', () => { + render(); + const link = screen.getByText('Skip to content'); + expect(link).toBeDefined(); + expect(link.getAttribute('href')).toBe('#main-content'); + }); + + it('is initially hidden (via CSS class)', () => { + render(); + const link = screen.getByText('Skip to content'); + // We can't test CSS module class values easily in jsdom without setup, + // but we can check the class name exists + expect(link.className).toContain('_skipLink_'); + }); +}); diff --git a/src/components/ui/index.ts b/src/components/ui/index.ts index 78cc7f9..f857f96 100644 --- a/src/components/ui/index.ts +++ b/src/components/ui/index.ts @@ -2,3 +2,4 @@ export { Button } from './Button'; export { Card } from './Card'; export { Input, Textarea } from './Input'; export { PageLoader } from './PageLoader'; +export { SkipLink } from './SkipLink'; diff --git a/src/i18n/de.ts b/src/i18n/de.ts index 0b42d51..6e3b346 100644 --- a/src/i18n/de.ts +++ b/src/i18n/de.ts @@ -4,6 +4,7 @@ export const de = { home: 'Startseite', about: 'Über uns', contact: 'Kontakt', + skipToContent: 'Zum Inhalt springen', }, // Hero Section diff --git a/src/i18n/en.ts b/src/i18n/en.ts index 20c8a34..fc27f1c 100644 --- a/src/i18n/en.ts +++ b/src/i18n/en.ts @@ -6,6 +6,7 @@ export const en: Translations = { home: 'Home', about: 'About', contact: 'Contact', + skipToContent: 'Skip to content', }, // Hero Section diff --git a/src/pages/About.tsx b/src/pages/About.tsx index 928e421..93023f0 100644 --- a/src/pages/About.tsx +++ b/src/pages/About.tsx @@ -46,7 +46,13 @@ export function About() { const location = useLocation(); return ( -
+
{/* Hero Section */}
diff --git a/src/pages/Contact.tsx b/src/pages/Contact.tsx index 6332455..d499508 100644 --- a/src/pages/Contact.tsx +++ b/src/pages/Contact.tsx @@ -133,7 +133,12 @@ export function Contact() { }; return ( -
+
{/* Hero */}
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index 9273d84..685f6fd 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -2,7 +2,7 @@ import { Hero, Services } from '../components/sections'; export function Home() { return ( -
+
-- 2.49.1