fix: a11y models page

src/lib/components/ExpandNavigation.svelte

@@ -8,6 +8,8 @@
 	class="{classNames} group flex h-16 w-6 flex-col items-center justify-center -space-y-1 outline-none *:h-3 *:w-1 *:rounded-full *:hover:bg-gray-300 dark:*:hover:bg-gray-600 max-md:hidden {!isCollapsed
 		? '*:bg-gray-200/70 dark:*:bg-gray-800'
 		: '*:bg-gray-200 dark:*:bg-gray-700'}"
+	name="sidebar-toggle"
+	aria-label="Toggle sidebar navigation"
 >
 	<div class={!isCollapsed ? "group-hover:rotate-[20deg]" : "group-hover:-rotate-[20deg]"} />
 	<div class={!isCollapsed ? "group-hover:-rotate-[20deg]" : "group-hover:rotate-[20deg]"} />

src/routes/models/+page.svelte

@@ -32,59 +32,74 @@
 					href="https://huggingface.co/spaces/huggingchat/chat-ui/discussions/372"
 					class="ml-auto dark:text-gray-400 dark:hover:text-gray-300"
 					target="_blank"
+					aria-label="Hub discussion about models"
 				>
 					<CarbonHelpFilled />
 				</a>
 			{/if}
 		</div>
-		<h3 class="text-gray-500">All models available on {envPublic.PUBLIC_APP_NAME}</h3>
-		<dl class="mt-8 grid grid-cols-1 gap-3 sm:gap-5 xl:grid-cols-2">
+		<h2 class="text-gray-500">All models available on {envPublic.PUBLIC_APP_NAME}</h2>
+		<div class="mt-8 grid grid-cols-1 gap-3 sm:gap-5 xl:grid-cols-2">
 			{#each data.models.filter((el) => !el.unlisted) as model, index (model.id)}
-				<a
-					href="{base}/models/{model.id}"
+				<div
+					aria-label="Model card"
+					role="region"
 					class="relative flex flex-col gap-2 overflow-hidden rounded-xl border bg-gray-50/50 px-6 py-5 shadow hover:bg-gray-50 hover:shadow-inner dark:border-gray-800/70 dark:bg-gray-950/20 dark:hover:bg-gray-950/40"
 				>
+					<a
+						href="{base}/models/{model.id}"
+						class="absolute inset-0 z-10"
+						aria-label="View details for {model.displayName}"
+					/>
 					<div class="flex items-center justify-between gap-1">
 						{#if model.logoUrl}
 							<img
-								class=" overflown aspect-square size-6 rounded border dark:border-gray-700"
+								class="overflown aspect-square size-6 rounded border dark:border-gray-700"
 								src={model.logoUrl}
-								alt=""
+								alt="{model.displayName} logo"
 							/>
 						{:else}
-							<div class="size-6 rounded border border-transparent bg-gray-300 dark:bg-gray-800" />
+							<div
+								class="size-6 rounded border border-transparent bg-gray-300 dark:bg-gray-800"
+								aria-hidden="true"
+							/>
 						{/if}
 						{#if model.tools}
-							<div
+							<span
+								title="This model supports tools."
 								class="ml-auto grid size-[21px] place-items-center rounded-lg border border-purple-300 dark:border-purple-700"
+								aria-label="Model supports tools"
+								role="img"
 							>
 								<CarbonTools class="text-xxs text-purple-700 dark:text-purple-500" />
-							</div>
+							</span>
 						{/if}
 						{#if model.multimodal}
-							<div
+							<span
 								title="This model is multimodal and supports image inputs natively."
 								class="ml-auto flex size-[21px] items-center justify-center rounded-lg border border-blue-700 dark:border-blue-500"
+								aria-label="Model is multimodal"
+								role="img"
 							>
 								<CarbonImage class="text-xxs text-blue-700 dark:text-blue-500" />
-							</div>
+							</span>
 						{/if}
 						{#if index === 0}
-							<div
+							<span
 								class="rounded-full border border-gray-300 px-2 py-0.5 text-xs text-gray-500 dark:border-gray-500 dark:text-gray-400"
 							>
 								Default
-							</div>
+							</span>
 						{/if}
 					</div>
-					<dt class="flex items-center gap-2 font-semibold">
+					<span class="flex items-center gap-2 font-semibold">
 						{model.displayName}
-					</dt>
-					<dd class="whitespace-pre-wrap text-sm text-gray-500 dark:text-gray-400">
+					</span>
+					<span class="whitespace-pre-wrap text-sm text-gray-500 dark:text-gray-400">
 						{model.description || "-"}
-					</dd>
-				</a>
+					</span>
+				</div>
 			{/each}
-		</dl>
+		</div>
 	</div>
 </div>