test: add aria attributes to tested components

This commit is contained in:
Ilia Mashkov
2026-05-28 14:05:14 +03:00
parent f79b24272c
commit 7a9422b574
2 changed files with 14 additions and 2 deletions
@@ -93,7 +93,11 @@ const fontBName = $derived(comparisonStore.fontB?.name ?? '');
<!-- Font names + slider % + theme toggle --> <!-- Font names + slider % + theme toggle -->
<div class="flex items-center gap-3 md:gap-8 shrink-0 select-none"> <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="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"> <TechText class="uppercase" variant="default" size="sm">
{fontAName} {fontAName}
</TechText> </TechText>
@@ -106,7 +110,11 @@ const fontBName = $derived(comparisonStore.fontB?.name ?? '');
class="h-8 rotate-12" 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"> <TechText class="uppercase" variant="default" size="sm">
{fontBName} {fontBName}
</TechText> </TechText>
@@ -72,6 +72,8 @@ let {
<ToggleButton <ToggleButton
size="sm" size="sm"
active={comparisonStore.side === 'A'} active={comparisonStore.side === 'A'}
aria-controls="primary-font"
aria-pressed={comparisonStore.side === 'A'}
onclick={() => comparisonStore.side = 'A'} onclick={() => comparisonStore.side = 'A'}
class="flex-1 tracking-wide font-bold uppercase" class="flex-1 tracking-wide font-bold uppercase"
> >
@@ -82,6 +84,8 @@ let {
size="sm" size="sm"
class="flex-1 tracking-wide font-bold uppercase" class="flex-1 tracking-wide font-bold uppercase"
active={comparisonStore.side === 'B'} active={comparisonStore.side === 'B'}
aria-controls="secondary-font"
aria-pressed={comparisonStore.side === 'B'}
onclick={() => comparisonStore.side = 'B'} onclick={() => comparisonStore.side = 'B'}
> >
<span>Right Font</span> <span>Right Font</span>