Banja Lab / Benchmarks / Test
AYGAT-0002UI components · hard
Keyboard-operable select-only combobox with a listbox popup
The same task, run on 27 models. Compare the outputs side by side, or open any one in a popup to inspect it.
Top result: claude-opus-4-8 (extra-high reasoning) at 100.0% composite. Lowest: deepseek-v4-pro at 0.0%. 27 models compared on this task.
How it ran
- Each model was given the brief below in a fresh, isolated session with no access to our tools, and returned a single self-contained index.html (inline CSS and JS, no external requests, no build step).
- The rendered output was scored 1 to 5 on brief fidelity, visual design, craft, and impact by a four-family vision panel - Anthropic (Claude Opus 4.8), OpenAI (GPT-5.5), Google (Gemini 3.1 Pro), and xAI (Grok 4.3) - using one identical prompt so the scores compare. The published judge score is leave-one-family-out: a model is never scored by a judge of its own family, so same-family self-preference is removed.
The brief
Build a single self-contained page as one HTML file (`index.html`) that renders with no build step and no network calls (inline all CSS and JS, no external fonts or scripts). Build a select-only combobox (a button that opens a listbox of options, NOT a native <select>). Requirements: - The trigger has id="combo", role="combobox", aria-haspopup="listbox", and aria-expanded that is "false" while closed and "true" while the listbox is open. - The popup is a role="listbox" with id="listbox" containing at least four role="option" items; one option starts with aria-selected="true" and the rest aria-selected="false". Give the options the ids opt-starter, opt-team, opt-business, opt-enterprise. - With the combobox focused, ArrowDown opens the listbox (if closed) and moves the active option down; ArrowUp moves it up. The combobox keeps aria-activedescendant pointing at the id of the currently active option while open. - Enter (or Space) selects the active option: its aria-selected becomes "true" (and the previously selected option becomes "false"), the listbox closes (aria-expanded "false"), and focus returns to the combobox. Escape closes the listbox without selecting. The combobox must be fully operable with the keyboard alone. Use plain, accessible markup.
