From 7a9422b57432328c462bdec211f2a096240039db Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Thu, 28 May 2026 14:05:14 +0300
Subject: [PATCH] test: add aria attributes to tested components

---
 src/widgets/ComparisonView/ui/Header/Header.svelte   | 12 ++++++++++--
 src/widgets/ComparisonView/ui/Sidebar/Sidebar.svelte |  4 ++++
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/widgets/ComparisonView/ui/Header/Header.svelte b/src/widgets/ComparisonView/ui/Header/Header.svelte
index f2a30d8..88d515f 100644
--- a/src/widgets/ComparisonView/ui/Header/Header.svelte
+++ b/src/widgets/ComparisonView/ui/Header/Header.svelte
@@ -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>
diff --git a/src/widgets/ComparisonView/ui/Sidebar/Sidebar.svelte b/src/widgets/ComparisonView/ui/Sidebar/Sidebar.svelte
index 76c1f02..895b4d5 100644
--- a/src/widgets/ComparisonView/ui/Sidebar/Sidebar.svelte
+++ b/src/widgets/ComparisonView/ui/Sidebar/Sidebar.svelte
@@ -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>