implementation
Implement in your agent
# Implement Tabs in your agent ## Objective Implement Tabs for this verified behavior: A set of labels that switches between related content panels while keeping one panel visible at a time. ## Prerequisites - Inspect the repository, design system, and existing tests first. - Preserve unrelated changes and keep the file scope bounded. - Confirm that Tabs matches the need before writing code. ## Required behavior - The selected tab exposes its associated panel while the other panels are hidden. - Arrow keys move through related items according to their visual orientation. ## States to cover - Overview tab selected — Overview tab selected - Files tab selected — Files tab selected ## Accessibility - The primary control or named region for Tabs has a stable accessible name from visible text or an explicit programmatic label; placeholder text and tooltips are not names. - The tab list is one tab stop; the visible panel is reachable in normal document order when it contains focusable content. - Not applicable: selecting another tab replaces the visible panel without closing the component. - Tab enters the selected tab - Arrow keys move between tabs - Enter or Space activates in manual mode - Home and End reach the first and last tab ## Non-goals - Users need to compare panels simultaneously - Each destination deserves its own URL and page navigation ## Acceptance criteria - Every tab controls exactly one panel - Only one peer panel is presented at a time - Arrow and activation behavior is documented - Slow panels use manual activation
sha256:5101ce076e04f537b907ac1163ea963cb92cf93427f62e1e63c16e2313e5e94f