{"slug": "what-to-check-when-reviewing-ai-generated-ui", "title": "What to Check When Reviewing AI-Generated UI", "summary": "A developer outlines key accessibility and usability checkpoints for reviewing AI-generated user interfaces, emphasizing proper label-input associations, unique IDs, accessible names for icon buttons, explicit button types, and semantic HTML elements. The guidance applies to hand-written code as well and includes React-specific examples using useId and htmlFor.", "body_md": "AI can help us build a form, a modal, or a dashboard quickly.\n\nThe result may look good. The inputs accept text. The buttons respond. The layout fits the screen.\n\nBut before merging the code, there is another question to ask:\n\n**Does the UI work well beyond the happy path?**\n\nSome details are easy to miss during a visual review. A label may not be connected to its input. An icon button may have no accessible name. A secondary button may submit a form by accident.\n\nThese are review checkpoints, not claims that every AI tool makes these mistakes. They apply to code we write ourselves too.\n\nThe examples below use React, but most of the ideas come from HTML and apply across frameworks. The snippets focus on individual details rather than a complete application.\n\nThis looks reasonable:\n\n```\n\n\n```\n\nThe text is visible, but the label and input are not connected. In JSX, use `htmlFor` with a matching input `id`:\n\n```\n\n\n```\n\nThis gives the input an accessible name. Clicking the label also focuses the input. In plain HTML, the attribute is `for`; React uses `htmlFor`.\n\nWrapping an input inside its label is another valid approach. The point is to create the association, not to add `htmlFor` everywhere.\n\nAlso, remember that a placeholder is a hint. It should never replace a visible label.\n\nA hardcoded `id=\"email\"` can work for one field. But what happens when the same component appears twice on the same screen?\n\nDuplicate IDs break label associations and assistive technology references. For reusable React components, React's `useId` hook ensures instance-level uniqueness:\n\n``` js\nimport { useId } from \"react\";\n\nfunction EmailField() {\n const id = useId();\n\n return (\n
\n \n \n
\n );\n}\n```\n\nEach instance gets its own unique ID for the label connection.\n\n**Rule of thumb:** `useId` is for accessibility relationships. List keys should come from your underlying data.\n\nA magnifying glass icon may clearly mean “Search” to someone looking at the screen. Make sure the button also provides a programmatic name for screen readers, as well as a visual cue for sighted users who might find the icon ambiguous:\n\n```\n\n```\n\nHere, `aria-label` supplies the accessible name, while `aria-hidden=\"true\"` hides the decorative SVG to avoid redundant announcements. Adding `title` or a tooltip gives sighted mouse and keyboard users clarity on hover and focus.\n\nIf a button already contains visible text:\n\n```\n\n```\n\nIt does not need an additional `aria-label`. Prefer visible text whenever the design allows.\n\nInside a `