Merge pull request #13566 from itk-dev/8908-accessibility-enhancements

feat: Accessibility enhancements

src/lib/components/ChangelogModal.svelte

@@ -43,6 +43,7 @@
 					fill="currentColor"
 					class="w-5 h-5"
 				>
+					<p class="sr-only">{$i18n.t('Close')}</p>
 					<path
 						d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
 					/>

src/lib/components/OnBoarding.svelte

@@ -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,12 @@
 						>
 							<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}