@salesforce/ui-bundle-template-app-react-template-b2e 12.3.8 → 12.3.9

package/dist/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [12.3.9](https://github.com/salesforce-experience-platform-emu/webapps/compare/v12.3.8...v12.3.9) (2026-09-02)
+
+**Note:** Version bump only for package @salesforce/ui-bundle-template-base-sfdx-project
+
+
+
+
+
 ## [12.3.8](https://github.com/salesforce-experience-platform-emu/webapps/compare/v12.3.7...v12.3.8) (2026-09-01)
 
 **Note:** Version bump only for package @salesforce/ui-bundle-template-base-sfdx-project

package/dist/force-app/main/default/uiBundles/reactinternalapp/package.json

@@ -19,8 +19,8 @@
     "graphql:schema": "node scripts/get-graphql-schema.mjs"
   },
   "dependencies": {
-    "@salesforce/platform-sdk": "^12.3.8",
-    "@salesforce/ui-bundle": "^12.3.8",
+    "@salesforce/platform-sdk": "^12.3.9",
+    "@salesforce/ui-bundle": "^12.3.9",
     "@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.3.8",
-    "@salesforce/vite-plugin-ui-bundle": "^12.3.8",
+    "@salesforce/graphiti": "^12.3.9",
+    "@salesforce/vite-plugin-ui-bundle": "^12.3.9",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.1.0",
     "@testing-library/user-event": "^14.5.2",

package/dist/force-app/main/default/uiBundles/reactinternalapp/src/appLayout.tsx

@@ -1,11 +1,26 @@
 import { AgentforceConversationClient } from "./components/AgentforceConversationClient";
 import { Outlet, Link, useLocation } from "react-router";
 import { getAllRoutes } from "./router-utils";
-import { useState } from "react";
+import { useEffect, useId, useRef, useState } from "react";
 
 export default function AppLayout() {
 	const [isOpen, setIsOpen] = useState(false);
 	const location = useLocation();
+	const navId = useId();
+	const outletWrapperRef = useRef<HTMLDivElement>(null);
+	const previousPathname = useRef<string | null>(null);
+
+	useEffect(() => {
+		if (previousPathname.current !== null && previousPathname.current !== location.pathname) {
+			const wrapper = outletWrapperRef.current;
+			const target = wrapper?.querySelector<HTMLElement>("h1, main, [role='main']") ?? wrapper;
+			if (target) {
+				if (!target.hasAttribute("tabindex")) target.setAttribute("tabindex", "-1");
+				target.focus();
+			}
+		}
+		previousPathname.current = location.pathname;
+	}, [location.pathname]);
 
 	const isActive = (path: string) => location.pathname === path;
 
@@ -28,6 +43,20 @@ export default function AppLayout() {
 
 	return (
 		<>
+			<a
+				href="#main-content"
+				onClick={(e) => {
+					e.preventDefault();
+					const content = outletWrapperRef.current;
+					if (content) {
+						if (!content.hasAttribute("tabindex")) content.setAttribute("tabindex", "-1");
+						content.focus();
+					}
+				}}
+				className="sr-only focus:not-sr-only focus:absolute focus:z-50 focus:top-2 focus:left-2 focus:rounded-md focus:bg-white focus:px-4 focus:py-2 focus:text-gray-900 focus:shadow focus:ring-2 focus:ring-gray-900"
+			>
+				Skip to main content
+			</a>
 			<nav 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">
@@ -38,8 +67,10 @@ export default function AppLayout() {
 							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"
+							aria-expanded={isOpen}
+							aria-controls={navId}
 						>
-							<div className="w-6 h-6 flex flex-col justify-center space-y-1.5">
+							<div aria-hidden="true" className="w-6 h-6 flex flex-col justify-center space-y-1.5">
 								<span
 									className={`block h-0.5 w-6 bg-current transition-all ${
 										isOpen ? "rotate-45 translate-y-2" : ""
@@ -56,14 +87,15 @@ export default function AppLayout() {
 							</div>
 						</button>
 					</div>
-					{isOpen && (
-						<div className="pb-4">
+					<div id={navId} className="pb-4" hidden={!isOpen}>
+						{isOpen && (
 							<div className="flex flex-col space-y-2">
 								{navigationRoutes.map((item) => (
 									<Link
 										key={item.path}
 										to={item.path}
 										onClick={() => setIsOpen(false)}
+										aria-current={isActive(item.path) ? "page" : undefined}
 										className={`px-3 py-2 rounded-md text-sm font-medium transition-colors ${
 											isActive(item.path)
 												? "bg-blue-100 text-blue-700"
@@ -74,11 +106,13 @@ export default function AppLayout() {
 									</Link>
 								))}
 							</div>
-						</div>
-					)}
+						)}
+					</div>
 				</div>
 			</nav>
-			<Outlet />
+			<div id="main-content" ref={outletWrapperRef}>
+				<Outlet />
+			</div>
 			<AgentforceConversationClient agentId="<USER_AGENT_ID_18_CHAR_0Xx...>" />
 		</>
 	);

package/dist/force-app/main/default/uiBundles/reactinternalapp/src/pages/AccountObjectDetailPage.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useParams, useNavigate } from "react-router";
 import { createDataSDK } from "@salesforce/platform-sdk";
 import { AlertCircle, ChevronDown, ChevronRight, FileQuestion } from "lucide-react";
@@ -83,8 +83,20 @@ export default function AccountObjectDetail() {
 		error,
 	} = useAsyncData(() => fetchAccountDetail(recordId!), [recordId]);
 
