evals
scenario-1
scenario-10
scenario-2
scenario-3
scenario-4
scenario-5
scenario-6
scenario-7
scenario-8
scenario-9
{
"context": "This criteria evaluates how well the engineer uses @radix-ui/react-tooltip to implement keyboard-accessible help tooltips. The focus is on proper component composition, keyboard event handling (focus, blur, Escape), and ARIA accessibility attributes.",
"type": "weighted_checklist",
"checklist": [
{
"name": "Component composition",
"description": "Uses the correct component hierarchy: TooltipProvider wrapping Tooltip component(s), each Tooltip containing TooltipTrigger and TooltipContent components. Provider is placed at an appropriate level in the component tree.",
"max_score": 20
},
{
"name": "Focus triggering",
"description": "Tooltip opens automatically when the input receives keyboard focus (via Tab navigation). This should work without custom onFocus handlers due to the built-in behavior of TooltipTrigger with keyboard focus events.",
"max_score": 20
},
{
"name": "Blur handling",
"description": "Tooltip closes automatically when the input loses focus (blur event). This should work through the built-in behavior of TooltipTrigger's onBlur handling.",
"max_score": 15
},
{
"name": "Escape key handling",
"description": "Tooltip closes when Escape key is pressed while the trigger element is focused. Uses the built-in onEscapeKeyDown functionality of TooltipContent or allows default Escape behavior.",
"max_score": 15
},
{
"name": "ARIA role",
"description": "TooltipContent automatically provides role=\"tooltip\" to the help content, making it properly announced to screen readers. No custom role attribute needed.",
"max_score": 10
},
{
"name": "ARIA describedby relationship",
"description": "The trigger element has aria-describedby attribute that references the tooltip content when open. This is automatically handled by TooltipTrigger and TooltipContent through their internal ID management.",
"max_score": 10
},
{
"name": "Portal usage",
"description": "Uses TooltipPortal to render tooltip content outside the DOM hierarchy, preventing z-index and overflow issues. This is essential for proper tooltip positioning.",
"max_score": 5
},
{
"name": "Trigger element setup",
"description": "The input element is properly wrapped with or rendered as the TooltipTrigger, ensuring all keyboard events (focus, blur, Escape) are captured by the tooltip system.",
"max_score": 5
}
]
}