feat(a11y): Add Skip to Content link

- Added `SkipLink` component to allow keyboard users to bypass navigation.
- Updated `Home`, `About`, and `Contact` pages to include `id="main-content"` target.
- Added translation strings for English and German.
- Added unit tests for `SkipLink`.
- Verified with Playwright.

Co-authored-by: ragusa-it <196988693+ragusa-it@users.noreply.github.com>
This commit is contained in:
google-labs-jules[bot]
2026-02-06 02:01:03 +00:00
parent 2587b9dd29
commit 3f175396d6
11 changed files with 83 additions and 4 deletions

View File

@@ -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-02-23 - Robust Skip Links
**Learning:** For "Skip to Content" links to work reliably with SPA routers and all browsers, the target element needs `tabIndex={-1}` to be programmatically focusable. Using `transform: translateY(-100%)` for hiding is performant but requires `z-index` management to ensure visibility on focus.
**Action:** Always add `id="main-content"`, `tabIndex={-1}`, and `outline: 'none'` (to prevent focus ring on container) to the target `<main>` element when implementing skip links.