@salesforce/templates 66.17.1 → 66.17.3

package/lib/templates/project/reactinternalapp/_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",
@@ -46,8 +46,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",
@@ -55,7 +55,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",
@@ -70,7 +70,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/reactinternalapp/_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/reactinternalapp/_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/reactinternalapp/_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/reactinternalapp/_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/reactinternalapp/_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/reactinternalapp/_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/reactinternalapp/_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/reactinternalapp/_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/reactinternalapp/_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/reactinternalapp/_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/reactinternalapp/_p_/_m_/_w_/_a_/src/appLayout.tsx

@@ -1,5 +1,5 @@
 import { AgentforceConversationClient } from "./components/AgentforceConversationClient";
-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";
 
@@ -9,11 +9,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();
@@ -57,13 +59,14 @@ 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">
 							React App
 						</Link>
 						<button
+							ref={menuButtonRef}
 							onClick={toggleMenu}
 							className="p-2 rounded-md text-gray-700 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
 							aria-label="Toggle menu"
@@ -94,7 +97,10 @@ export default function AppLayout() {
 									<Link
 										key={item.path}
 										to={item.path}
-										onClick={() => setIsOpen(false)}
+										onClick={() => {
+											setIsOpen(false);
+											if (isActive(item.path)) menuButtonRef.current?.focus();
+										}}
 										aria-current={isActive(item.path) ? "page" : undefined}
 										className={`px-3 py-2 rounded-md text-sm font-medium transition-colors ${
 											isActive(item.path)

package/lib/templates/project/reactinternalapp/_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/reactinternalapp/_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/reactinternalapp/_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/reactinternalapp/_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/reactinternalapp/_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/reactinternalapp/_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/reactinternalapp/_p_/_m_/_w_/_a_/src/pages/AccountObjectDetailPage.tsx

@@ -1,4 +1,4 @@
-import { useEffect, 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,
@@ -95,18 +97,33 @@ export default function AccountObjectDetail() {
 		document.title = pageTitle;
 	}, [pageTitle]);
 
+	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">
-			{/* Loading state */}
+		<main ref={mainRef} className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+			<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 */}
 			{!loading && !error && account && <AccountDetailContent account={account} />}
 		</main>
 	);
@@ -261,7 +278,8 @@ function Section({ title, children }: { title: string; children: React.ReactNode
 function AccountDetailError({ onBack }: { onBack: () => void }) {
 	return (
 		<>
-			<Alert variant="destructive" role="alert">
+			{/* Alert hardcodes role="alert"; override so the h1-focus effect below is the only announcement path (WCAG 4.1.3) */}
+			<Alert variant="destructive" role={undefined}>
 				<AlertCircle aria-hidden="true" />
 				<AlertTitle>
 					<h1>Failed to load account</h1>
@@ -284,7 +302,7 @@ function AccountDetailError({ onBack }: { onBack: () => void }) {
 
 function AccountDetailNotFound({ onBack }: { onBack: () => void }) {
 	return (
-		<Card role="status">
+		<Card>
 			<CardContent className="flex flex-col items-center justify-center py-16 text-center">
 				<FileQuestion aria-hidden="true" className="size-12 text-muted-foreground mb-4" />
 				<h1 className="text-lg font-semibold mb-1">Account not found</h1>
@@ -301,8 +319,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/reactinternalapp/_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/reactinternalapp/_p_/_m_/_w_/_a_/src/routes.tsx

@@ -19,6 +19,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/reactinternalapp/_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;