feat(a11y): add skip to content link

- Add `SkipLink` component to `src/components/ui`
- Integrate `SkipLink` in `src/App.tsx`
- Add `id="main-content"` and proper focus management to page containers
- Add translations for the skip link text
- Add unit test for `SkipLink`

Co-authored-by: ragusa-it <196988693+ragusa-it@users.noreply.github.com>
This commit is contained in:
google-labs-jules[bot]
2026-02-02 01:47:55 +00:00
parent 2587b9dd29
commit 6041adcaf3
11 changed files with 80 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-14 - Skip to Content Implementation
**Learning:** Implementing a "Skip to Content" link requires not just the link component, but ensuring the target `<main>` element has `tabIndex={-1}` and `outline: 'none'` (or CSS equivalent) to ensure programmatic focus works correctly without creating an ugly focus ring on the container.
**Action:** When adding skip links, always verify the target container's focusability and visual focus style.