Des onglets qui changent de panneau. La même structure sans puis avec TypeScript : seule la couche de types change.
- Sans TS, actif est un string muet : n’importe quel id passerait au template.
- Avec lang="ts", changer(id: string): void décrit précisément l’interaction.
- aria-selected et role="tablist" rendent l’onglet lisible par les lecteurs d’écran.
src/lib/Onglets.sveltesvelte
<script>
let onglets = $state([
{ id: 'code', label: 'Code' },
{ id: 'design', label: 'Design' },
{ id: 'tests', label: 'Tests' }
])
let actif = $state('code')
function changer(id) {
actif = id
}
</script>
<div role='tablist'>
{#each onglets as o (o.id)}
<button
role='tab'
aria-selected={actif === o.id}
onclick={() => changer(o.id)}
>
{o.label}
</button>
{/each}
</div>
<div role='tabpanel'>{actif}</div>