From 4ed92974efd81dfa0260c3fbb95e86636d34b40b Mon Sep 17 00:00:00 2001
From: "Amir H. Hashemi" <87268103+amirhhashemi@users.noreply.github.com>
Date: Tue, 3 Feb 2026 09:43:28 +0330
Subject: [PATCH] Fix accessibility issues

---
 src/ui/callout.tsx                  | 5 ++---
 src/ui/eraser-link/index.tsx        | 3 ++-
 src/ui/layout.tsx                   | 5 ++++-
 src/ui/layout/mobile-navigation.tsx | 5 ++++-
 4 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/ui/callout.tsx b/src/ui/callout.tsx
index 9878c4266a..4f9fd060d2 100644
--- a/src/ui/callout.tsx
+++ b/src/ui/callout.tsx
@@ -1,4 +1,3 @@
-import { Alert } from "@kobalte/core";
 import { Icon } from "solid-heroicons";
 import { mergeProps, type JSX, Show, untrack } from "solid-js";
 import {
@@ -91,7 +90,7 @@ export function Callout(props: CalloutProps) {
 	const IconComponent = icons[iconType];
 
 	return (
-		<Alert.Root
+		<div
 			class={`my-6 flex w-full rounded-3xl border p-4 ${
 				styles[mergedProps.type].container
 			}`}
@@ -112,6 +111,6 @@ export function Callout(props: CalloutProps) {
 					{mergedProps.children}
 				</div>
 			</div>
-		</Alert.Root>
+		</div>
 	);
 }
diff --git a/src/ui/eraser-link/index.tsx b/src/ui/eraser-link/index.tsx
index 76bdd6f46c..f0e3bfcc0d 100644
--- a/src/ui/eraser-link/index.tsx
+++ b/src/ui/eraser-link/index.tsx
@@ -67,6 +67,7 @@ const EraserLink = (
 				class="relative inline-block"
 				target="_blank"
 				rel="noopener noreferrer"
+				aria-label="View diagram on Eraser.io"
 			>
 				<img
 					src={
@@ -74,7 +75,7 @@ const EraserLink = (
 							? `${workspaceUrl}/preview?${elementParams}&type=embed`
 							: `${workspaceUrl}/preview`
 					}
-					alt={""}
+					alt=""
 					onLoad={() => setIsLoaded(true)}
 				/>
 				{isLoaded() ? (
diff --git a/src/ui/layout.tsx b/src/ui/layout.tsx
index 74d52a96e2..7d18820c51 100644
--- a/src/ui/layout.tsx
+++ b/src/ui/layout.tsx
@@ -157,7 +157,10 @@ export const Layout: ParentComponent<{ isError?: boolean }> = (props) => {
 						</Suspense>
 					</div>
 				</Show>
-				<main class="prose prose-slate w-full flex-auto px-4 pt-2 dark:prose-invert md:max-w-2xl md:pb-16 lg:max-w-none dark:text-slate-300">
+				<main
+					class="prose prose-slate w-full flex-auto px-4 pt-2 dark:prose-invert md:max-w-2xl md:pb-16 lg:max-w-none dark:text-slate-300"
+					aria-live="polite"
+				>
 					<Show
 						when={!useCurrentRouteMetaData().isProjectRoot}
 						keyed
diff --git a/src/ui/layout/mobile-navigation.tsx b/src/ui/layout/mobile-navigation.tsx
index 48c028eec1..e1714da87b 100644
--- a/src/ui/layout/mobile-navigation.tsx
+++ b/src/ui/layout/mobile-navigation.tsx
@@ -24,7 +24,10 @@ export const [isOpen, setIsOpen] = createSignal(false);
 export const MobileNavigation = (props: NavProps) => {
 	return (
 		<Dialog.Root open={isOpen()} onOpenChange={setIsOpen}>
-			<Dialog.Trigger>
+			<Dialog.Trigger
+				aria-label="Open navigation menu"
+				title="Open navigation menu"
+			>
 				<Icon path={bars_3} class="prose h-6 dark:prose-invert" />
 			</Dialog.Trigger>
 			<Dialog.Portal>