code-review-ui

Code Review — UI / Frontend Layer

Focus on accessibility, performance, and correctness at the rendering boundary.

---

Accessibility (WCAG AA)

• Missing alt text on images — every <img> needs an alt attribute. Decorative images use alt="". Never alt="image" or alt="photo".
• Interactive element is not keyboard-accessible — a <div onClick> or <span onClick> is not focusable by default. Use <button> or add role/tabIndex and keyboard event handlers.
• Color contrast — text must meet 4.5:1 contrast ratio (3:1 for large text). Check with a contrast analyzer before approving color changes.
• Missing form labels — every <input> needs a visible <label> or aria-label. Placeholder text is not a substitute.
• Inaccessible error messages — form validation errors must be associated with the input (aria-describedby) and announced to screen readers.
• Focus management after state change — modals, dialogs, and popups must move focus to the new content on open and restore it on close.
• Missing ARIA role on custom widget — a custom dropdown, slider, or menu must declare its ARIA role and maintain ARIA state (aria-expanded, aria-selected, etc.).

---

State Management

• Server state stored in client state — data fetched from an API stored in useState/useReducer/Vuex instead of a server state cache (React Query, SWR, Apollo). Leads to stale reads and manual invalidation bugs.
• Derived state stored explicitly — const [fullName, setFullName] = useState(...) when fullName = firstName + lastName is derivable. Store the minimum, compute the rest.
• State updated without immutability — mutating a React/Vue state object directly (state.items.push(...)) instead of returning a new reference. Breaks change detection.
• Global state for local data — adding to a global store (Redux, Zustand, Pinia) something only one component uses. Use useState / component-local state first.
• Missing loading / error states — async data fetch with no handling of the pending or error case. The UI silently shows nothing or crashes.