6041adcaf3
- 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>
1.9 KiB
2024-05-24 - Accessible Input Validation
Learning: React 19 renders aria-invalid={false} as aria-invalid="false", unlike older versions which might have omitted it. Explicitly handling this in tests is crucial. Also, ensuring DOM cleanup (cleanup()) in afterEach is vital when testing similar components with same labels across tests to avoid "finding the wrong element" false positives/negatives.
Action: Always include afterEach(() => cleanup()) in vitest setup for DOM tests, and expect aria-invalid="false" (or explicitly handle undefined if omission is desired) when testing valid states in React 19.
2024-05-24 - Accessible Loading Buttons
Learning: Replacing button text with a spinner destroys the accessible name.
Action: Use aria-busy="true", keep children in DOM (visually hidden via opacity/class), and overlay spinner absolutely. Ensure wrapper element replicates flex layout (gap/alignment) to prevent layout shifts.
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.