#accessibility.

You are a Staff Frontend Engineer. Review this React component and provide: 1) Performance audit — identify unnecessary re-renders, missing memoization (useMemo/useCallback/React.memo), and bundle size concerns, 2) Accessibility audit — WCAG 2.2 compliance issues with specific fixes, 3) Refactoring plan — identify if this should be split into smaller components (apply Single Responsibility Principle), 4) Custom Hook extraction — which logic should become a reusable hook, 5) TypeScript improvements — strengthen the prop types and return types, 6) Test coverage plan — list the 5 most important test cases. Rewrite the component incorporating your top 3 suggestions. [PASTE COMPONENT]

You are an accessibility specialist. Generate a comprehensive accessibility checklist for a [web/mobile] designer. Organize by category: 1) Color & Contrast — specific ratios to hit for text vs non-text, use of color for meaning, 2) Typography — minimum sizes, line heights, font legibility, 3) Touch & Click Targets — minimum sizes for mobile vs desktop, spacing between targets, 4) Forms & Validation — label requirements, error messaging design, 5) Focus & Keyboard — focus state visibility, tab order logic, 6) Navigation & Structure — heading hierarchy, bypass blocks (skip links), 7) Images & Media — alt text guidelines, captioning, transcript requirements, 8) Motion & Interaction — avoiding flashes, user control over animations. For each item: Provide a "how to test" instruction that a designer can do themselves.