{
  "context": "This criteria evaluates how well the engineer uses @headlessui/react components to build an accessible form with automatic ARIA attribute management. The focus is on proper use of Label, Description, Field, Fieldset, Switch, and Checkbox components.",
  "type": "weighted_checklist",
  "checklist": [
    {
      "name": "Switch component usage",
      "description": "Uses the Switch component from @headlessui/react for the dark mode toggle",
      "max_score": 15
    },
    {
      "name": "Label component usage",
      "description": "Uses the Label component from @headlessui/react to associate labels with form controls (the dark mode switch and checkboxes)",
      "max_score": 20
    },
    {
      "name": "Description component usage",
      "description": "Uses the Description component from @headlessui/react to provide additional context for the toggle and fieldset",
      "max_score": 15
    },
    {
      "name": "Field component usage",
      "description": "Uses the Field component from @headlessui/react to group the Switch with its Label and Description for automatic ARIA association",
      "max_score": 15
    },
    {
      "name": "Fieldset component usage",
      "description": "Uses the Fieldset component from @headlessui/react to group the notification preferences checkboxes",
      "max_score": 10
    },
    {
      "name": "Checkbox component usage",
      "description": "Uses the Checkbox component from @headlessui/react for email and push notification preferences",
      "max_score": 15
    },
    {
      "name": "Automatic ARIA associations",
      "description": "Relies on @headlessui/react's automatic ARIA attribute management without manually adding aria-labelledby or aria-describedby attributes",
      "max_score": 10
    }
  ]
}