Tabs

import { Tablist, Tab, TabPanel } from 'svogg-components';

Collection of tab components meant to be used in conjunction with each other.

Handles tab selection internally and encourages accessible implementations by requiring the use of HTML id attributes on tabs, which simultaneously works well with attribute such as aria-controls and aria-labelledby.

let tabs = [
	{
		label: 'Spiders',
		tabId: 'tab-spiders',
		panelId: 'panel-spiders',
		icon: '&#128375'
	},
	{
		label: 'Scorpions',
		tabId: 'tab-scorpions',
		panelId: 'panel-scorpions',
		icon: '&#129410'
	},
	{
		label: 'Bats',
		tabId: 'tab-bats',
		panelId: 'panel-bats',
		icon: '&#129415'
	}
];

let selectedTab = 'tab-spiders';

<TabList bind:selectedTab>
	<svelte:fragment slot="tabs">
		{#each tabs as { label, tabId, panelId }}
			<Tab
				id={tabId}
				selected={selectedTab == tabId}
				controls={panelId}
			>
				{label}
			</Tab>
		{/each}
	</svelte:fragment>
	<svelte:fragment slot="panel">
		{#each tabs as { panelId, tabId, icon }}
			<TabPanel
				id={panelId}
				active={selectedTab == tabId}
				labelledby={tabId}
				class="p-4 flex items-center justify-center"
			>
				{@html icon}
			</TabPanel>
		{/each}
	</svelte:fragment>
</TabList>

TabList

Tab

TabPanel

CSS

Keyboard navigation

1. Tab
   1. When focus moves into the component, places focus on the active tab.
   2. If a tab has focus, moves focus to the next element in the document tab sequence. If panels are used, this would be the active tab panel.
   3. If a tab panel has focus, moves focus to the first focusable element within the panel, or moves focus to the next element in the document tab sequence.
2. Shift + Tab
   1. When focus moves into the component, places focus on the active tab panel if panels are used, else moves focus to the active tab.
   2. If the active tab panel has focus, moves focus to the active tab.
   3. If a tab has focus, moves focus to the previous element in the document tab sequence.
3. ← or →
   1. If a tab has focus, selects and moves focus to the next/previous tab.