CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-headlessui--react

A set of completely unstyled, fully accessible UI components for React, designed to integrate beautifully with Tailwind CSS.

84

1.25x
Overview
Eval results
Files

rubric.jsonevals/scenario-9/

{
  "context": "This criteria evaluates how well the engineer uses Headless UI's custom hooks library to build an accessible modal dialog with proper focus management, programmatic control, and ARIA associations. The focus is on correctly using FocusTrap, useClose, useLabelledBy, useDescribedBy, Label, and Description components.",
  "type": "weighted_checklist",
  "checklist": [
    {
      "name": "FocusTrap implementation",
      "description": "Uses the FocusTrap component to wrap the modal dialog content with appropriate features enabled (InitialFocus, TabLock, RestoreFocus). The FocusTrap should contain all interactive elements within the modal.",
      "max_score": 25
    },
    {
      "name": "useClose hook usage",
      "description": "The ActionButton component uses the useClose hook to access the close function from the modal context, enabling it to close the modal without receiving close handlers via props. Both Cancel and Submit buttons should use this pattern.",
      "max_score": 20
    },
    {
      "name": "Label component usage",
      "description": "Uses the Label component from @headlessui/react to render the modal title, which automatically generates an ID and makes it available for aria-labelledby association.",
      "max_score": 15
    },
    {
      "name": "Description component usage",
      "description": "Uses the Description component from @headlessui/react to render the modal description text, which automatically generates an ID and makes it available for aria-describedby association.",
      "max_score": 15
    },
    {
      "name": "useLabelledBy hook",
      "description": "Uses the useLabelledBy hook to retrieve the label ID(s) and applies it to the dialog element's aria-labelledby attribute, creating proper association between the dialog and its title.",
      "max_score": 12
    },
    {
      "name": "useDescribedBy hook",
      "description": "Uses the useDescribedBy hook to retrieve the description ID and applies it to the dialog element's aria-describedby attribute, creating proper association between the dialog and its description.",
      "max_score": 13
    }
  ]
}

Install with Tessl CLI

npx tessl i tessl/npm-headlessui--react

tile.json