Banja Lab / Benchmarks / Test
AYGAT-0004UI components · hard
Keyboard-operable tabs with roving tabindex and arrow-key activation
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 (max reasoning) at 100.0% composite. Lowest: deepseek-v4-flash 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 tabbed interface following the WAI-ARIA tabs pattern with roving tabindex. Requirements: - A role="tablist" containing exactly three role="tab" buttons with the ids tab-profile, tab-security, tab-billing. Exactly one tab is selected on load (aria-selected="true") and only the selected tab has tabindex="0"; the others have tabindex="-1" (roving tabindex). - Three role="tabpanel" elements with ids panel-profile, panel-security, panel-billing; only the selected tab's panel is visible, the others are hidden. - When a tab has focus, ArrowRight moves focus to the next tab and ArrowLeft to the previous (wrapping at the ends). Moving to a tab activates it: its aria-selected becomes "true" (the previous tab's becomes "false"), its tabindex becomes 0, and its panel is shown while the others are hidden (automatic activation). The tabs must be fully operable with the keyboard alone. Use plain, accessible markup.
