Overview

Develop a reusable React Accordion component that dynamically displays content panels. This problem focuses on state management, component composition, and basic accessibility for an interactive UI element. Your task is to implement a single-open accordion where clicking a header toggles its content visibility and ensures only one panel is open at a time.

What you need to do / Task

1. Create an Accordion component: This component will receive an array of AccordionItem objects as props.
2. Render Accordion Items: Each AccordionItem should display a clickable header (title) and a collapsible content area.
3. Implement Toggle Logic: When a header is clicked, its corresponding content panel should expand if collapsed, or collapse if expanded.
4. Single-Open Behavior: Ensure that only one accordion panel can be open at any given time. Opening a new panel should automatically close any currently open panel.
5. Basic Accessibility: Integrate semantic HTML and appropriate ARIA attributes to make the accordion keyboard navigable and screen reader-friendly.

UI/UX expectations

• Each accordion item should have a clearly visible header and a content area that is initially hidden.
• Clicking an accordion header should visually toggle its content's visibility.
• Only one accordion panel should be open at any given moment. Opening a new panel should close the previously open one.
• The component should visually indicate the currently open panel (e.g., a changed icon or bolded title).
• Basic styling for readability and clear interaction points, as provided in styles.css.
• The component must be keyboard navigable, allowing users to move between headers using the Tab key and toggle panels using Enter or Space.

Acceptance criteria

• [ ] The Accordion component renders a list of items based on the items prop.
• [ ] All accordion content panels are initially closed/hidden when the component first renders.
• [ ] Clicking an item's header reveals its content.
• [ ] Clicking an item's header when its content is already open hides the content.
• [ ] Clicking an item's header closes any other currently open panel before opening the clicked panel.
• [ ] The accordion is navigable via keyboard (Tab key to move between headers, Enter/Space to toggle).
• [ ] Appropriate ARIA attributes (e.g., aria-expanded, aria-controls, role) are used on interactive elements for accessibility.

Clarifications

• Q: Should the data come from an API?
  • A: No, use the static mock data provided in App.tsx.
• Q: Are complex animations or transitions required?
  • A: No, basic show/hide functionality is sufficient. You do not need to implement CSS transitions for smooth opening/closing.
• Q: What styling approach should I use?
  • A: Plain CSS (styles.css) is expected. Do not use CSS-in-JS libraries or external component libraries.