Add aria-labelledby to icon-button to make assistive tech able to give info on what user can expect from button

This commit is contained in:
Sine Jespersen 2025-05-06 14:30:01 +02:00
parent 0889dd3a51
commit 86ce111edd

View File

@ -87,6 +87,7 @@
<div class="flex justify-center mt-8">
<div class="flex flex-col justify-center items-center">
<button
aria-labelledby="get-started"
class="relative z-20 flex p-1 rounded-full bg-white/5 hover:bg-white/10 transition font-medium text-sm"
on:click={() => {
getStartedHandler();
@ -94,12 +95,11 @@
>
<ArrowRightCircle className="size-6" />
</button>
<div class="mt-1.5 font-primary text-base font-medium">{$i18n.t(`Get started`)}</div>
<div id="get-started" class="mt-1.5 font-primary text-base font-medium">{$i18n.t(`Get started`)}</div>
</div>
</div>
</div>
<!-- <div class="absolute bottom-12 left-0 right-0 w-full"></div> -->
</div>
</div>
{/if}