Accordion

# Implement Accordion in your agent

## Objective
Implement Accordion for this verified behavior: A vertical set of headings that reveals or hides each associated content section.

## Prerequisites
- Inspect the repository, design system, and existing tests first.
- Preserve unrelated changes and keep the file scope bounded.
- Confirm that Accordion matches the need before writing code.

## Required behavior
- Activating a header reveals or hides its associated content while exposing expanded state.
- Arrow keys move through related items according to their visual orientation.

## States to cover
- Refunds collapsed
- Refunds expanded

## Accessibility
- ARIA role: heading > button[aria-expanded][aria-controls] + region
- The primary control or named region for Accordion has a stable accessible name from visible text or an explicit programmatic label; placeholder text and tooltips are not names.
- Focus remains on the header button when its panel opens or closes.
- Each expanded panel closes by activating its own header when the product allows collapse.
- Heading level, button name, expanded state, and controlled relationship are exposed.
- Tab reaches every header button
- Enter or Space toggles a section
- Optional arrow keys move between headers

## When not to use
- All content is short enough to show directly
- The sections are primary destinations that need URLs

## Acceptance criteria
- Every header is a real button inside a meaningful heading
- Expanded state matches visible content
- Single or multiple expansion is intentional
- Opening and closing never moves focus unexpectedly

## Guardrails
- Show the proposed changes before any external action.
- Do not publish, send, delete, pay for, or change remote state without explicit authorization.
- Preserve unrelated changes and stop if the scope becomes ambiguous.

## Output format
- Outcome or verdict.
- Files or actions involved.
- Checks run and observable evidence.
- Remaining blockers or limitations.

• @radix-ui/react-accordion
• Requires · Access to the repository, design system, and tests

# Verify Accordion after implementation

## Objective
Audit the Accordion implementation against its behavior, states, and accessibility requirements without changing it automatically.

## Checks
- Replay the smallest representative journey.
- Check keyboard behavior, focus, accessible name, and announcements.
- Tie each gap to a specific acceptance criterion.

## Guardrails
- Show the proposed changes before any external action.
- Do not publish, send, delete, pay for, or change remote state without explicit authorization.
- Preserve unrelated changes and stop if the scope becomes ambiguous.

## Output format
- Outcome or verdict.
- Files or actions involved.
- Checks run and observable evidence.
- Remaining blockers or limitations.

sha256:711280266c8e17e9d48287fea4e77abe16c58c9e6a89077fe44d728c8279ebe5

# Debug Accordion in your agent

## Observed symptom
[DESCRIBE THE SYMPTOM HERE]

## Observable checks
- Reproduce the issue with the smallest relevant journey.
- Compare behavior with the documented states and transitions for Accordion.
- Verify keyboard behavior, focus, accessible name, and announcements.

## Possible causes
- The chosen primitive does not match the expected behavior.
- A state, transition, or focus return is missing.
- A neighboring component captures an event or hides an accessible signal.

## Bounded corrections
- Fix the reproduced cause without recreating neighboring components.
- Preserve the public contract and add a focused regression test.
- Do not install dependencies or change remote state without authorization.

## Final verification
- Every header is a real button inside a meaningful heading
- Expanded state matches visible content
- Single or multiple expansion is intentional
- Opening and closing never moves focus unexpectedly

## Guardrails
- Show the proposed changes before any external action.
- Do not publish, send, delete, pay for, or change remote state without explicit authorization.
- Preserve unrelated changes and stop if the scope becomes ambiguous.

## Output format
- Outcome or verdict.
- Files or actions involved.
- Checks run and observable evidence.
- Remaining blockers or limitations.

• @radix-ui/react-accordion
• Requires · Access to the repository, design system, and tests

# Prevent the Accordion regression

## Objective
Turn the reproduced cause into a focused regression test and compare Accordion with neighboring concepts before widening the fix.

## Checks
- Prove that the test fails before the fix.
- Prove that it passes after the bounded fix.
- Verify that no neighboring component changed behavior.

## Guardrails
- Show the proposed changes before any external action.
- Do not publish, send, delete, pay for, or change remote state without explicit authorization.
- Preserve unrelated changes and stop if the scope becomes ambiguous.

## Output format
- Outcome or verdict.
- Files or actions involved.
- Checks run and observable evidence.
- Remaining blockers or limitations.

sha256:df782db7e0160f67416cc680ef434c412c728751af1eee481d2fa0e8bc8bb759