Overview

GadgetGrove, an innovative online tech retailer, wants to enhance its product detail pages. Your task is to build a reusable and accessible Tabs component that dynamically displays different sections of product information. This problem focuses on state management, component composition, and fundamental accessibility practices in React.

What you need to do / Task

1. Create a Tabs component that accepts an array of tab items, where each item has a label (string) and content (ReactNode).
2. Implement state to manage the currently active tab, defaulting to the first tab.
3. Ensure only the content of the active tab is visible.
4. Add functionality to switch tabs when a tab label is clicked.

UI/UX expectations

• Layout: Tabs should be presented horizontally, with their corresponding content area directly below. The active tab's label should be visually distinct.
• Interaction: Clicking a tab label should immediately display its associated content and update the visual active state.
• Accessibility: Implement keyboard navigation and proper ARIA attributes.
  • Users should be able to navigate between tab labels using arrow keys (left/right).
  • Pressing Enter or Space on a focused tab label should activate that tab.
  • Ensure proper ARIA attributes (role="tablist", role="tab", aria-selected, tabindex, aria-controls, role="tabpanel", aria-labelledby) are used for tabs and tab panels to convey their structure and state to assistive technologies.

Acceptance criteria

• The Tabs component renders all provided tab labels in a horizontal list.
• Clicking a tab label successfully switches the active tab and displays its corresponding content, hiding others.
• The currently active tab is visually highlighted (e.g., different background, border, or text color).
• Keyboard navigation using ArrowLeft and ArrowRight keys correctly moves focus between tab labels.
• Pressing Enter or Space on a focused tab label activates that tab.
• The component correctly applies ARIA roles and properties to tabs and tab panels for accessibility.

Clarifications

• Q: Do I need to persist tab state across page loads?
  • A: No, state persistence (e.g., using localStorage or URL parameters) is out of scope.
• Q: Can I use a UI library or component framework?
  • A: No, build the Tabs component from scratch using raw React and CSS.
• Q: How should tab content be rendered?
  • A: The content for each tab item can be a string, a ReactNode, or a custom component. The Tabs component should render it directly.