@salesforce/templates 66.17.1 → 66.17.2

package/lib/templates/project/reactexternalapp/CHANGELOG.md

@@ -3,6 +3,135 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [12.9.0](https://github.com/salesforce-experience-platform-emu/webapps/compare/v12.8.0...v12.9.0) (2026-09-29)
+
+**Note:** Version bump only for package @salesforce/ui-bundle-template-base-sfdx-project
+
+
+
+
+
+## [12.8.0](https://github.com/salesforce-experience-platform-emu/webapps/compare/v12.7.0...v12.8.0) (2026-09-23)
+
+**Note:** Version bump only for package @salesforce/ui-bundle-template-base-sfdx-project
+
+
+
+
+
+## [12.7.0](https://github.com/salesforce-experience-platform-emu/webapps/compare/v12.6.3...v12.7.0) (2026-09-22)
+
+
+### Bug Fixes
+
+* **template-sfdx-project:** preserve target network sender addresses @W-24209513@ ([#993](https://github.com/salesforce-experience-platform-emu/webapps/issues/993)) ([fddbfdd](https://github.com/salesforce-experience-platform-emu/webapps/commit/fddbfddcb41270720372b0fd4c486f043d9ba8c5))
+
+
+
+## [12.6.3](https://github.com/salesforce-experience-platform-emu/webapps/compare/v12.6.2...v12.6.3) (2026-09-14)
+
+**Note:** Version bump only for package @salesforce/ui-bundle-template-base-sfdx-project
+
+
+
+
+
+## [12.6.2](https://github.com/salesforce-experience-platform-emu/webapps/compare/v12.6.1...v12.6.2) (2026-09-14)
+
+**Note:** Version bump only for package @salesforce/ui-bundle-template-base-sfdx-project
+
+
+
+
+
+## [12.6.1](https://github.com/salesforce-experience-platform-emu/webapps/compare/v12.6.0...v12.6.1) (2026-09-11)
+
+**Note:** Version bump only for package @salesforce/ui-bundle-template-base-sfdx-project
+
+
+
+
+
+## [12.6.0](https://github.com/salesforce-experience-platform-emu/webapps/compare/v12.5.8...v12.6.0) (2026-09-11)
+
+**Note:** Version bump only for package @salesforce/ui-bundle-template-base-sfdx-project
+
+
+
+
+
+## [12.5.8](https://github.com/salesforce-experience-platform-emu/webapps/compare/v12.5.7...v12.5.8) (2026-09-11)
+
+**Note:** Version bump only for package @salesforce/ui-bundle-template-base-sfdx-project
+
+
+
+
+
+## [12.5.7](https://github.com/salesforce-experience-platform-emu/webapps/compare/v12.5.6...v12.5.7) (2026-09-11)
+
+**Note:** Version bump only for package @salesforce/ui-bundle-template-base-sfdx-project
+
+
+
+
+
+## [12.5.6](https://github.com/salesforce-experience-platform-emu/webapps/compare/v12.5.5...v12.5.6) (2026-09-11)
+
+**Note:** Version bump only for package @salesforce/ui-bundle-template-base-sfdx-project
+
+
+
+
+
+## [12.5.5](https://github.com/salesforce-experience-platform-emu/webapps/compare/v12.5.4...v12.5.5) (2026-09-10)
+
+**Note:** Version bump only for package @salesforce/ui-bundle-template-base-sfdx-project
+
+
+
+
+
+## [12.5.4](https://github.com/salesforce-experience-platform-emu/webapps/compare/v12.5.3...v12.5.4) (2026-09-09)
+
+**Note:** Version bump only for package @salesforce/ui-bundle-template-base-sfdx-project
+
+
+
+
+
+## [12.5.3](https://github.com/salesforce-experience-platform-emu/webapps/compare/v12.5.2...v12.5.3) (2026-09-08)
+
+**Note:** Version bump only for package @salesforce/ui-bundle-template-base-sfdx-project
+
+
+
+
+
+## [12.5.2](https://github.com/salesforce-experience-platform-emu/webapps/compare/v12.5.1...v12.5.2) (2026-09-08)
+
+**Note:** Version bump only for package @salesforce/ui-bundle-template-base-sfdx-project
+
+
+
+
+
+## [12.5.1](https://github.com/salesforce-experience-platform-emu/webapps/compare/v12.5.0...v12.5.1) (2026-09-07)
+
+**Note:** Version bump only for package @salesforce/ui-bundle-template-base-sfdx-project
+
+
+
+
+
+## [12.5.0](https://github.com/salesforce-experience-platform-emu/webapps/compare/v12.4.5...v12.5.0) (2026-09-04)
+
+**Note:** Version bump only for package @salesforce/ui-bundle-template-base-sfdx-project
+
+
+
+
+
 ## [12.4.5](https://github.com/salesforce-experience-platform-emu/webapps/compare/v12.4.4...v12.4.5) (2026-09-03)
 
 **Note:** Version bump only for package @salesforce/ui-bundle-template-base-sfdx-project

package/lib/templates/project/reactexternalapp/_p_/_m_/_w_/_a_/package-lock.json

@@ -9,8 +9,8 @@
       "version": "1.59.0",
       "hasInstallScript": true,
       "dependencies": {
-        "@salesforce/platform-sdk": "^12.4.5",
-        "@salesforce/ui-bundle": "^12.4.5",
+        "@salesforce/platform-sdk": "^12.9.0",
+        "@salesforce/ui-bundle": "^12.9.0",
         "@tailwindcss/vite": "^4.1.17",
         "@tanstack/react-form": "^1.27.7",
         "class-variance-authority": "^0.7.1",
@@ -37,8 +37,8 @@
         "@graphql-eslint/eslint-plugin": "^4.1.0",
         "@graphql-tools/utils": "^11.0.0",
         "@playwright/test": "^1.49.0",
-        "@salesforce/graphiti": "^12.4.5",
-        "@salesforce/vite-plugin-ui-bundle": "^12.4.5",
+        "@salesforce/graphiti": "^12.9.0",
+        "@salesforce/vite-plugin-ui-bundle": "^12.9.0",
         "@testing-library/jest-dom": "^6.6.3",
         "@testing-library/react": "^16.1.0",
         "@testing-library/user-event": "^14.5.2",
@@ -46,7 +46,7 @@
         "@types/react": "^19.2.5",
         "@types/react-dom": "^19.2.3",
         "@vitejs/plugin-react": "^5.1.1",
-        "@vitest/ui": "^4.1.0",
+        "@vitest/ui": "^4.1.11",
         "eslint": "^9.39.1",
         "eslint-plugin-react": "^7.37.2",
         "eslint-plugin-react-hooks": "^7.0.1",
@@ -61,7 +61,7 @@
         "typescript-eslint": "^8.46.4",
         "vite": "^7.2.4",
         "vite-plugin-graphql-codegen": "^3.6.3",
-        "vitest": "^4.1.0"
+        "vitest": "^4.1.11"
       },
       "engines": {
         "node": ">=22"

package/lib/templates/project/reactexternalapp/_p_/_m_/_w_/_a_/package.json

@@ -19,8 +19,8 @@
     "graphql:schema": "node scripts/get-graphql-schema.mjs"
   },
   "dependencies": {
-    "@salesforce/platform-sdk": "^12.4.5",
-    "@salesforce/ui-bundle": "^12.4.5",
+    "@salesforce/platform-sdk": "^12.9.0",
+    "@salesforce/ui-bundle": "^12.9.0",
     "@tailwindcss/vite": "^4.1.17",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -47,8 +47,8 @@
     "@graphql-eslint/eslint-plugin": "^4.1.0",
     "@graphql-tools/utils": "^11.0.0",
     "@playwright/test": "^1.49.0",
-    "@salesforce/graphiti": "^12.4.5",
-    "@salesforce/vite-plugin-ui-bundle": "^12.4.5",
+    "@salesforce/graphiti": "^12.9.0",
+    "@salesforce/vite-plugin-ui-bundle": "^12.9.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.1.0",
     "@testing-library/user-event": "^14.5.2",
@@ -56,7 +56,7 @@
     "@types/react": "^19.2.5",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.1.1",
-    "@vitest/ui": "^4.1.0",
+    "@vitest/ui": "^4.1.11",
     "eslint": "^9.39.1",
     "eslint-plugin-react": "^7.37.2",
     "eslint-plugin-react-hooks": "^7.0.1",
@@ -71,7 +71,7 @@
     "typescript-eslint": "^8.46.4",
     "vite": "^7.2.4",
     "vite-plugin-graphql-codegen": "^3.6.3",
-    "vitest": "^4.1.0"
+    "vitest": "^4.1.11"
   },
   "overrides": {
     "lodash": "^4.18.1",

package/lib/templates/project/reactexternalapp/_p_/_m_/_w_/_a_/src/_f_/authentication/forms/auth-form.tsx

@@ -62,6 +62,7 @@ export function AuthForm({
 
 	return (
 		<CardLayout title={title} description={description}>
+			<h1 className="sr-only">{title}</h1>
 			<div className="space-y-6">
 				{/* [Dev Note] Auth status alert for authenticated users on public pages */}
 				{showAuthAlert && <StatusAlert variant="info">You are already logged in.</StatusAlert>}
@@ -71,10 +72,21 @@ export function AuthForm({
 
 				<form
 					id={id}
-					onSubmit={(e) => {
+					onSubmit={async (e) => {
 						e.preventDefault();
 						e.stopPropagation();
-						form.handleSubmit();
+						const formElement = e.currentTarget;
+						const previousFocus = document.activeElement;
+						await form.handleSubmit();
+						if (!form.state.isValid) {
+							requestAnimationFrame(() => {
+								if (formElement.isConnected && document.activeElement === previousFocus) {
+									formElement
+										.querySelector<HTMLElement>('[aria-invalid="true"]:not(:disabled)')
+										?.focus();
+								}
+							});
+						}
 					}}
 					{...props}
 				>

package/lib/templates/project/reactexternalapp/_p_/_m_/_w_/_a_/src/_f_/authentication/hooks/form.tsx

@@ -1,5 +1,5 @@
 import { useId } from "react";
-import { createFormHookContexts, createFormHook } from "@tanstack/react-form";
+import { createFormHookContexts, createFormHook, useStore } from "@tanstack/react-form";
 import {
 	Field,
 	FieldDescription,
@@ -40,7 +40,10 @@ function TextField({
 	const id = providedId ?? generatedId;
 	const descriptionId = `${id}-description`;
 	const errorId = `${id}-error`;
-	const isInvalid = field.state.meta.isBlurred && field.state.meta.errors.length > 0;
+	// Submitted fields can be invalid before their first blur.
+	const submissionAttempts = useStore(field.form.store, (state) => state.submissionAttempts);
+	const isInvalid =
+		(field.state.meta.isBlurred || submissionAttempts > 0) && field.state.meta.errors.length > 0;
 
 	// Deduplicate errors by message
 	const errors = field.state.meta.errors;
@@ -64,7 +67,13 @@ function TextField({
 				aria-describedby={cn(description && descriptionId, isInvalid && errorId)}
 				{...props}
 			/>
-			{isInvalid && uniqueErrors.length > 0 && <FieldError errors={uniqueErrors} />}
+			{isInvalid && uniqueErrors.length > 0 && (
+				<FieldError
+					id={errorId}
+					errors={uniqueErrors}
+					role={submissionAttempts > 0 ? undefined : "alert"}
+				/>
+			)}
 		</Field>
 	);
 }

package/lib/templates/project/reactexternalapp/_p_/_m_/_w_/_a_/src/_f_/authentication/layouts/privateRouteLayout.tsx

@@ -12,7 +12,7 @@ export default function PrivateRoute() {
 	const { isAuthenticated, loading } = useAuth();
 	const location = useLocation();
 
-	if (loading) return null;
+	if (loading) return <p role="status">Checking sign-in…</p>;
 
 	if (!isAuthenticated) {
 		const searchParams = new URLSearchParams();

package/lib/templates/project/reactexternalapp/_p_/_m_/_w_/_a_/src/_f_/authentication/menu/AuthMenu.tsx

@@ -1,5 +1,12 @@
+/*
+ * Copyright (c) 2024, Salesforce, Inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { useEffect, useId, useRef } from "react";
 import { CircleUser, LogIn, LogOut, UserPen, UserPlus } from "lucide-react";
-import { Link } from "react-router";
+import { Link, useLocation } from "react-router";
 import { useAuth } from "../context/AuthContext";
 import { ROUTES } from "../authenticationConfig";
 import { Button } from "../../../components/ui/button";
@@ -31,6 +38,13 @@ export interface AuthMenuProps {
 
 export function AuthMenu({ trigger, guestContent, menuItems, className }: AuthMenuProps) {
 	const { user, isAuthenticated, loading, logout } = useAuth();
+	const { pathname } = useLocation();
+	const userLabelId = useId();
+	const openedPathname = useRef(pathname);
+	const currentPathname = useRef(pathname);
+	useEffect(() => {
+		currentPathname.current = pathname;
+	}, [pathname]);
 
 	if (loading) {
 		return <Skeleton className="size-8 rounded-full" />;
@@ -49,14 +63,38 @@ export function AuthMenu({ trigger, guestContent, menuItems, className }: AuthMe
 	const triggerNode = (isAuthenticated && user && trigger?.(user)) || defaultTrigger;
 
 	return (
-		<DropdownMenu>
+		<DropdownMenu
+			onOpenChange={(open) => {
+				if (open) openedPathname.current = pathname;
+			}}
+		>
 			<DropdownMenuTrigger asChild>{triggerNode}</DropdownMenuTrigger>
 
-			<DropdownMenuContent align="end" className={className ?? "w-48"}>
+			<DropdownMenuContent
+				align="end"
+				aria-describedby={isAuthenticated ? userLabelId : undefined}
+				className={className ?? "w-48"}
+				onCloseAutoFocus={(event) => {
+					if (openedPathname.current === currentPathname.current) return;
+					event.preventDefault();
+					// Recover page focus intercepted by the closing menu trap.
+					const active = document.activeElement;
+					if (active && active !== document.body && active.isConnected) return;
+					const target =
+						document.querySelector<HTMLElement>("main h1, [role='main'] h1") ??
+						document.querySelector<HTMLElement>("main, [role='main']");
+					if (target) {
+						if (!target.hasAttribute("tabindex")) target.setAttribute("tabindex", "-1");
+						target.focus();
+					}
+				}}
+			>
 				{isAuthenticated ? (
 					<>
-						<DropdownMenuLabel className="truncate">{user?.name}</DropdownMenuLabel>
-						<DropdownMenuSeparator />
+						<DropdownMenuLabel id={userLabelId} className="truncate" aria-hidden="true">
+							{user?.name}
+						</DropdownMenuLabel>
+						<DropdownMenuSeparator aria-hidden="true" />
 						<DropdownMenuItem asChild>
 							<Link to={ROUTES.PROFILE.PATH}>
 								<UserPen className="size-4" />

package/lib/templates/project/reactexternalapp/_p_/_m_/_w_/_a_/src/_f_/authentication/pages/ChangePassword.tsx

@@ -50,7 +50,7 @@ export default function ChangePassword() {
 						err.errors.length === 1 ? (
 							err.errors[0]
 						) : (
-							<ul>
+							<ul role="list">
 								{err.errors.map((e, i) => (
 									<li key={i}>{e}</li>
 								))}

package/lib/templates/project/reactexternalapp/_p_/_m_/_w_/_a_/src/_f_/authentication/pages/ForgotPassword.tsx

@@ -4,11 +4,15 @@ import { CenteredPageLayout } from "../layout/centered-page-layout";
 import { AuthForm } from "../forms/auth-form";
 import { useAppForm } from "../hooks/form";
 import { createDataSDK } from "@salesforce/platform-sdk";
-import { ROUTES, AUTH_PLACEHOLDERS } from "../authenticationConfig";
+import { ROUTES } from "../authenticationConfig";
 import { ApiError, handleApiResponse } from "../utils/helpers";
 
 const forgotPasswordSchema = z.object({
-	username: z.string().trim().toLowerCase().email("Please enter a valid username"),
+	username: z
+		.string()
+		.trim()
+		.toLowerCase()
+		.email("Enter your username in email format, for example asmith@example.com"),
 });
 
 export default function ForgotPassword() {
@@ -42,7 +46,7 @@ export default function ForgotPassword() {
 						err.errors.length === 1 ? (
 							err.errors[0]
 						) : (
-							<ul>
+							<ul role="list">
 								{err.errors.map((e, i) => (
 									<li key={i}>{e}</li>
 								))}
@@ -75,7 +79,7 @@ export default function ForgotPassword() {
 						{(field) => (
 							<field.TextField
 								label="Username"
-								placeholder={AUTH_PLACEHOLDERS.USERNAME}
+								placeholder="asmith@example.com"
 								autoComplete="username"
 								disabled={success}
 							/>

package/lib/templates/project/reactexternalapp/_p_/_m_/_w_/_a_/src/_f_/authentication/pages/Login.tsx

@@ -60,7 +60,7 @@ export default function Login() {
 						err.errors.length === 1 ? (
 							err.errors[0]
 						) : (
-							<ul>
+							<ul role="list">
 								{err.errors.map((e, i) => (
 									<li key={i}>{e}</li>
 								))}

package/lib/templates/project/reactexternalapp/_p_/_m_/_w_/_a_/src/_f_/authentication/pages/Register.tsx

@@ -69,7 +69,7 @@ export default function Register() {
 				console.error("Registration failed", err);
 				if (err instanceof ApiError) {
 					setSubmitError(
-						<ul>
+						<ul role="list">
 							{err.errors.map((e, i) => (
 								<li key={i}>{e}</li>
 							))}

package/lib/templates/project/reactexternalapp/_p_/_m_/_w_/_a_/src/_f_/authentication/pages/ResetPassword.tsx

@@ -45,7 +45,7 @@ export default function ResetPassword() {
 						err.errors.length === 1 ? (
 							err.errors[0]
 						) : (
-							<ul>
+							<ul role="list">
 								{err.errors.map((e, i) => (
 									<li key={i}>{e}</li>
 								))}
@@ -64,6 +64,7 @@ export default function ResetPassword() {
 		return (
 			<CenteredPageLayout title={ROUTES.RESET_PASSWORD.TITLE}>
 				<CardLayout title="Reset Password">
+					<h1 className="sr-only">Reset Password</h1>
 					<StatusAlert>
 						Reset token is invalid or expired.{" "}
 						<Link to={ROUTES.FORGOT_PASSWORD.PATH} className="underline underline-offset-4">

package/lib/templates/project/reactexternalapp/_p_/_m_/_w_/_a_/src/_f_/authentication/sessionTimeout/SessionTimeoutValidator.tsx

@@ -378,6 +378,7 @@ function SessionWarningModal({
 	onCountdownExpire,
 }: SessionWarningModalProps) {
 	const continueButtonRef = useRef<HTMLButtonElement>(null);
+	const previousFocusRef = useRef<HTMLElement | null>(null);
 
 	// Countdown timer with accessibility
 	const timer = useCountdownTimer({
@@ -399,13 +400,6 @@ function SessionWarningModal({
 		start();
 	}, [isOpen, timeRemaining, start, stop, reset]);
 
-	// Focus the continue button when dialog opens
-	useEffect(() => {
-		if (isOpen) {
-			continueButtonRef.current?.focus();
-		}
-	}, [isOpen]);
-
 	// Handle "Continue Working" button click
 	const handleContinue = useCallback(() => {
 		stop();
@@ -421,6 +415,30 @@ function SessionWarningModal({
 	return (
 		<Dialog open={isOpen} onOpenChange={() => {}}>
 			<DialogContent
+				aria-labelledby="session-warning-title"
+				aria-describedby="session-warning-description"
+				onOpenAutoFocus={(event) => {
+					event.preventDefault();
+					previousFocusRef.current =
+						document.activeElement instanceof HTMLElement ? document.activeElement : null;
+					continueButtonRef.current?.focus();
+				}}
+				onCloseAutoFocus={(event) => {
+					event.preventDefault();
+					const previous = previousFocusRef.current;
+					previousFocusRef.current = null;
+					if (previous?.isConnected && previous !== document.body) {
+						previous.focus();
+						if (document.activeElement === previous) return;
+					}
+					const target = document.querySelector<HTMLElement>("main, #main-content");
+					if (target) {
+						if (target.tabIndex < 0 && !target.hasAttribute("tabindex")) {
+							target.setAttribute("tabindex", "-1");
+						}
+						target.focus();
+					}
+				}}
 				showCloseButton={false}
 				onEscapeKeyDown={(e) => e.preventDefault()}
 				onPointerDownOutside={(e) => e.preventDefault()}
@@ -454,10 +472,10 @@ function SessionWarningModal({
 				</div>
 
 				<DialogFooter className="flex gap-4 justify-end">
-					<Button variant="outline" onClick={handleLogoutClick} tabIndex={2}>
+					<Button variant="outline" onClick={handleLogoutClick}>
 						{LABELS.logoutButton}
 					</Button>
-					<Button variant="default" onClick={handleContinue} tabIndex={1} ref={continueButtonRef}>
+					<Button variant="default" onClick={handleContinue} ref={continueButtonRef}>
 						{LABELS.continueButton}
 					</Button>
 				</DialogFooter>
@@ -578,6 +596,11 @@ export default function SessionTimeoutValidator({
 	 */
 	const handleDismissAlert = useCallback(() => {
 		setShowExpiredAlert(false);
+		const main = document.querySelector<HTMLElement>("main, #main-content");
+		if (main) {
+			if (!main.hasAttribute("tabindex")) main.setAttribute("tabindex", "-1");
+			main.focus();
+		}
 	}, []);
 
 	return (

package/lib/templates/project/reactexternalapp/_p_/_m_/_w_/_a_/src/_f_/search/adapters/sobject/parseResponse.ts

@@ -31,8 +31,7 @@ export function parseSObjectResponse(
 	request: SourceRequest<SObjectSourceConfig>,
 ): SourceResult | null {
 	const queryRoot = (root?.uiapi as Record<string, unknown> | undefined)?.query as
-		| Record<string, RawSourceResult | null | undefined>
-		| undefined;
+		Record<string, RawSourceResult | null | undefined> | undefined;
 
 	const raw = queryRoot?.[request.source.key];
 	if (raw == null) return null;

package/lib/templates/project/reactexternalapp/_p_/_m_/_w_/_a_/src/_f_/search/api/distinctValuesService.ts

@@ -64,18 +64,15 @@ export async function fetchDistinctValues(
 
 	const root = response.data as Record<string, unknown> | undefined;
 	const aggregate = (root?.uiapi as Record<string, unknown> | undefined)?.aggregate as
-		| Record<string, unknown>
-		| undefined;
+		Record<string, unknown> | undefined;
 	const objectAgg = aggregate?.[objectName] as
-		| { edges?: Array<{ node?: { aggregate?: Record<string, unknown> } }> }
-		| undefined;
+		{ edges?: Array<{ node?: { aggregate?: Record<string, unknown> } }> } | undefined;
 	const edges = objectAgg?.edges ?? [];
 
 	return edges
 		.map((edge) => {
 			const field = edge?.node?.aggregate?.[fieldName] as
-				| { value?: string | null; displayValue?: string | null; label?: string | null }
-				| undefined;
+				{ value?: string | null; displayValue?: string | null; label?: string | null } | undefined;
 			const value = field?.value;
 			if (value == null || value === "") return null;
 			return { value, label: field?.label ?? field?.displayValue ?? value };

package/lib/templates/project/reactexternalapp/_p_/_m_/_w_/_a_/src/_f_/search/components/MergedSearchResults.tsx

@@ -137,7 +137,7 @@ export function MergedSearchResults({
 			    whole-request/network failure). Shown once, above the grid. */}
 			{error && (
 				<Alert variant="destructive" role="alert">
-					<AlertCircle />
+					<AlertCircle aria-hidden="true" />
 					<AlertTitle>Search failed</AlertTitle>
 					<AlertDescription>{error}</AlertDescription>
 				</Alert>
@@ -151,7 +151,7 @@ export function MergedSearchResults({
 					.filter((c) => !!c.error)
 					.map((c) => (
 						<Alert key={c.config.key} variant="destructive" role="alert">
-							<AlertCircle />
+							<AlertCircle aria-hidden="true" />
 							<AlertTitle>Failed to load {c.config.label}</AlertTitle>
 							<AlertDescription>{c.error}</AlertDescription>
 						</Alert>
@@ -171,14 +171,14 @@ export function MergedSearchResults({
 						<Skeleton key={i} className="h-48 w-full rounded-lg" />
 					))}
 				</div>
-			) : isShortQuery ? (
+			) : error ? null : isShortQuery ? (
 				<p className="py-12 text-center text-sm text-muted-foreground">{shortQueryMessage}</p>
 			) : mergedResults.length === 0 ? (
 				<p className="py-12 text-center text-sm text-muted-foreground">
 					{emptyMessage ?? "No results found."}
 				</p>
 			) : (
-				<ul className={gridClassName}>
+				<ul role="list" className={gridClassName}>
 					{mergedResults.map(({ sourceKey, node }, i) => {
 						const source = handle.sources[sourceKey]?.config;
 						if (!source) return null;

package/lib/templates/project/reactexternalapp/_p_/_m_/_w_/_a_/src/_f_/search/components/Search.tsx

@@ -82,6 +82,8 @@ interface SearchProps {
 	/** Optional override for the entire header region. */
 	renderHeader?: (handle: SearchHandle) => ReactNode;
 	className?: string;
+	/** Root element tag; use `"main"` when this owns its route's landmark (WCAG 1.3.1). */
+	as?: "div" | "main";
 }
 
 export function Search({
@@ -97,6 +99,7 @@ export function Search({
 	allScopeLabel,
 	renderHeader,
 	className,
+	as: Root = "div",
 }: SearchProps) {
 	// Resolve restrictTo to a lockedScope value, surfacing a clear error if
 	// the (kind, key) pair doesn't match any source. Memoize so it's
@@ -136,7 +139,7 @@ export function Search({
 	const showTotalResults = !merged && sourcesInScope >= 2;
 
 	return (
-		<div className={`max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-6 space-y-6 ${className ?? ""}`}>
+		<Root className={`max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-6 space-y-6 ${className ?? ""}`}>
 			{renderHeader ? (
 				renderHeader(handle)
 			) : (
@@ -198,6 +201,6 @@ export function Search({
 					)}
 				</>
 			)}
-		</div>
+		</Root>
 	);
 }

package/lib/templates/project/reactexternalapp/_p_/_m_/_w_/_a_/src/_f_/search/components/SourceSection.tsx

@@ -152,14 +152,14 @@ export function SourceSection({
 
 					{error && (
 						<Alert variant="destructive" role="alert">
-							<AlertCircle />
+							<AlertCircle aria-hidden="true" />
 							<AlertTitle>Failed to load {config.label}</AlertTitle>
 							<AlertDescription>{error}</AlertDescription>
 						</Alert>
 					)}
 
 					{showResults && (
-						<ul className="divide-y">
+						<ul role="list" className="divide-y">
 							{nodes.map((node, i) => (
 								<li key={getNodeKey(node, idField, i)} className="py-3">
 									{renderResult(node)}
@@ -171,9 +171,9 @@ export function SourceSection({
 					{showEmpty && (
 						<div className="flex flex-col items-center justify-center py-10 text-center">
 							{isShortQuery ? (
-								<Search className="size-10 text-muted-foreground mb-3" />
+								<Search aria-hidden="true" className="size-10 text-muted-foreground mb-3" />
 							) : (
-								<SearchX className="size-10 text-muted-foreground mb-3" />
+								<SearchX aria-hidden="true" className="size-10 text-muted-foreground mb-3" />
 							)}
 							<p className="text-sm text-muted-foreground">
 								{isShortQuery
@@ -195,6 +195,7 @@ export function SourceSection({
 					onPageSizeChange={pagination.setPageSize}
 					disabled={loading || !!error}
 					idPrefix={`page-size-${config.key}`}
+					navLabel={`${config.label} pagination`}
 				/>
 			</div>
 		</section>