@salesforce/templates 66.17.0 → 66.17.2

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>

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

@@ -37,6 +37,8 @@ interface PaginationControlsProps {
 	onGoToPage?: (pageIndex: number) => void;
 	disabled?: boolean;
 	idPrefix?: string;
+	/** Accessible name for the pagination `<nav>` landmark; keep it unique per instance (WCAG 1.3.1, landmark-unique). */
+	navLabel?: string;
 }
 
 /**
@@ -76,6 +78,7 @@ export function PaginationControls({
 	onGoToPage,
 	disabled = false,
 	idPrefix = "page-size",
+	navLabel = "Pagination",
 }: PaginationControlsProps) {
 	const handlePageSizeChange = (next: string) => {
 		const size = parseInt(next, 10);
@@ -104,11 +107,7 @@ export function PaginationControls({
 				<Label htmlFor={selectId} className="text-sm font-normal whitespace-nowrap">
 					Results per page:
 				</Label>
-				<Select
-					value={pageSize.toString()}
-					onValueChange={handlePageSizeChange}
-					disabled={disabled}
-				>
+				<Select value={pageSize.toString()} onValueChange={handlePageSizeChange}>
 					<SelectTrigger id={selectId} className="w-16">
 						<SelectValue />
 					</SelectTrigger>
@@ -121,7 +120,7 @@ export function PaginationControls({
 					</SelectContent>
 				</Select>
 			</div>
-			<Pagination className="w-full mx-0 sm:justify-end">
+			<Pagination aria-label={navLabel} className="w-full mx-0 sm:justify-end">
 				<PaginationContent>
 					<PaginationItem>
 						<PaginationPrevious

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

@@ -38,7 +38,10 @@ export function SearchBar({ value, onChange, placeholder = "Search…", classNam
 
 	return (
 		<div className={`relative flex-1 ${className ?? ""}`}>
-			<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+			<Search
+				aria-hidden="true"
+				className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground"
+			/>
 			<Input
 				type="text"
 				value={draft}

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

@@ -20,6 +20,11 @@ import { Link } from "react-router";
 import type { CmsSourceConfig, CmsSearchItem } from "../../adapters/cms/types";
 import { formatContentTypeLabel, isValidCmsFqn } from "../../adapters/cms/contentTypeUtils";
 
+const EM_BLOCK_SPLIT = /(<(?:em)>[\s\S]*?<\/(?:em)>)/g;
+const EM_BLOCK_EXEC = /^<(?:em)>([\s\S]*?)<\/(?:em)>$/;
+const STRAY_TAG = /<\/?[a-zA-Z][^>]*>/g;
+const ROUTE_TOKEN = /:([A-Za-z_][A-Za-z0-9_]*)/g;
+
 /** Formats an ISO date string for display; echoes the raw string on failure. */
 function formatPublishedDate(dateStr: string): string {
 	const date = new Date(dateStr);
@@ -43,7 +48,7 @@ function resolveRoute(pattern: string, item: CmsSearchItem): string | null {
 		contentType: item.contentType,
 	};
 	let failed = false;
-	const out = pattern.replace(/:([A-Za-z_][A-Za-z0-9_]*)/g, (_match, token: string) => {
+	const out = pattern.replace(ROUTE_TOKEN, (_match, token: string) => {
 		const value = tokens[token];
 		if (value == null || value === "") {
 			failed = true;
@@ -54,6 +59,44 @@ function resolveRoute(pattern: string, item: CmsSearchItem): string | null {
 	return failed ? null : out;
 }
 
+/**
+ * - Decodes every HTML entity the browser knows (named + numeric).
+ * - Runs twice to unwrap the double-encoding CMS search sometimes returns.
+ */
+function decodeEntities(input: string): string {
+	if (typeof document === "undefined") return input;
+	const el = document.createElement("textarea");
+	const pass = (s: string) => {
+		el.innerHTML = s;
+		return el.value;
+	};
+	return pass(pass(input));
+}
+
+/**
+ * Parses a snippet that may contain `<em>…</em>` segments and renders it as highlighted text,
+ * and strips any other HTML tags so their content renders as plain text.
+ */
+function renderHighlightedSnippet(snippet: string): ReactNode[] {
+	const decoded = decodeEntities(snippet);
+	const parts = decoded.split(EM_BLOCK_SPLIT);
+	return parts.map((part, i) => {
+		const emphasisMatch = EM_BLOCK_EXEC.exec(part);
+		if (emphasisMatch) {
+			return (
+				<mark key={i} className="bg-yellow-200 dark:bg-yellow-700/60 rounded-sm px-0.5">
+					{emphasisMatch[1].replace(STRAY_TAG, "")}
+				</mark>
+			);
+		}
+		return part.replace(STRAY_TAG, "");
+	});
+}
+
+function toPlainText(raw: string): string {
+	return decodeEntities(raw).replace(STRAY_TAG, "");
+}
+
 interface CmsResultRowProps {
 	node: unknown;
 	source: CmsSourceConfig;
@@ -71,12 +114,16 @@ export function CmsResultRow({ node, source }: CmsResultRowProps) {
 
 	const content: ReactNode = (
 		<>
-			<span className="font-medium">{item.title ?? "—"}</span>
+			<span className="font-medium">{item.title ? renderHighlightedSnippet(item.title) : "—"}</span>
 			{item.highlightedSnippet && (
-				<p className="text-sm text-muted-foreground">{item.highlightedSnippet}</p>
+				<p className="text-sm text-neutral-600 dark:text-neutral-300">
+					{renderHighlightedSnippet(item.highlightedSnippet)}
+				</p>
 			)}
 			{subtitleParts.length > 0 && (
-				<p className="text-sm text-muted-foreground">{subtitleParts.join(" · ")}</p>
+				<p className="text-sm text-neutral-600 dark:text-neutral-300">
+					{subtitleParts.join(" · ")}
+				</p>
 			)}
 		</>
 	);
@@ -90,7 +137,7 @@ export function CmsResultRow({ node, source }: CmsResultRowProps) {
 			<Link
 				to={href}
 				className="block hover:bg-accent rounded-md px-3 -mx-3 py-1 transition-colors"
-				aria-label={`View content: ${item.title}`}
+				aria-label={`View content: ${item.title ? toPlainText(item.title) : "content"}`}
 			>
 				{content}
 			</Link>

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

@@ -86,7 +86,9 @@ export function DefaultResultRow({ node, source }: DefaultResultRowProps) {
 		<>
 			<span className="font-medium">{title ?? "—"}</span>
 			{subtitleParts.length > 0 && (
-				<p className="text-sm text-muted-foreground">{subtitleParts.join(" · ")}</p>
+				<p className="text-sm text-neutral-600 dark:text-neutral-300">
+					{subtitleParts.join(" · ")}
+				</p>
 			)}
 		</>
 	);
@@ -98,6 +100,7 @@ export function DefaultResultRow({ node, source }: DefaultResultRowProps) {
 				<Link
 					to={href}
 					className="block hover:bg-accent rounded-md px-3 -mx-3 py-1 transition-colors"
+					aria-label={`View: ${title ?? "result"}`}
 				>
 					{content}
 				</Link>

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

@@ -31,9 +31,7 @@ export type { CmsSourceConfig };
  * it explicitly.
  */
 export type DisplayField =
-	| string
-	| { name: string; raw: true }
-	| { name: string; subfields: DisplayField[] };
+	string | { name: string; raw: true } | { name: string; subfields: DisplayField[] };
 
 /** Configuration for one SObject source in a search experience. */
 export interface SObjectSourceConfig {

package/lib/templates/project/reactexternalapp/_p_/_m_/_w_/_a_/src/appLayout.tsx

@@ -1,4 +1,4 @@
-import { Outlet, Link, useLocation } from "react-router";
+import { Outlet, Link, useLocation, matchPath } from "react-router";
 import { getAllRoutes } from "./router-utils";
 import { useEffect, useId, useRef, useState } from "react";
 import { AuthMenu } from "./features/authentication/menu/AuthMenu";
@@ -11,11 +11,13 @@ export default function AppLayout() {
 	const navId = useId();
 	const outletWrapperRef = useRef<HTMLDivElement>(null);
 	const previousPathname = useRef<string | null>(null);
+	const menuButtonRef = useRef<HTMLButtonElement>(null);
 
 	useEffect(() => {
+		if (matchPath("/search", location.pathname)) document.title = "Search | MyApp";
 		if (previousPathname.current !== null && previousPathname.current !== location.pathname) {
 			const wrapper = outletWrapperRef.current;
-			const target = wrapper?.querySelector<HTMLElement>("h1, main, [role='main']") ?? wrapper;
+			const target = wrapper?.querySelector<HTMLElement>("h1");
 			if (target) {
 				if (!target.hasAttribute("tabindex")) target.setAttribute("tabindex", "-1");
 				target.focus();
@@ -59,7 +61,7 @@ export default function AppLayout() {
 			>
 				Skip to main content
 			</a>
-			<nav className="bg-white border-b border-gray-200">
+			<nav aria-label="Primary" className="bg-white border-b border-gray-200">
 				<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
 					<div className="flex justify-between items-center h-16">
 						<Link to="/" className="text-xl font-semibold text-gray-900">
@@ -68,6 +70,7 @@ export default function AppLayout() {
 						<div className="flex items-center gap-2">
 							<AuthMenu />
 							<Button
+								ref={menuButtonRef}
 								variant="ghost"
 								size="icon"
 								onClick={toggleMenu}
@@ -106,7 +109,13 @@ export default function AppLayout() {
 										asChild
 										className="justify-start"
 									>
-										<Link to={item.path} onClick={() => setIsOpen(false)}>
+										<Link
+											to={item.path}
+											onClick={() => {
+												setIsOpen(false);
+												if (isActive(item.path)) menuButtonRef.current?.focus();
+											}}
+										>
 											{item.label}
 										</Link>
 									</Button>

package/lib/templates/project/reactexternalapp/_p_/_m_/_w_/_a_/src/components/alerts/status-alert.tsx

@@ -8,7 +8,7 @@ const statusAlertVariants = cva('', {
     variant: {
       error: '',
       success: '',
-      info: 'text-blue-600 *:[svg]:text-current *:data-[slot=alert-description]:text-blue-600/90',
+      info: 'text-blue-700 dark:text-blue-400 *:[svg]:text-current *:data-[slot=alert-description]:text-blue-700 dark:*:data-[slot=alert-description]:text-blue-400',
     },
   },
   defaultVariants: {

package/lib/templates/project/reactexternalapp/_p_/_m_/_w_/_a_/src/components/ui/alert.tsx

@@ -10,7 +10,7 @@ const alertVariants = cva(
       variant: {
         default: 'bg-card text-card-foreground',
         destructive:
-          'text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current',
+          'text-red-700 dark:text-red-400 bg-card *:data-[slot=alert-description]:text-red-700 dark:*:data-[slot=alert-description]:text-red-400 *:[svg]:text-current',
       },
     },
     defaultVariants: {

package/lib/templates/project/reactexternalapp/_p_/_m_/_w_/_a_/src/components/ui/button.tsx

@@ -5,7 +5,7 @@ import { Slot } from 'radix-ui';
 import { cn } from '../../lib/utils';
 
 const buttonVariants = cva(
-  "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none",
+  "focus-visible:border-ring focus-visible:ring-ring aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none",
   {
     variants: {
       variant: {
@@ -17,7 +17,7 @@ const buttonVariants = cva(
         ghost:
           'hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground',
         destructive:
-          'bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-red-700 dark:text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30',
+          'bg-destructive/10 hover:bg-destructive/20 dark:bg-destructive/20 text-red-700 dark:text-destructive dark:hover:bg-destructive/30',
         link: 'text-primary underline-offset-4 hover:underline',
       },
       size: {

package/lib/templates/project/reactexternalapp/_p_/_m_/_w_/_a_/src/components/ui/checkbox.tsx

@@ -14,7 +14,7 @@ function Checkbox({
     <CheckboxPrimitive.Root
       data-slot="checkbox"
       className={cn(
-        'border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[4px] border transition-colors group-has-disabled/field:opacity-50 focus-visible:ring-3 aria-invalid:ring-3 peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50',
+        'border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[4px] border transition-colors group-has-disabled/field:opacity-50 focus-visible:ring-3 aria-invalid:ring-3 peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50',
         className
       )}
       {...props}

package/lib/templates/project/reactexternalapp/_p_/_m_/_w_/_a_/src/components/ui/input.tsx

@@ -8,7 +8,7 @@ function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
       type={type}
       data-slot="input"
       className={cn(
-        'dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground/70 placeholder:italic w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
+        'dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground placeholder:italic w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
         className
       )}
       {...props}

package/lib/templates/project/reactexternalapp/_p_/_m_/_w_/_a_/src/components/ui/select.tsx

@@ -42,7 +42,7 @@ function SelectTrigger({
       data-slot="select-trigger"
       data-size={size}
       className={cn(
-        "border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-lg border bg-transparent py-2 pr-2 pl-2.5 text-sm transition-colors select-none focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-lg border bg-transparent py-2 pr-2 pl-2.5 text-sm transition-colors select-none focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
         className
       )}
       {...props}

package/lib/templates/project/reactexternalapp/_p_/_m_/_w_/_a_/src/pages/AccountObjectDetailPage.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useParams, useNavigate } from "react-router";
 import { createDataSDK } from "@salesforce/platform-sdk";
 import { AlertCircle, ChevronDown, ChevronRight, FileQuestion } from "lucide-react";
@@ -76,6 +76,8 @@ async function fetchAccountDetail(recordId: string): Promise<AccountNode | null
 export default function AccountObjectDetail() {
 	const { recordId } = useParams();
 	const navigate = useNavigate();
+	const mainRef = useRef<HTMLElement>(null);
+	const [completionAnnouncement, setCompletionAnnouncement] = useState("");
 
 	const {
 		data: account,
@@ -83,28 +85,43 @@ export default function AccountObjectDetail() {
 		error,
 	} = useAsyncData(() => fetchAccountDetail(recordId!), [recordId]);
 
-	const pageTitle = account
-		? `${fieldValue(account.Name) ?? "Account"} | MyApp`
+	const pageTitle = loading
+		? "Loading Account | MyApp"
 		: error
 			? "Error | MyApp"
-			: loading
-				? "Loading Account | MyApp"
+			: account
+				? `${fieldValue(account.Name) ?? "Account"} | MyApp`
 				: "Account Not Found | MyApp";
 
+	useEffect(() => {
+		if (loading) {
+			setCompletionAnnouncement("");
+			return;
+		}
+		const main = mainRef.current;
+		const heading = main?.querySelector<HTMLElement>("h1");
+		if (heading) {
+			const active = document.activeElement;
+			if (active && active !== document.body && !main?.contains(active)) {
+				setCompletionAnnouncement(heading.textContent ?? "");
+				return;
+			}
+			setCompletionAnnouncement("");
+			if (!heading.hasAttribute("tabindex")) heading.setAttribute("tabindex", "-1");
+			heading.focus();
+		}
+	}, [loading, error, account, recordId]);
+
 	return (
-		<main className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+		<main ref={mainRef} className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
 			<title>{pageTitle}</title>
-			{/* Loading state */}
+			<div role="status" aria-live="polite" className="sr-only">
+				{loading ? "Loading account" : completionAnnouncement}
+			</div>
 			{loading && <AccountDetailSkeleton />}
-
-			{/* Error state */}
 			{error && <AccountDetailError onBack={() => navigate(-1)} />}
-
-			{/* Not found state */}
 			{!loading && !error && !account && <AccountDetailNotFound onBack={() => navigate(-1)} />}
-
-			{/* Content */}
-			{account && <AccountDetailContent account={account} />}
+			{!loading && !error && account && <AccountDetailContent account={account} />}
 		</main>
 	);
 }
@@ -258,7 +275,8 @@ function Section({ title, children }: { title: string; children: React.ReactNode
 function AccountDetailError({ onBack }: { onBack: () => void }) {
 	return (
 		<>
-			<Alert variant="destructive" role="alert">
+			{/* Completion is announced by heading focus or the persistent status. */}
+			<Alert variant="destructive" role={undefined}>
 				<AlertCircle aria-hidden="true" />
 				<AlertTitle>
 					<h1>Failed to load account</h1>
@@ -298,8 +316,7 @@ function AccountDetailNotFound({ onBack }: { onBack: () => void }) {
 
 function AccountDetailSkeleton() {
 	return (
-		<div role="status" aria-live="polite">
-			<span className="sr-only">Loading account…</span>
+		<div>
 			<Skeleton className="h-8 w-56 mb-4" />
 
 			<Card>

package/lib/templates/project/reactexternalapp/_p_/_m_/_w_/_a_/src/pages/NotFound.tsx

@@ -1,18 +1,25 @@
-import { Link } from 'react-router';
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+
+import { Link } from "react-router";
 
 export default function NotFound() {
-  return (
-    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
-      <div className="text-center">
-        <h1 className="text-4xl font-bold text-gray-900 mb-4">404</h1>
-        <p className="text-lg text-gray-600 mb-8">Page not found</p>
-        <Link
-          to="/"
-          className="inline-block px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
-        >
-          Go to Home
-        </Link>
-      </div>
-    </div>
-  );
+	return (
+		<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+			<title>Page Not Found | MyApp</title>
+			<div className="text-center">
+				<h1 className="text-4xl font-bold text-gray-900 mb-4">404</h1>
+				<p className="text-lg text-gray-600 mb-8">Page not found</p>
+				<Link
+					to="/"
+					className="inline-block px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
+				>
+					Go to Home
+				</Link>
+			</div>
+		</main>
+	);
 }

package/lib/templates/project/reactexternalapp/_p_/_m_/_w_/_a_/src/routes.tsx

@@ -63,6 +63,7 @@ export const routes: RouteObject[] = [
         path: "search",
         element: (
 					<GlobalSearch
+						as="main"
 						config={config}
 						title="Search"
 						searchPlaceholder="Search accounts, contacts, opportunities, and content..."

package/lib/templates/project/reactexternalapp/_p_/_m_/_w_/_a_/src/styles/global.css

@@ -75,7 +75,7 @@
   --destructive: oklch(0.577 0.245 27.325);
   --border: oklch(0.922 0 0);
   --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
+  --ring: oklch(0.556 0 0);
   --chart-1: oklch(0.646 0.222 41.116);
   --chart-2: oklch(0.6 0.118 184.704);
   --chart-3: oklch(0.398 0.07 227.392);
@@ -127,7 +127,7 @@
 
 @layer base {
   * {
-    @apply border-border outline-ring/50;
+    @apply border-border outline-ring;
   }
   body {
     @apply bg-background text-foreground;

package/lib/templates/project/reactexternalapp/_p_/_m_/_w_/_a_/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["./src/app.tsx","./src/appLayout.tsx","./src/index.ts","./src/navigationMenu.tsx","./src/router-utils.tsx","./src/routes.tsx","./src/api/graphqlClient.ts","./src/components/CustomerWebClientChat.tsx","./src/components/ObjectBreadcrumb.tsx","./src/components/alerts/status-alert.tsx","./src/components/layouts/card-layout.tsx","./src/components/ui/alert.tsx","./src/components/ui/avatar.tsx","./src/components/ui/badge.tsx","./src/components/ui/breadcrumb.tsx","./src/components/ui/button.tsx","./src/components/ui/calendar.tsx","./src/components/ui/card.tsx","./src/components/ui/checkbox.tsx","./src/components/ui/collapsible.tsx","./src/components/ui/datePicker.tsx","./src/components/ui/dialog.tsx","./src/components/ui/dropdown-menu.tsx","./src/components/ui/field.tsx","./src/components/ui/index.ts","./src/components/ui/input.tsx","./src/components/ui/label.tsx","./src/components/ui/pagination.tsx","./src/components/ui/popover.tsx","./src/components/ui/select.tsx","./src/components/ui/separator.tsx","./src/components/ui/skeleton.tsx","./src/components/ui/sonner.tsx","./src/components/ui/spinner.tsx","./src/components/ui/table.tsx","./src/components/ui/tabs.tsx","./src/features/authentication/authHelpers.ts","./src/features/authentication/authenticationConfig.ts","./src/features/authentication/api/userProfileApi.ts","./src/features/authentication/components/SocialLogin.tsx","./src/features/authentication/context/AuthContext.tsx","./src/features/authentication/footers/footer-link.tsx","./src/features/authentication/forms/auth-form.tsx","./src/features/authentication/forms/submit-button.tsx","./src/features/authentication/hooks/form.tsx","./src/features/authentication/hooks/useCountdownTimer.ts","./src/features/authentication/hooks/useRetryWithBackoff.ts","./src/features/authentication/layout/centered-page-layout.tsx","./src/features/authentication/layouts/AuthAppLayout.tsx","./src/features/authentication/layouts/privateRouteLayout.tsx","./src/features/authentication/menu/AuthMenu.tsx","./src/features/authentication/pages/ChangePassword.tsx","./src/features/authentication/pages/ForgotPassword.tsx","./src/features/authentication/pages/Login.tsx","./src/features/authentication/pages/Profile.tsx","./src/features/authentication/pages/Register.tsx","./src/features/authentication/pages/ResetPassword.tsx","./src/features/authentication/sessionTimeout/SessionTimeoutValidator.tsx","./src/features/authentication/sessionTimeout/sessionTimeService.ts","./src/features/authentication/sessionTimeout/sessionTimeoutConfig.ts","./src/features/authentication/utils/helpers.ts","./src/features/language-switcher/LanguageSwitcher.tsx","./src/features/language-switcher/buildLanguageUrl.ts","./src/features/language-switcher/index.ts","./src/features/language-switcher/languages.ts","./src/features/language-switcher/__examples__/language-switcher-example.tsx","./src/features/language-switcher/__examples__/vite-config-site-example.ts","./src/features/search/constants.ts","./src/features/search/index.ts","./src/features/search/loadConfig.ts","./src/features/search/queryBuilder.ts","./src/features/search/types.ts","./src/features/search/__tests__/queryBuilder.test.ts","./src/features/search/adapters/registry.ts","./src/features/search/adapters/types.ts","./src/features/search/adapters/cms/channelResolver.ts","./src/features/search/adapters/cms/cmsQueryFragment.ts","./src/features/search/adapters/cms/contentTypeSessionCache.ts","./src/features/search/adapters/cms/contentTypeUtils.ts","./src/features/search/adapters/cms/index.ts","./src/features/search/adapters/cms/parseResponse.ts","./src/features/search/adapters/cms/searchChannel.ts","./src/features/search/adapters/cms/types.ts","./src/features/search/adapters/cms/__tests__/channelResolver.test.ts","./src/features/search/adapters/cms/__tests__/cmsQueryFragment.test.ts","./src/features/search/adapters/cms/__tests__/contentTypeSessionCache.test.ts","./src/features/search/adapters/cms/__tests__/contentTypeUtils.test.ts","./src/features/search/adapters/cms/__tests__/orgApiVersionService.test.ts","./src/features/search/adapters/cms/__tests__/parseResponse.test.ts","./src/features/search/adapters/cms/__tests__/searchChannel.test.ts","./src/features/search/adapters/cms/__tests__/searchableContentTypesService.test.ts","./src/features/search/adapters/cms/api/apiUtils.ts","./src/features/search/adapters/cms/api/orgApiVersionService.ts","./src/features/search/adapters/cms/api/searchableContentTypesService.ts","./src/features/search/adapters/cms/hooks/useSearchableContentTypes.ts","./src/features/search/adapters/sobject/index.ts","./src/features/search/adapters/sobject/parseResponse.ts","./src/features/search/adapters/sobject/queryFragment.ts","./src/features/search/api/distinctValuesService.ts","./src/features/search/api/searchService.ts","./src/features/search/api/__tests__/searchService.test.ts","./src/features/search/components/GlobalSearchBox.tsx","./src/features/search/components/MergedSearchResults.tsx","./src/features/search/components/Search.tsx","./src/features/search/components/SearchResults.tsx","./src/features/search/components/SourceSection.tsx","./src/features/search/components/__tests__/MergedSearchResults.test.tsx","./src/features/search/components/__tests__/Search.test.tsx","./src/features/search/components/__tests__/SourceSection.test.tsx","./src/features/search/components/controls/PaginationControls.tsx","./src/features/search/components/controls/ScopeSelector.tsx","./src/features/search/components/controls/SearchBar.tsx","./src/features/search/components/controls/SortControl.tsx","./src/features/search/components/filters/ActiveFilters.tsx","./src/features/search/components/filters/DefaultFilterPanel.tsx","./src/features/search/components/filters/FilterContext.tsx","./src/features/search/components/filters/inputs/BooleanFilter.tsx","./src/features/search/components/filters/inputs/DateRangeFilter.tsx","./src/features/search/components/filters/inputs/FilterFieldWrapper.tsx","./src/features/search/components/filters/inputs/MultiSelectFilter.tsx","./src/features/search/components/filters/inputs/NumericRangeFilter.tsx","./src/features/search/components/filters/inputs/SelectFilter.tsx","./src/features/search/components/filters/inputs/TextFilter.tsx","./src/features/search/components/results/CmsResultRow.tsx","./src/features/search/components/results/DefaultResultRow.tsx","./src/features/search/components/results/resolveResultRenderer.ts","./src/features/search/components/results/__tests__/CmsResultRow.test.tsx","./src/features/search/components/results/__tests__/resolveResultRenderer.test.ts","./src/features/search/hooks/useAsyncData.ts","./src/features/search/hooks/useDistinctValues.ts","./src/features/search/hooks/useSearch.ts","./src/features/search/utils/debounce.ts","./src/features/search/utils/fieldUtils.ts","./src/features/search/utils/filterUtils.ts","./src/features/search/utils/sortUtils.ts","./src/features/search/utils/__tests__/filterUtils.test.ts","./src/hooks/useAsyncData.ts","./src/lib/utils.ts","./src/pages/AccountObjectDetailPage.tsx","./src/pages/Home.tsx","./src/pages/NotFound.tsx","./src/pages/TestChatPage.tsx","./src/types/chat.ts","./src/types/globals.d.ts","./src/utils/accountFields.ts","./src/utils/__tests__/accountFields.test.ts","./e2e/app.spec.ts","./vite-env.d.ts","./vitest-env.d.ts","./vitest.setup.ts","../../../../../../../../../sdk/platform-sdk/types/env.d.ts"],"version":"5.9.3"}
+{"root":["./src/app.tsx","./src/appLayout.tsx","./src/index.ts","./src/navigationMenu.tsx","./src/router-utils.tsx","./src/routes.tsx","./src/api/graphqlClient.ts","./src/components/CustomerWebClientChat.tsx","./src/components/ObjectBreadcrumb.tsx","./src/components/alerts/status-alert.tsx","./src/components/layouts/card-layout.tsx","./src/components/ui/alert.tsx","./src/components/ui/avatar.tsx","./src/components/ui/badge.tsx","./src/components/ui/breadcrumb.tsx","./src/components/ui/button.tsx","./src/components/ui/calendar.tsx","./src/components/ui/card.tsx","./src/components/ui/checkbox.tsx","./src/components/ui/collapsible.tsx","./src/components/ui/datePicker.tsx","./src/components/ui/dialog.tsx","./src/components/ui/dropdown-menu.tsx","./src/components/ui/field.tsx","./src/components/ui/index.ts","./src/components/ui/input.tsx","./src/components/ui/label.tsx","./src/components/ui/pagination.tsx","./src/components/ui/popover.tsx","./src/components/ui/select.tsx","./src/components/ui/separator.tsx","./src/components/ui/skeleton.tsx","./src/components/ui/sonner.tsx","./src/components/ui/spinner.tsx","./src/components/ui/table.tsx","./src/components/ui/tabs.tsx","./src/features/authentication/authHelpers.ts","./src/features/authentication/authenticationConfig.ts","./src/features/authentication/api/userProfileApi.ts","./src/features/authentication/components/SocialLogin.tsx","./src/features/authentication/context/AuthContext.tsx","./src/features/authentication/footers/footer-link.tsx","./src/features/authentication/forms/auth-form.tsx","./src/features/authentication/forms/submit-button.tsx","./src/features/authentication/hooks/form.tsx","./src/features/authentication/hooks/useCountdownTimer.ts","./src/features/authentication/hooks/useRetryWithBackoff.ts","./src/features/authentication/layout/centered-page-layout.tsx","./src/features/authentication/layouts/AuthAppLayout.tsx","./src/features/authentication/layouts/privateRouteLayout.tsx","./src/features/authentication/menu/AuthMenu.tsx","./src/features/authentication/pages/ChangePassword.tsx","./src/features/authentication/pages/ForgotPassword.tsx","./src/features/authentication/pages/Login.tsx","./src/features/authentication/pages/Profile.tsx","./src/features/authentication/pages/Register.tsx","./src/features/authentication/pages/ResetPassword.tsx","./src/features/authentication/sessionTimeout/SessionTimeoutValidator.tsx","./src/features/authentication/sessionTimeout/sessionTimeService.ts","./src/features/authentication/sessionTimeout/sessionTimeoutConfig.ts","./src/features/authentication/utils/helpers.ts","./src/features/language-switcher/LanguageSwitcher.tsx","./src/features/language-switcher/buildLanguageUrl.ts","./src/features/language-switcher/index.ts","./src/features/language-switcher/languages.ts","./src/features/language-switcher/__examples__/language-switcher-example.tsx","./src/features/language-switcher/__examples__/vite-config-site-example.ts","./src/features/search/constants.ts","./src/features/search/index.ts","./src/features/search/loadConfig.ts","./src/features/search/queryBuilder.ts","./src/features/search/types.ts","./src/features/search/__tests__/queryBuilder.test.ts","./src/features/search/adapters/registry.ts","./src/features/search/adapters/types.ts","./src/features/search/adapters/cms/channelResolver.ts","./src/features/search/adapters/cms/cmsQueryFragment.ts","./src/features/search/adapters/cms/contentTypeSessionCache.ts","./src/features/search/adapters/cms/contentTypeUtils.ts","./src/features/search/adapters/cms/index.ts","./src/features/search/adapters/cms/parseResponse.ts","./src/features/search/adapters/cms/searchChannel.ts","./src/features/search/adapters/cms/types.ts","./src/features/search/adapters/cms/__tests__/channelResolver.test.ts","./src/features/search/adapters/cms/__tests__/cmsQueryFragment.test.ts","./src/features/search/adapters/cms/__tests__/contentTypeSessionCache.test.ts","./src/features/search/adapters/cms/__tests__/contentTypeUtils.test.ts","./src/features/search/adapters/cms/__tests__/orgApiVersionService.test.ts","./src/features/search/adapters/cms/__tests__/parseResponse.test.ts","./src/features/search/adapters/cms/__tests__/searchChannel.test.ts","./src/features/search/adapters/cms/__tests__/searchableContentTypesService.test.ts","./src/features/search/adapters/cms/api/apiUtils.ts","./src/features/search/adapters/cms/api/orgApiVersionService.ts","./src/features/search/adapters/cms/api/searchableContentTypesService.ts","./src/features/search/adapters/cms/hooks/useSearchableContentTypes.ts","./src/features/search/adapters/sobject/index.ts","./src/features/search/adapters/sobject/parseResponse.ts","./src/features/search/adapters/sobject/queryFragment.ts","./src/features/search/api/distinctValuesService.ts","./src/features/search/api/searchService.ts","./src/features/search/api/__tests__/searchService.test.ts","./src/features/search/components/GlobalSearchBox.tsx","./src/features/search/components/MergedSearchResults.tsx","./src/features/search/components/Search.tsx","./src/features/search/components/SearchResults.tsx","./src/features/search/components/SourceSection.tsx","./src/features/search/components/__tests__/MergedSearchResults.test.tsx","./src/features/search/components/__tests__/Search.test.tsx","./src/features/search/components/__tests__/SourceSection.test.tsx","./src/features/search/components/controls/PaginationControls.tsx","./src/features/search/components/controls/ScopeSelector.tsx","./src/features/search/components/controls/SearchBar.tsx","./src/features/search/components/controls/SortControl.tsx","./src/features/search/components/filters/ActiveFilters.tsx","./src/features/search/components/filters/DefaultFilterPanel.tsx","./src/features/search/components/filters/FilterContext.tsx","./src/features/search/components/filters/inputs/BooleanFilter.tsx","./src/features/search/components/filters/inputs/DateRangeFilter.tsx","./src/features/search/components/filters/inputs/FilterFieldWrapper.tsx","./src/features/search/components/filters/inputs/MultiSelectFilter.tsx","./src/features/search/components/filters/inputs/NumericRangeFilter.tsx","./src/features/search/components/filters/inputs/SelectFilter.tsx","./src/features/search/components/filters/inputs/TextFilter.tsx","./src/features/search/components/results/CmsResultRow.tsx","./src/features/search/components/results/DefaultResultRow.tsx","./src/features/search/components/results/resolveResultRenderer.ts","./src/features/search/components/results/__tests__/CmsResultRow.test.tsx","./src/features/search/components/results/__tests__/DefaultResultRow.test.tsx","./src/features/search/components/results/__tests__/resolveResultRenderer.test.ts","./src/features/search/hooks/useAsyncData.ts","./src/features/search/hooks/useDistinctValues.ts","./src/features/search/hooks/useSearch.ts","./src/features/search/hooks/__tests__/useSearch.test.ts","./src/features/search/utils/debounce.ts","./src/features/search/utils/fieldUtils.ts","./src/features/search/utils/filterUtils.ts","./src/features/search/utils/sortUtils.ts","./src/features/search/utils/__tests__/filterUtils.test.ts","./src/hooks/useAsyncData.ts","./src/lib/utils.ts","./src/pages/AccountObjectDetailPage.tsx","./src/pages/Home.tsx","./src/pages/NotFound.tsx","./src/pages/TestChatPage.tsx","./src/types/chat.ts","./src/types/globals.d.ts","./src/utils/accountFields.ts","./src/utils/__tests__/accountFields.test.ts","./e2e/app.spec.ts","./vite-env.d.ts","./vitest-env.d.ts","./vitest.setup.ts","../../../../../../../../../sdk/platform-sdk/types/env.d.ts"],"version":"5.9.3"}

package/lib/templates/project/reactexternalapp/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforce/ui-bundle-template-base-sfdx-project",
-  "version": "12.4.5",
+  "version": "12.9.0",
   "description": "Base SFDX project template",
   "license": "SEE LICENSE IN LICENSE.txt",
   "publishConfig": {