1.5 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.