FEAT: Tabs component

[Arnimag]

User Story

In order to navigate between related content sections efficiently
As a customer or content manager
I want to switch between tabs that support optional icons, rich panel content, and full keyboard accessibility.

Acceptance Criteria

• The component successfully renders a tab list and corresponding panel content.
• Active tabs are visually distinguished, and selecting a new tab dynamically updates the visible panel.
• Support for optional icons alongside text labels within each tab.
• Tab panels accommodate rich content, including custom markup and nested components.
• The container implements role="tablist" with an appropriate accessible name.
• Individual tabs use role="tab", managing aria-selected and aria-controls states.
• Content panels use role="tabpanel" and are linked via aria-labelledby to their respective tabs.
• Keyboard navigation is supported: Arrow keys move focus between tabs, while Enter or Space selects the active tab.
• Looks and works consistent across all supported browsers and devices.
• Can be viewed and manipulable in Storybook.

Background & Resources

https://demo.shopin.dev/storybook/?path=/story/ui-tabs--default