fix(a11y): improve accessibility of top-level auth and onboarding components (#21710)

Adds critical accessibility fixes across various app components:
- auth/+page: provide alt text for logo, turn on screenReader support for password input, add aria-required, hide decorative SVGs from AT
- AppSidebar: wrap navigation icons in a <nav> structure, provide ARIA labels for Home and Chat icons
- s/[id]/+page: convert structural divs into semantically accurate h1 heading and time element, wrap message display in main region
- OnBoarding: replace flawed aria-labelledby with direct aria-label on start button
- NotificationToast: provide role='status' and aria-live='polite' for proper screen reader broadcasting
- ChangelogModal: add required heading semantics for structure
- AddFilesPlaceholder: provide heading element role for standalone text content
- ImportModal: provide aria-label for close button

Addresses WCAG 4.1.3, 1.1.1, 3.3.2, and 1.3.1.

src/lib/components/AddFilesPlaceholder.svelte

@@ -7,7 +7,7 @@
 </script>
 
 <div class="px-3">
-	<div class="text-center dark:text-white text-2xl font-medium z-50">
+	<div class="text-center dark:text-white text-2xl font-medium z-50" role="heading" aria-level="2">
 		{#if title}
 			{title}
 		{:else}

src/lib/components/ChangelogModal.svelte

@@ -38,11 +38,11 @@
 <Modal bind:show size="xl">
 	<div class="px-6 pt-5 dark:text-white text-black">
 		<div class="flex justify-between items-start">
-			<div class="text-xl font-medium">
+			<h2 class="text-xl font-medium m-0">
 				{$i18n.t("What's New in")}
 				{$WEBUI_NAME}
 				<Confetti x={[-1, -0.25]} y={[0, 0.5]} />
-			</div>
+			</h2>
 			<button class="self-center" on:click={closeModal} aria-label={$i18n.t('Close')}>
 				<XMark className={'size-5'}>
 					<p class="sr-only">{$i18n.t('Close')}</p>
@@ -64,9 +64,9 @@
 				{#if changelog}
 					{#each Object.keys(changelog) as version}
 						<div class=" mb-3 pr-2">
-							<div class="font-semibold text-xl mb-1 dark:text-white">
+							<h3 class="font-semibold text-xl mb-1 dark:text-white m-0">
 								v{version} - {changelog[version].date}
-							</div>
+							</h3>
 
 							<hr class="border-gray-50/50 dark:border-gray-850/50 my-2" />
 

src/lib/components/ImportModal.svelte

@@ -67,6 +67,7 @@
 			<div class=" text-lg font-medium self-center">{$i18n.t('Import')}</div>
 			<button
 				class="self-center"
+				aria-label={$i18n.t('Close')}
 				on:click={() => {
 					show = false;
 				}}

src/lib/components/NotificationToast.svelte

@@ -82,9 +82,9 @@
 	});
 </script>
 
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
+	role="status"
+	aria-live="polite"
 	class="group relative flex gap-2.5 text-left min-w-[var(--width)] w-full dark:bg-gray-850 dark:text-white bg-white text-black border border-gray-100 dark:border-gray-800 rounded-3xl px-4 py-3.5 cursor-pointer select-none"
 	on:dragstart|preventDefault
 	on:pointerdown={onPointerDown}

src/lib/components/OnBoarding.svelte

@@ -87,15 +87,15 @@
 				<div class="flex justify-center mt-8">
 					<div class="flex flex-col justify-center items-center">
 						<button
-							aria-labelledby="get-started"
+							aria-label={$i18n.t('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();
 							}}
 						>
-							<ArrowRightCircle className="size-6" />
+							<ArrowRightCircle className="size-6" aria-hidden="true" />
 						</button>
-						<div id="get-started" class="mt-1.5 font-primary text-base font-medium">
+						<div class="mt-1.5 font-primary text-base font-medium" aria-hidden="true">
 							{$i18n.t(`Get started`)}
 						</div>
 					</div>

src/lib/components/app/AppSidebar.svelte

@@ -6,7 +6,7 @@
 	let selected = '';
 </script>
 
-<div class="min-w-[4.5rem] bg-gray-50 dark:bg-gray-950 flex gap-2.5 flex-col pt-8">
+<nav aria-label="App navigation" class="min-w-[4.5rem] bg-gray-50 dark:bg-gray-950 flex gap-2.5 flex-col pt-8">
 	<div class="flex justify-center relative">
 		{#if selected === 'home'}
 			<div class="absolute top-0 left-0 flex h-full">
@@ -16,6 +16,7 @@
 
 		<Tooltip content="Home" placement="right">
 			<button
+				aria-label="Home"
 				class=" cursor-pointer {selected === 'home' ? 'rounded-2xl' : 'rounded-full'}"
 				on:click={() => {
 					selected = 'home';
@@ -44,6 +45,7 @@
 			</div>
 		{/if}
 		<button
+			aria-label="Chat"
 			class=" cursor-pointer bg-transparent"
 			on:click={() => {
 				selected = '';
@@ -63,4 +65,4 @@
 			<Plus className="size-4" strokeWidth="2" />
 		</button>
 	</div> -->
-</div>
+</nav>