{
  "context": "This criteria evaluates how well the engineer uses Headless UI's automatic label and description association features to build accessible forms. The focus is on proper usage of Field, Label, Description, Input, Textarea, and Checkbox components to achieve automatic ARIA attribute management without manual ID handling.",
  "type": "weighted_checklist",
  "checklist": [
    {
      "name": "Field component usage",
      "description": "Each form field (username, email, bio, newsletter) is wrapped in a Field component from @headlessui/react to enable automatic context-based association",
      "max_score": 20
    },
    {
      "name": "Label component usage",
      "description": "Each form field uses the Label component from @headlessui/react (not native <label> elements) to enable automatic ID generation and aria-labelledby association",
      "max_score": 20
    },
    {
      "name": "Description component usage",
      "description": "Each form field uses the Description component from @headlessui/react to enable automatic ID generation and aria-describedby association",
      "max_score": 20
    },
    {
      "name": "Input/Textarea components",
      "description": "Uses Input component from @headlessui/react for text inputs (username, email) and Textarea component for the bio field, enabling automatic ARIA attribute wiring",
      "max_score": 15
    },
    {
      "name": "Checkbox component usage",
      "description": "Uses Checkbox component from @headlessui/react for the newsletter field, enabling automatic label and description association for checkbox inputs",
      "max_score": 15
    },
    {
      "name": "No manual IDs",
      "description": "Does not manually specify id, htmlFor, aria-labelledby, or aria-describedby attributes, allowing Headless UI to handle all associations automatically",
      "max_score": 10
    }
  ]
}