{
  "context": "This evaluation assesses how effectively the engineer uses @headlessui/react's focus trap and modal components to implement proper focus management for a modal dialog. The criteria focuses on correct usage of Dialog, FocusTrap, and related accessibility components.",
  "type": "weighted_checklist",
  "checklist": [
    {
      "name": "Dialog Component Usage",
      "description": "Uses the Dialog component from @headlessui/react to create the modal structure with proper open/close state management",
      "max_score": 20
    },
    {
      "name": "FocusTrap Implementation",
      "description": "Correctly implements focus trapping using either FocusTrap component or Dialog's built-in focus trap to prevent tab navigation outside the modal",
      "max_score": 25
    },
    {
      "name": "Initial Focus Management",
      "description": "Uses data-autofocus attribute or DialogPanel's initialFocus prop to automatically focus the Username input when the modal opens",
      "max_score": 15
    },
    {
      "name": "Focus Restoration",
      "description": "Properly restores focus to the trigger button when the modal closes, leveraging Dialog's automatic focus restoration",
      "max_score": 15
    },
    {
      "name": "Dialog Button Integration",
      "description": "Uses DialogButton or Button component from @headlessui/react for the trigger button to enable proper modal opening behavior",
      "max_score": 10
    },
    {
      "name": "Escape Key Handling",
      "description": "Implements modal closing on Escape key press using Dialog's built-in keyboard handling",
      "max_score": 10
    },
    {
      "name": "Background Interaction Prevention",
      "description": "Uses Dialog's built-in inert management or DialogBackdrop to prevent interaction with content behind the modal",
      "max_score": 5
    }
  ]
}