📖 Overview

The Tabbed Content block organises content into switchable tabs. On desktop, tabs are displayed as clickable buttons; on mobile, a dropdown select is used for better usability. The block includes full keyboard navigation and ARIA attributes for accessibility.

✏️ Content Options

Tabs are managed via a repeater field. Use the “Add Row” button to add as many tabs as needed.

🎨 CSS Variables

The following CSS variables can be configured to customise the block’s appearance:

♿ Accessibility

• Uses role="tablist", role="tab", and role="tabpanel" for proper ARIA semantics
• Implements aria-selected to indicate the active tab
• Uses aria-controls and aria-labelledby to associate tabs with their panels
• Supports keyboard navigation between tabs
• Mobile dropdown includes a visually hidden label for screen readers