Merge branch 'main' into dependabot/npm_and_yarn/typescript-eslint/eslint-plugin-8.52.0

Author: LadyBluenotes

package.json

@@ -34,10 +34,10 @@
 		"shiki": "^3.20.0",
 		"sitemap": "^8.0.0",
 		"solid-heroicons": "^3.2.4",
-		"solid-js": "^1.9.10",
+		"solid-js": "^1.9.11",
 		"solid-list": "^0.3.0",
 		"vinxi": "^0.5.7",
-		"zod": "^4.3.5"
+		"zod": "^4.3.6"
 	},
 	"devDependencies": {
 		"@eslint/js": "^9.39.2",

pnpm-lock.yaml

@@ -64,7 +64,7 @@ const MyComponent = () => {
 
 ```
 
-## The purpose of {"<Suspense>"}
+## The purpose of `<Suspense>`
 
 To understand the purpose of suspense, let's consider the following code snippets. These snippets will have some drawbacks which we will solve by using suspense. We will also see how it is possible to use `Suspense` yet not reap its benefits.
 

src/routes/reference/components/suspense.mdx

@@ -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>
 	);
 }

src/ui/callout.tsx

@@ -67,14 +67,15 @@ const EraserLink = (
 				class="relative inline-block"
 				target="_blank"
 				rel="noopener noreferrer"
+				aria-label="View diagram on Eraser.io"
 			>
 				<img
 					src={
 						elementParams
 							? `${workspaceUrl}/preview?${elementParams}&type=embed`
 							: `${workspaceUrl}/preview`
 					}
-					alt={""}
+					alt=""
 					onLoad={() => setIsLoaded(true)}
 				/>
 				{isLoaded() ? (

src/ui/eraser-link/index.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

src/ui/layout.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>