or run

npx @tessl/cli init
Log in

Version

Files

docs

arrow.mdindex.mdportal-content.mdprovider.mdtooltip-root.mdtrigger.mdutilities.md
tile.json

rubric.jsonevals/scenario-8/

{
  "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
    }
  ]
}