+	const pageTitle = loading
+		? "Loading Account | MyApp"
+		: error
+			? "Error | MyApp"
+			: account
+				? `${fieldValue(account.Name) ?? "Account"} | MyApp`
+				: "Account Not Found | MyApp";
+
+	useEffect(() => {
+		document.title = pageTitle;
+	}, [pageTitle]);
+
 	return (
-		<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+		<main className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
 			{/* Loading state */}
 			{loading && <AccountDetailSkeleton />}
 
@@ -95,8 +107,8 @@ export default function AccountObjectDetail() {
 			{!loading && !error && !account && <AccountDetailNotFound onBack={() => navigate(-1)} />}
 
 			{/* Content */}
-			{account && <AccountDetailContent account={account} />}
-		</div>
+			{!loading && !error && account && <AccountDetailContent account={account} />}
+		</main>
 	);
 }
 
@@ -229,10 +241,16 @@ function Section({ title, children }: { title: string; children: React.ReactNode
 	const [open, setOpen] = useState(true);
 	return (
 		<Collapsible open={open} onOpenChange={setOpen}>
-			<CollapsibleTrigger className="flex items-center gap-2 cursor-pointer text-lg font-semibold py-2">
-				{open ? <ChevronDown className="size-5" /> : <ChevronRight className="size-5" />}
-				{title}
-			</CollapsibleTrigger>
+			<h2>
+				<CollapsibleTrigger className="flex items-center gap-2 cursor-pointer text-lg font-semibold py-2">
+					{open ? (
+						<ChevronDown aria-hidden="true" className="size-5" />
+					) : (
+						<ChevronRight aria-hidden="true" className="size-5" />
+					)}
+					{title}
+				</CollapsibleTrigger>
+			</h2>
 			<CollapsibleContent>
 				<div className="mt-2 space-y-4">{children}</div>
 			</CollapsibleContent>
@@ -244,9 +262,9 @@ function AccountDetailError({ onBack }: { onBack: () => void }) {
 	return (
 		<>
 			<Alert variant="destructive" role="alert">
-				<AlertCircle />
+				<AlertCircle aria-hidden="true" />
 				<AlertTitle>
-					<h2>Failed to load account</h2>
+					<h1>Failed to load account</h1>
 				</AlertTitle>
 				<AlertDescription>
 					Something went wrong while loading this account. Please try again later.
@@ -254,7 +272,7 @@ function AccountDetailError({ onBack }: { onBack: () => void }) {
 			</Alert>
 			<div className="mt-4 flex gap-3">
 				<Button variant="outline" onClick={onBack}>
-					← Back
+					<span aria-hidden="true">←</span> Back
 				</Button>
 				<Button variant="outline" onClick={() => window.location.reload()}>
 					Retry
@@ -266,15 +284,15 @@ function AccountDetailError({ onBack }: { onBack: () => void }) {
 
 function AccountDetailNotFound({ onBack }: { onBack: () => void }) {
 	return (
-		<Card>
+		<Card role="status">
 			<CardContent className="flex flex-col items-center justify-center py-16 text-center">
-				<FileQuestion className="size-12 text-muted-foreground mb-4" />
-				<h2 className="text-lg font-semibold mb-1">Account not found</h2>
+				<FileQuestion aria-hidden="true" className="size-12 text-muted-foreground mb-4" />
+				<h1 className="text-lg font-semibold mb-1">Account not found</h1>
 				<p className="text-sm text-muted-foreground mb-6">
 					The account you're looking for doesn't exist or may have been deleted.
 				</p>
 				<Button variant="outline" onClick={onBack}>
-					← Go back
+					<span aria-hidden="true">←</span> Go back
 				</Button>
 			</CardContent>
 		</Card>
@@ -283,7 +301,8 @@ function AccountDetailNotFound({ onBack }: { onBack: () => void }) {
 
 function AccountDetailSkeleton() {
 	return (
-		<>
+		<div role="status" aria-live="polite">
+			<span className="sr-only">Loading account…</span>
 			<Skeleton className="h-8 w-56 mb-4" />
 
 			<Card>
@@ -332,7 +351,7 @@ function AccountDetailSkeleton() {
 					</div>
 				</CardContent>
 			</Card>
-		</>
+		</div>
 	);
 }
 

package/dist/force-app/main/default/uiBundles/reactinternalapp/src/pages/Home.tsx

@@ -1,10 +1,15 @@
+import { useEffect } from "react";
 import { GlobalSearchBox } from "../features/search";
 
 export default function HomePage() {
+	useEffect(() => {
+		document.title = "Home | MyApp";
+	}, []);
+
 	return (
-		<div className="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+		<main className="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
 			<h1 className="text-2xl font-bold mb-6">Home</h1>
 			<GlobalSearchBox placeholder="Search accounts, contacts, opportunities..." />
-		</div>
+		</main>
 	);
 }

package/dist/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@salesforce/ui-bundle-template-base-sfdx-project",
-  "version": "12.3.8",
+  "version": "12.3.9",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@salesforce/ui-bundle-template-base-sfdx-project",
-      "version": "12.3.8",
+      "version": "12.3.9",
       "license": "SEE LICENSE IN LICENSE.txt",
       "dependencies": {
         "fast-xml-parser": "^5.9.3",

package/dist/package.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforce/ui-bundle-template-app-react-template-b2e",
-  "version": "12.3.8",
+  "version": "12.3.9",
   "description": "Salesforce React internal app template",
   "license": "SEE LICENSE IN LICENSE.txt",
   "author": "",