2026-05-28 13:31:17 +00:00
2 changed files with 14 additions and 2 deletions
@@ -93,7 +93,11 @@ const fontBName = $derived(comparisonStore.fontB?.name ?? '');
    <!-- Font names + slider % + theme toggle -->
    <div class="flex items-center gap-3 md:gap-8 shrink-0 select-none">
        <div class="hidden lg:flex items-center gap-6">
-            <div class="flex flex-col items-end leading-tight gap-0.5">
+            <div
+                id="primary-font"
+                aria-label="Primary font"
+                class="flex flex-col items-end leading-tight gap-0.5"
+            >
                <TechText class="uppercase" variant="default" size="sm">
                    {fontAName}
                </TechText>
@@ -106,7 +110,11 @@ const fontBName = $derived(comparisonStore.fontB?.name ?? '');
                class="h-8 rotate-12"
            />

-            <div class="flex flex-col items-start leading-tight gap-0.5">
+            <div
+                id="secondary-font"
+                aria-label="Secondary font"
+                class="flex flex-col items-start leading-tight gap-0.5"
+            >
                <TechText class="uppercase" variant="default" size="sm">
                    {fontBName}
                </TechText>
@@ -72,6 +72,8 @@ let {
            <ToggleButton
                size="sm"
                active={comparisonStore.side === 'A'}
+                aria-controls="primary-font"
+                aria-pressed={comparisonStore.side === 'A'}
                onclick={() => comparisonStore.side = 'A'}
                class="flex-1 tracking-wide font-bold uppercase"
            >
@@ -82,6 +84,8 @@ let {
                size="sm"
                class="flex-1 tracking-wide font-bold uppercase"
                active={comparisonStore.side === 'B'}
+                aria-controls="secondary-font"
+                aria-pressed={comparisonStore.side === 'B'}
                onclick={() => comparisonStore.side = 'B'}
            >
                <span>Right Font</span>