test: add aria attributes to tested components
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user