6d94ac7b93
- Add `aria-busy` attribute to Button when loading. - Refactor Button rendering to keep children in DOM (visually hidden) instead of unmounting. - Fix layout shift regression by replicating flex properties in content wrapper. - Move inline styles to CSS modules. - Add tests for loading state accessibility. Co-authored-by: ragusa-it <196988693+ragusa-it@users.noreply.github.com>
972 B
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.