@salesforce/ui-bundle-template-app-react-sample-b2x 11.56.2 → 11.56.4

package/dist/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [11.56.4](https://github.com/salesforce-experience-platform-emu/webapps/compare/v11.56.3...v11.56.4) (2026-08-13)
+
+**Note:** Version bump only for package @salesforce/ui-bundle-template-base-sfdx-project
+
+
+
+
+
+## [11.56.3](https://github.com/salesforce-experience-platform-emu/webapps/compare/v11.56.2...v11.56.3) (2026-08-12)
+
+**Note:** Version bump only for package @salesforce/ui-bundle-template-base-sfdx-project
+
+
+
+
+
 ## [11.56.2](https://github.com/salesforce-experience-platform-emu/webapps/compare/v11.56.1...v11.56.2) (2026-08-12)
 
 **Note:** Version bump only for package @salesforce/ui-bundle-template-base-sfdx-project

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

@@ -18,8 +18,8 @@
     "graphql:schema": "node scripts/get-graphql-schema.mjs"
   },
   "dependencies": {
-    "@salesforce/platform-sdk": "^11.56.2",
-    "@salesforce/ui-bundle": "^11.56.2",
+    "@salesforce/platform-sdk": "^11.56.4",
+    "@salesforce/ui-bundle": "^11.56.4",
     "@tailwindcss/vite": "^4.1.17",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -50,8 +50,8 @@
     "@graphql-eslint/eslint-plugin": "^4.1.0",
     "@graphql-tools/utils": "^11.0.0",
     "@playwright/test": "^1.49.0",
-    "@salesforce/graphiti": "^11.56.2",
-    "@salesforce/vite-plugin-ui-bundle": "^11.56.2",
+    "@salesforce/graphiti": "^11.56.4",
+    "@salesforce/vite-plugin-ui-bundle": "^11.56.4",
     "@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/propertyrentalapp/src/app.tsx

@@ -1,32 +1,10 @@
 import { createBrowserRouter, RouterProvider } from "react-router";
 import { routes } from "@/routes";
-import { StrictMode, Component, type ReactNode } from "react";
+import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
+import { ErrorBoundary } from "@/components/ErrorBoundary";
 import "./styles/global.css";
 
-class ErrorBoundary extends Component<
-	{ children: ReactNode },
-	{ hasError: boolean; error: Error | null }
-> {
-	state = { hasError: false, error: null as Error | null };
-	static getDerivedStateFromError(error: Error) {
-		return { hasError: true, error };
-	}
-	render() {
-		if (this.state.hasError && this.state.error) {
-			return (
-				<div className="mx-auto max-w-[600px] p-8 font-sans">
-					<h1 className="text-xl text-destructive">Something went wrong</h1>
-					<pre className="mt-2 overflow-auto rounded-md bg-destructive/10 p-4 text-sm">
-						{this.state.error.message}
-					</pre>
-				</div>
-			);
-		}
-		return this.props.children;
-	}
-}
-
 // Normalize basename: strip trailing slash so it matches URLs like /lwr/application/ai/c-app
 const rawBasePath = (globalThis as any).SFDC_ENV?.basePath;
 const basename = typeof rawBasePath === "string" ? rawBasePath.replace(/\/+$/, "") : undefined;

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

@@ -1,23 +1,78 @@
-import { useState } from "react";
-import { Outlet } from "react-router";
+import { useEffect, useRef, useState } from "react";
+import { Outlet, useLocation } from "react-router";
 import { TopBar } from "@/components/layout/TopBar";
 import { VerticalNav } from "@/components/layout/VerticalNav";
 import { Toaster } from "@/components/ui/sonner";
 import { TenantAccessProvider } from "@/context/TenantAccessContext";
 
+const APP_NAME = "ZENLEASE";
+
+const atPath = (base: string) => (p: string) => p === base || p.startsWith(`${base}/`);
+
+const PAGE_TITLES: { match: (path: string) => boolean; title: string }[] = [
+	{ match: (p) => p === "/", title: "Home" },
+	{ match: atPath("/properties"), title: "Property Search" },
+	{
+		match: (p) => p.startsWith("/property/") || p.startsWith("/object/"),
+		title: "Property Details",
+	},
+	{ match: atPath("/dashboard"), title: "Dashboard" },
+	{ match: atPath("/maintenance"), title: "Maintenance" },
+	{ match: atPath("/contact"), title: "Contact" },
+	{ match: atPath("/application"), title: "Application" },
+];
+
+function pageTitleFor(pathname: string): string {
+	const page = PAGE_TITLES.find((entry) => entry.match(pathname))?.title ?? "Page Not Found";
+	return `${page} · ${APP_NAME}`;
+}
+
 export default function AppLayout() {
 	const [isNavOpen, setIsNavOpen] = useState(false);
+	const menuButtonRef = useRef<HTMLButtonElement>(null);
+	const mainRef = useRef<HTMLElement>(null);
+	const { pathname } = useLocation();
+	const previousPathname = useRef(pathname);
+
+	useEffect(() => {
+		document.title = pageTitleFor(pathname);
+		if (pathname !== previousPathname.current) {
+			previousPathname.current = pathname;
+			mainRef.current?.focus();
+		}
+	}, [pathname]);
+
+	const closeNav = () => {
+		setIsNavOpen(false);
+		menuButtonRef.current?.focus();
+	};
 
 	return (
 		<TenantAccessProvider>
 			<div className="flex min-h-screen flex-col bg-gray-50">
 				<Toaster />
-				<TopBar onMenuClick={() => setIsNavOpen(true)} />
+				<a
+					href="#main-content"
+					className="sr-only focus:not-sr-only focus:absolute focus:left-4 focus:top-4 focus:z-50 focus:rounded-lg focus:bg-primary focus:px-4 focus:py-2 focus:text-primary-foreground focus:ring-2 focus:ring-white focus:ring-offset-2"
+				>
+					Skip to main content
+				</a>
+				<TopBar
+					onMenuClick={() => setIsNavOpen((open) => !open)}
+					isNavOpen={isNavOpen}
+					menuButtonRef={menuButtonRef}
+				/>
 
 				<div className="flex flex-1 overflow-hidden">
-					<VerticalNav isOpen={isNavOpen} onClose={() => setIsNavOpen(false)} />
+					<VerticalNav isOpen={isNavOpen} onClose={closeNav} />
 
-					<main className="flex-1 overflow-auto bg-gray-50 p-4 md:p-8" role="main">
+					<main
+						id="main-content"
+						ref={mainRef}
+						tabIndex={-1}
+						className="flex-1 overflow-auto bg-gray-50 p-4 outline-none md:p-8"
+						role="main"
+					>
 						<Outlet />
 					</main>
 				</div>

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/components/ErrorBoundary.tsx

@@ -0,0 +1,24 @@
+import { Component, type ReactNode } from "react";
+
+export class ErrorBoundary extends Component<
+	{ children: ReactNode },
+	{ hasError: boolean; error: Error | null }
+> {
+	state = { hasError: false, error: null as Error | null };
+	static getDerivedStateFromError(error: Error) {
+		return { hasError: true, error };
+	}
+	render() {
+		if (this.state.hasError && this.state.error) {
+			return (
+				<div role="alert" className="mx-auto max-w-[600px] p-8 font-sans">
+					<h1 className="text-xl text-destructive">Something went wrong</h1>
+					<pre className="mt-2 overflow-auto rounded-md bg-destructive/10 p-4 text-sm">
+						{this.state.error.message}
+					</pre>
+				</div>
+			);
+		}
+		return this.props.children;
+	}
+}

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/components/dashboard/WeatherWidget.tsx

@@ -1,7 +1,7 @@
 import { useRef, useState } from "react";
 import { Card } from "@/components/ui/card";
 import { Skeleton } from "@/components/ui/skeleton";
-import { useWeather, type WeatherData, type WeatherHour } from "@/hooks/useWeather";
+import { useWeather, WEATHER_LABELS, type WeatherData, type WeatherHour } from "@/hooks/useWeather";
 import {
 	Sun,
 	Cloud,
@@ -256,6 +256,7 @@ function HourlyForecast({ hours, activeTab }: { hours: WeatherHour[]; activeTab:
 				>
 					<p className="whitespace-nowrap text-xs text-muted-foreground">{h.time}</p>
 					{getWeatherIcon(h.weatherCode, "h-5 w-5 text-gray-500")}
+					<span className="sr-only">{WEATHER_LABELS[h.weatherCode] ?? "Unknown"}</span>
 					<p className="text-base font-semibold text-foreground">{h.temp}°</p>
 				</div>
 			))}
@@ -271,7 +272,14 @@ export function WeatherWidget() {
 		<Card className="rounded-2xl border-0 p-6 shadow-md">
 			<h2 className="text-lg font-semibold text-primary">Weather</h2>
 
-			{loading && <WeatherSkeleton />}
+			{loading && (
+				<>
+					<span role="status" className="sr-only">
+						Loading weather
+					</span>
+					<WeatherSkeleton />
+				</>
+			)}
 
 			{error && (
 				<p className="mt-4 text-sm text-destructive" role="alert">

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/components/layout/TopBar.tsx

@@ -1,5 +1,6 @@
 import { ChevronDown, Menu, User } from "lucide-react";
 import { Link } from "react-router";
+import type { RefObject } from "react";
 import { ROUTES } from "@/features/authentication/authenticationConfig";
 import zenLogo from "@/assets/icons/zen-logo.svg";
 import { Avatar, AvatarFallback } from "@/components/ui/avatar";
@@ -8,20 +9,25 @@ import { AuthMenu } from "@/features/authentication/menu/AuthMenu";
 
 export interface TopBarProps {
 	onMenuClick?: () => void;
+	isNavOpen?: boolean;
+	menuButtonRef?: RefObject<HTMLButtonElement | null>;
 }
 
-export function TopBar({ onMenuClick }: TopBarProps) {
+export function TopBar({ onMenuClick, isNavOpen, menuButtonRef }: TopBarProps) {
 	return (
 		<header className="flex h-16 items-center justify-between bg-teal-700 px-6 text-white">
 			<div className="flex items-center gap-4">
 				<Button
+					ref={menuButtonRef}
 					variant="ghost"
 					size="icon"
 					onClick={onMenuClick}
-					className="text-white hover:bg-teal-600 md:hidden"
+					className="text-white hover:bg-teal-600 aria-expanded:bg-teal-600 aria-expanded:text-white md:hidden"
 					aria-label="Toggle menu"
+					aria-expanded={isNavOpen}
+					aria-controls={isNavOpen ? "mobile-nav" : undefined}
 				>
-					<Menu className="size-6" />
+					<Menu className="size-6" aria-hidden />
 				</Button>
 				<Logo />
 			</div>
@@ -30,7 +36,7 @@ export function TopBar({ onMenuClick }: TopBarProps) {
 				trigger={(user) => (
 					<Button
 						variant="ghost"
-						className="h-10 gap-2 rounded-lg px-3 text-base text-white hover:bg-teal-600 hover:text-white"
+						className="h-10 gap-2 rounded-lg px-3 text-base text-white hover:bg-teal-800 hover:text-white"
 						aria-label="User menu"
 					>
 						<Avatar className="size-7 bg-teal-300 text-teal-900">
@@ -39,7 +45,7 @@ export function TopBar({ onMenuClick }: TopBarProps) {
 							</AvatarFallback>
 						</Avatar>
 						<span className="hidden font-medium md:inline">{user.name.toUpperCase()}</span>
-						<ChevronDown className="hidden size-4 md:block" />
+						<ChevronDown className="hidden size-4 md:block" aria-hidden />
 					</Button>
 				)}
 				guestContent={
@@ -49,8 +55,8 @@ export function TopBar({ onMenuClick }: TopBarProps) {
 						size="icon"
 						className="rounded-full bg-white text-teal-700 hover:bg-teal-50 md:h-9 md:w-auto md:gap-2 md:rounded-lg md:px-4"
 					>
-						<Link to={ROUTES.LOGIN.PATH}>
-							<User className="size-5 md:size-4" />
+						<Link to={ROUTES.LOGIN.PATH} aria-label="Sign Up / Sign In">
+							<User className="size-5 md:size-4" aria-hidden="true" />
 							<span className="hidden md:inline">Sign Up / Sign In</span>
 						</Link>
 					</Button>

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/components/layout/VerticalNav.tsx

@@ -2,7 +2,7 @@ import { Link, useLocation } from "react-router";
 import { Home, Search, BarChart3, Wrench, Phone, type LucideIcon } from "lucide-react";
 import { useAuth } from "@/features/authentication/context/AuthContext";
 import { useTenantAccess } from "@/context/TenantAccessContext";
-import { useMemo } from "react";
+import { useEffect, useMemo } from "react";
 
 interface VerticalNavItem {
 	path: string;
@@ -29,6 +29,15 @@ export function VerticalNav({ isOpen = false, onClose }: VerticalNavProps) {
 	const { isAuthenticated } = useAuth();
 	const { hasTenantRecord } = useTenantAccess();
 
+	useEffect(() => {
+		if (!isOpen) return;
+		const onKey = (e: KeyboardEvent) => {
+			if (e.key === "Escape") onClose?.();
+		};
+		document.addEventListener("keydown", onKey);
+		return () => document.removeEventListener("keydown", onKey);
+	}, [isOpen, onClose]);
+
 	const visibleItems = useMemo(
 		() =>
 			navItems.filter((item) => {
@@ -63,6 +72,7 @@ export function VerticalNav({ isOpen = false, onClose }: VerticalNavProps) {
 					}`}
 					title={item.label}
 					aria-label={item.label}
+					aria-current={active ? "page" : undefined}
 				>
 					<Icon className="size-6 shrink-0" aria-hidden />
 					<span className="text-center text-xs font-medium leading-tight">{item.label}</span>
@@ -89,6 +99,7 @@ export function VerticalNav({ isOpen = false, onClose }: VerticalNavProps) {
 					 * same time, and two navigation landmarks sharing one name is ambiguous.
 					 */}
 					<nav
+						id="mobile-nav"
 						className="fixed left-0 top-0 bottom-0 z-50 flex w-24 flex-col border-r border-gray-200 bg-white py-8"
 						aria-label="Mobile navigation"
 					>

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/components/maintenanceRequests/MaintenanceRequestList.tsx

@@ -29,14 +29,21 @@ export default function MaintenanceRequestList({
 					onClose={() => setSelectedRequest(null)}
 				/>
 			)}
-			{loading && <SkeletonListRows count={skeletonCount} />}
+			{loading && (
+				<div role="status" aria-live="polite" aria-atomic="true">
+					<SkeletonListRows count={skeletonCount} />
+					<span className="sr-only">Loading maintenance requests…</span>
+				</div>
+			)}
 			{error && (
 				<p className="py-4 text-sm text-destructive" role="alert">
 					{error}
 				</p>
 			)}
 			{!loading && !error && requests.length === 0 && (
-				<div className="py-8 text-center text-gray-500">{emptyMessage}</div>
+				<div role="status" className="py-8 text-center text-gray-500">
+					{emptyMessage}
+				</div>
 			)}
 			{!loading &&
 				!error &&

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/components/maintenanceRequests/MaintenanceRequestListItem.tsx

@@ -23,6 +23,16 @@ export default function MaintenanceRequestListItem({
 		: (request.Name?.value ?? "—");
 	const title = request.Description__c?.value?.trim() || request.Name?.value?.trim() || "—";
 
+	const rawStatus = request.Status__c?.value ?? null;
+	const statusLabel =
+		rawStatus === "New"
+			? "Needs Action"
+			: rawStatus === "In Progress"
+				? "In Progress"
+				: rawStatus === "Resolved"
+					? "Resolved"
+					: rawStatus;
+
 	const handleClick = useCallback(() => {
 		onClick?.(request);
 	}, [onClick, request]);
@@ -48,7 +58,14 @@ export default function MaintenanceRequestListItem({
 			tabIndex={isClickable ? 0 : undefined}
 			aria-label={
 				isClickable
-					? `View details for ${title !== "—" ? title : "maintenance request"}`
+					? [
+							`View details for ${title !== "—" ? title : "maintenance request"}`,
+							issueType,
+							addressFirstPart !== "—" ? addressFirstPart : null,
+							statusLabel ? `status ${statusLabel}` : null,
+						]
+							.filter(Boolean)
+							.join(", ")
 					: undefined
 			}
 		>

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/components/properties/PropertyMap.tsx

@@ -144,6 +144,7 @@ function MapContent({
 					key={`${m.lat}-${m.lng}-${m.propertyId ?? i}`}
 					position={[m.lat, m.lng]}
 					icon={pinIcon}
+					title={m.label ?? "Property"}
 				>
 					<Popup>
 						{popupContent ? (

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/components/properties/PropertySearchFilters.tsx

@@ -5,13 +5,13 @@ import { Popover } from "radix-ui";
 import { Search, ChevronDown } from "lucide-react";
 
 const SEARCH_INPUT_CLASS =
-	"h-10 rounded-full border-2 border-primary/50 bg-background px-4 text-sm outline-none transition-colors placeholder:text-muted-foreground focus:border-primary focus:ring-2 focus:ring-primary/20";
+	"h-10 rounded-full border-2 border-primary bg-background px-4 text-sm outline-none transition-colors placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2";
 
 const FILTER_PILL_CLASS =
-	"inline-flex h-10 items-center gap-1.5 rounded-full border-2 border-primary/50 bg-background px-4 text-sm font-medium text-foreground outline-none transition-colors hover:border-primary/70 focus:ring-2 focus:ring-primary/20";
+	"inline-flex h-10 items-center gap-1.5 rounded-full border-2 border-primary bg-background px-4 text-sm font-medium text-foreground outline-none transition-colors hover:bg-primary/10 focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2";
 
 const SAVE_BUTTON_CLASS =
-	"mt-3 w-full rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-primary/20";
+	"mt-3 w-full rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2";
 
 const DEFAULT_PRICE_MIN = 0;
 const DEFAULT_PRICE_MAX = 100_000;
@@ -161,7 +161,7 @@ export default function PropertySearchFilters({
 										Price range
 									</p>
 									<div className="flex items-center gap-2">
-										<div className="flex flex-1 items-center rounded-full border-2 border-primary/50 bg-background focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/20">
+										<div className="flex flex-1 items-center rounded-full border-2 border-primary bg-background focus-within:ring-2 focus-within:ring-primary focus-within:ring-offset-2">
 											<span className="pl-4 text-sm text-muted-foreground">$</span>
 											<input
 												type="number"
@@ -176,7 +176,7 @@ export default function PropertySearchFilters({
 											/>
 										</div>
 										<span className="text-muted-foreground">–</span>
-										<div className="flex flex-1 items-center rounded-full border-2 border-primary/50 bg-background focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/20">
+										<div className="flex flex-1 items-center rounded-full border-2 border-primary bg-background focus-within:ring-2 focus-within:ring-primary focus-within:ring-offset-2">
 											<span className="pl-4 text-sm text-muted-foreground">$</span>
 											<input
 												type="number"
@@ -230,7 +230,7 @@ export default function PropertySearchFilters({
 										Number of bedrooms
 									</p>
 									<div
-										className="flex overflow-hidden rounded-full border-2 border-primary/40"
+										className="flex rounded-full border-2 border-primary"
 										role="group"
 										aria-label="Number of bedrooms"
 									>
@@ -239,7 +239,7 @@ export default function PropertySearchFilters({
 												key={value}
 												type="button"
 												onClick={() => onBedroomsChange(bedrooms === value ? null : value)}
-												className={`min-w-[4rem] flex-1 border-r border-primary/40 px-4 py-2 text-sm font-medium transition-colors last:border-r-0 ${
+												className={`min-w-[4rem] flex-1 border-r border-primary px-4 py-2 text-sm font-medium transition-colors first:rounded-l-full last:rounded-r-full last:border-r-0 outline-none focus-visible:relative focus-visible:z-10 focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 ${
 													bedrooms === value
 														? "bg-primary text-primary-foreground"
 														: "bg-background text-primary hover:bg-primary/10"
@@ -301,7 +301,7 @@ export default function PropertySearchFilters({
 												key={value}
 												type="button"
 												onClick={() => onSortChange(value)}
-												className={`rounded-lg px-3 py-2 text-left text-sm font-medium transition-colors ${
+												className={`rounded-lg px-3 py-2 text-left text-sm font-medium transition-colors outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 ${
 													sortBy === value
 														? "bg-primary text-primary-foreground"
 														: "bg-background text-foreground hover:bg-muted"

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/hooks/useWeather.ts

@@ -15,7 +15,7 @@ const IMPERIAL_REGIONS = new Set(["US", "LR", "MM"]);
 const MIN_TODAY_TILES = 3;
 
 /** WMO weather codes → short label (Open-Meteo) */
-const WEATHER_LABELS: Record<number, string> = {
+export const WEATHER_LABELS: Record<number, string> = {
 	0: "Clear",
 	1: "Mainly clear",
 	2: "Partly cloudy",

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/pages/Application.tsx

@@ -1,5 +1,12 @@
 import { useSearchParams, Link } from "react-router";
-import { useCallback, useState, type ChangeEvent, type SubmitEvent } from "react";
+import {
+	useCallback,
+	useEffect,
+	useRef,
+	useState,
+	type ChangeEvent,
+	type SubmitEvent,
+} from "react";
 import { Button } from "../components/ui/button";
 import { Input } from "../components/ui/input";
 import { Label } from "../components/ui/label";
@@ -70,6 +77,7 @@ async function createContactForUser(): Promise<string | null> {
 function ApplicationSkeleton() {
 	return (
 		<div className="mx-auto max-w-[900px]" role="status">
+			<h1 className="sr-only">Apply for a property</h1>
 			<Skeleton className="mb-4 h-4 w-28" />
 
 			<Card className="mb-6 flex gap-4 rounded-2xl border border-border p-6 shadow-sm">
@@ -135,6 +143,11 @@ export default function Application() {
 	const [submitting, setSubmitting] = useState(false);
 	const [submitError, setSubmitError] = useState<string | null>(null);
 	const [submittedName, setSubmittedName] = useState<string | null>(null);
+	const successHeadingRef = useRef<HTMLHeadingElement>(null);
+
+	useEffect(() => {
+		if (submittedName) successHeadingRef.current?.focus();
+	}, [submittedName]);
 
 	const handleSubmit = useCallback(
 		async (e: SubmitEvent<HTMLFormElement>) => {
@@ -170,9 +183,16 @@ export default function Application() {
 
 	if (submittedName) {
 		return (
-			<div className="mx-auto max-w-[900px]">
+			<div className="mx-auto max-w-[900px]" role="status">
+				<h1 className="sr-only">Application submitted</h1>
 				<Card className="mb-6 rounded-2xl border border-border p-6 shadow-sm">
-					<h2 className="mb-2 text-2xl font-semibold text-foreground">Application submitted</h2>
+					<h2
+						ref={successHeadingRef}
+						tabIndex={-1}
+						className="mb-2 text-2xl font-semibold text-foreground"
+					>
+						Application submitted
+					</h2>
 					<p className="text-sm text-muted-foreground">
 						Your application
 						{propertyName ? (
@@ -208,6 +228,7 @@ export default function Application() {
 
 	return (
 		<div className="mx-auto max-w-[900px]">
+			<h1 className="sr-only">Apply for a property</h1>
 			<div className="mb-4">
 				<Link
 					to={propertyId ? `/property/${propertyId}` : "/properties"}
@@ -226,7 +247,7 @@ export default function Application() {
 				</div>
 				<div className="min-w-0 flex-1">
 					<h2 className="mb-1.5 text-2xl font-semibold text-foreground">
-						{propertyName ?? "Apply for a property"}
+						{propertyName ?? "Application details"}
 					</h2>
 					<p className="text-sm text-muted-foreground">
 						{propertyAddress ??

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/pages/Contact.tsx

@@ -1,4 +1,4 @@
-import { useState, useCallback, type SubmitEvent } from "react";
+import { useState, useCallback, useEffect, useRef, type SubmitEvent } from "react";
 import { Link } from "react-router";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -13,23 +13,31 @@ import { useAsyncData } from "@/hooks/useAsyncData";
 import type { UserInfo } from "@/api/leads/leadApi";
 
 function SuccessCard() {
+	const containerRef = useRef<HTMLDivElement>(null);
+	useEffect(() => {
+		containerRef.current?.focus();
+	}, []);
 	return (
-		<Card>
-			<CardHeader>
-				<CardTitle className="text-xl">Message sent</CardTitle>
-			</CardHeader>
-			<CardContent className="space-y-4">
-				<p className="text-muted-foreground">
-					Thank you for reaching out. We've received your message and will get back to you soon.
-				</p>
-				<Button asChild variant="outline">
-					<Link to="/">Back to Home</Link>
-				</Button>
-				<Button asChild>
-					<Link to="/contact">Send another message</Link>
-				</Button>
-			</CardContent>
-		</Card>
+		<div ref={containerRef} tabIndex={-1} role="status" aria-live="polite" className="outline-none">
+			<Card>
+				<CardHeader>
+					<CardTitle role="heading" aria-level={2} className="text-xl">
+						Message sent
+					</CardTitle>
+				</CardHeader>
+				<CardContent className="space-y-4">
+					<p className="text-muted-foreground">
+						Thank you for reaching out. We've received your message and will get back to you soon.
+					</p>
+					<Button asChild variant="outline">
+						<Link to="/">Back to Home</Link>
+					</Button>
+					<Button asChild>
+						<Link to="/contact">Send another message</Link>
+					</Button>
+				</CardContent>
+			</Card>
+		</div>
 	);
 }
 
@@ -60,13 +68,19 @@ function ContactForm({
 	return (
 		<Card className="relative">
 			{loading && (
-				<div className="absolute inset-0 z-10 flex items-center justify-center rounded-[inherit] bg-muted/60">
-					<Loader2 className="size-8 animate-spin text-muted-foreground" />
+				<div
+					role="status"
+					aria-live="polite"
+					className="absolute inset-0 z-10 flex items-center justify-center rounded-[inherit] bg-muted/60"
+				>
+					<Loader2 className="size-8 animate-spin text-muted-foreground" aria-hidden />
 					<span className="sr-only">Loading contact form…</span>
 				</div>
 			)}
 			<CardHeader>
-				<CardTitle className="text-lg">Send a message</CardTitle>
+				<CardTitle role="heading" aria-level={2} className="text-lg">
+					Send a message
+				</CardTitle>
 			</CardHeader>
 			<CardContent>
 				<form
@@ -152,7 +166,7 @@ function ContactForm({
 							Something went wrong. Please try again later.
 						</p>
 					)}
-					<Button type="submit" disabled={submitting} className="bg-teal-600 hover:bg-teal-700">
+					<Button type="submit" disabled={submitting} className="bg-teal-700 hover:bg-teal-800">
 						{submitting ? "Sending…" : "Send message"}
 					</Button>
 				</form>

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/pages/Dashboard.tsx

@@ -14,6 +14,7 @@ export default function Dashboard() {
 
 	return (
 		<div className="mx-auto flex max-w-[1100px] flex-col gap-6 lg:flex-row">
+			<h1 className="sr-only">Dashboard</h1>
 			<div className="min-w-0 flex-1">
 				<Card className="border-gray-200 p-6 shadow-sm">
 					<div className="mb-6 flex items-center justify-between">

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

@@ -212,7 +212,7 @@ export default function Home() {
 							<Button
 								type="submit"
 								size="lg"
-								className="min-h-12 shrink-0 cursor-pointer rounded-xl bg-primary px-8 font-medium text-primary-foreground shadow-md transition-colors duration-200 hover:bg-primary/90"
+								className="min-h-12 shrink-0 cursor-pointer rounded-xl bg-primary px-8 font-medium text-primary-foreground shadow-md transition-colors duration-200 hover:bg-primary/90 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2"
 							>
 								Find Home
 							</Button>
@@ -250,7 +250,10 @@ export default function Home() {
 							amenitiesMap={amenitiesMap}
 						/>
 					) : (
-						<div className="rounded-xl bg-white/60 px-6 py-10 text-center text-muted-foreground">
+						<div
+							role="status"
+							className="rounded-xl bg-white/60 px-6 py-10 text-center text-muted-foreground"
+						>
 							<p>No featured properties at the moment.</p>
 							<Button asChild className="mt-3">
 								<Link to="/properties">Browse all properties</Link>
@@ -292,7 +295,7 @@ export default function Home() {
 							href="tel:18005550120"
 							className="inline-flex cursor-pointer items-center gap-2 text-sm font-medium text-foreground transition-colors duration-200 hover:underline"
 						>
-							<Phone className="size-4" />
+							<Phone className="size-4" aria-hidden />
 							Talk to an Agent 1.800.555.0120
 						</a>
 					</div>
@@ -357,13 +360,13 @@ export default function Home() {
 						</Button>
 						<Button asChild variant="outline" size="lg" className="rounded-full gap-2">
 							<Link to="/contact">
-								<MessageCircle className="size-4" />
+								<MessageCircle className="size-4" aria-hidden />
 								Contact
 							</Link>
 						</Button>
 						<Button asChild variant="ghost" size="lg" className="rounded-full gap-2">
 							<Link to="/contact">
-								<HelpCircle className="size-4" />
+								<HelpCircle className="size-4" aria-hidden />
 								Help
 							</Link>
 						</Button>
@@ -435,14 +438,14 @@ export default function Home() {
 									value={footerEmail}
 									onChange={(e: ChangeEvent<HTMLInputElement>) => setFooterEmail(e.target.value)}
 									disabled={newsletterSubmitting}
-									className="max-w-xs border-teal-600 bg-teal-900/50 text-white placeholder:text-teal-300"
+									className="max-w-xs border-teal-600 bg-teal-900/50 text-white placeholder:text-teal-300 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-teal-800"
 									aria-label="Email for updates"
 								/>
 								<Button
 									type="submit"
 									size="icon"
 									aria-label="Subscribe to newsletter"
-									className="shrink-0 bg-teal-600 hover:bg-teal-700"
+									className="shrink-0 bg-teal-600 hover:bg-teal-700 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-teal-800"
 									disabled={newsletterSubmitting}
 								>
 									<Send className="size-4" aria-hidden />
@@ -457,7 +460,7 @@ export default function Home() {
 										? "sr-only"
 										: newsletterMessage.type === "success"
 											? "text-teal-200"
-											: "text-red-300"
+											: "text-red-200"
 								}
 							>
 								{newsletterMessage?.text ?? ""}

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/pages/Maintenance.tsx

@@ -58,6 +58,7 @@ const PAGINATION_CONFIG: PaginationConfig = {
 function MaintenanceSkeleton() {
 	return (
 		<div className="mx-auto max-w-[900px]" role="status">
+			<h1 className="sr-only">Maintenance</h1>
 			<Card className="mb-6 rounded-2xl shadow-md">
 				<CardHeader>
 					<Skeleton className="h-6 w-1/3" />
@@ -173,8 +174,8 @@ export default function Maintenance() {
 				setPriority("Standard");
 				setDateRequested(new Date().toISOString().slice(0, 10));
 				setRefreshCounter((c) => c + 1);
-			} catch (err) {
-				setSubmitError(err instanceof Error ? err.message : "Failed to submit request");
+			} catch {
+				setSubmitError("Something went wrong. Please try again later.");
 			} finally {
 				setSubmitting(false);
 			}
@@ -186,9 +187,12 @@ export default function Maintenance() {
 
 	return (
 		<div className="mx-auto max-w-[900px]">
+			<h1 className="sr-only">Maintenance</h1>
 			<Card className="mb-6 rounded-2xl shadow-md">
 				<CardHeader>
-					<CardTitle className="text-2xl text-primary">New maintenance request</CardTitle>
+					<CardTitle role="heading" aria-level={2} className="text-2xl text-primary">
+						New maintenance request
+					</CardTitle>
 				</CardHeader>
 				<CardContent className="space-y-4">
 					<form onSubmit={handleSubmit} className="space-y-4">
@@ -303,11 +307,11 @@ export default function Maintenance() {
 						</div>
 						{submitError && (
 							<p className="text-sm text-destructive" role="alert">
-								Something went wrong. Please try again later.
+								{submitError}
 							</p>
 						)}
 						{submitSuccess && (
-							<p className="text-sm text-green-600" role="status">
+							<p className="text-sm text-green-700" role="status">
 								Request submitted. It will appear in the list below.
 							</p>
 						)}

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/pages/PropertyDetails.tsx

@@ -39,6 +39,7 @@ function formatDate(val: string | null): string {
 function PropertyDetailsSkeleton() {
 	return (
 		<div className="mx-auto max-w-[900px]" role="status">
+			<h1 className="sr-only">Property details</h1>
 			<Skeleton className="mb-4 h-4 w-32" />
 
 			<div className="mb-4 grid grid-cols-1 gap-4 md:grid-cols-2">
@@ -141,6 +142,7 @@ export default function PropertyDetails() {
 	if (error) {
 		return (
 			<div className="mx-auto max-w-[900px]">
+				<h1 className="sr-only">Property details</h1>
 				<div className="mb-4">
 					<Link to="/properties" className="text-sm text-primary no-underline hover:underline">
 						← Back to listings
@@ -148,7 +150,9 @@ export default function PropertyDetails() {
 				</div>
 				<Card className="rounded-2xl border border-border shadow-sm">
 					<CardContent className="pt-6">
-						<p className="text-destructive">Something went wrong. Please try again later.</p>
+						<p className="text-destructive" role="alert">
+							Something went wrong. Please try again later.
+						</p>
 					</CardContent>
 				</Card>
 			</div>
@@ -158,6 +162,7 @@ export default function PropertyDetails() {
 	if (!property && id) {
 		return (
 			<div className="mx-auto max-w-[900px]">
+				<h1 className="sr-only">Property details</h1>
 				<div className="mb-4">
 					<Link to="/properties" className="text-sm text-primary no-underline hover:underline">
 						← Back to listings
@@ -165,7 +170,9 @@ export default function PropertyDetails() {
 				</div>
 				<Card className="rounded-2xl border border-border shadow-sm">
 					<CardContent className="pt-6">
-						<p className="text-destructive">Listing not found.</p>
+						<p className="text-destructive" role="status">
+							Listing not found.
+						</p>
 					</CardContent>
 				</Card>
 			</div>
@@ -253,25 +260,25 @@ export default function PropertyDetails() {
 							<span className="text-xl font-semibold text-primary-foreground">
 								{property?.Bedrooms__c?.value ?? "—"}
 							</span>
-							<span className="text-xs text-primary-foreground/90">Bedrooms</span>
+							<span className="text-xs text-primary-foreground">Bedrooms</span>
 						</div>
 						<div className="flex flex-col items-center justify-center rounded-xl bg-primary px-4 py-3 text-center">
 							<span className="text-xl font-semibold text-primary-foreground">
 								{property?.Bathrooms__c?.value ?? "—"}
 							</span>
-							<span className="text-xs text-primary-foreground/90">Baths</span>
+							<span className="text-xs text-primary-foreground">Baths</span>
 						</div>
 						<div className="flex flex-col items-center justify-center rounded-xl bg-primary px-4 py-3 text-center">
 							<span className="text-xl font-semibold text-primary-foreground">
 								{property?.Sq_Ft__c?.value ?? "—"}
 							</span>
-							<span className="text-xs text-primary-foreground/90">Square Feet</span>
+							<span className="text-xs text-primary-foreground">Square Feet</span>
 						</div>
 						<div className="flex flex-col items-center justify-center rounded-xl bg-primary px-4 py-3 text-center">
 							<span className="text-xl font-semibold text-primary-foreground">
 								{listing?.Listing_Status__c?.value ?? "Now"}
 							</span>
-							<span className="text-xs text-primary-foreground/90">Available</span>
+							<span className="text-xs text-primary-foreground">Available</span>
 						</div>
 					</div>
 					{property?.Type__c?.value && (
@@ -287,7 +294,9 @@ export default function PropertyDetails() {
 			{costs.length > 0 && (
 				<Card className="mb-4 rounded-2xl border border-border shadow-sm">
 					<CardHeader>
-						<CardTitle className="text-base font-semibold">Related costs</CardTitle>
+						<CardTitle role="heading" aria-level={2} className="text-base font-semibold">
+							Related costs
+						</CardTitle>
 					</CardHeader>
 					<CardContent>
 						<ul className="space-y-2">
@@ -322,7 +331,9 @@ export default function PropertyDetails() {
 			{features.length > 0 && (
 				<Card className="mb-4 rounded-2xl border border-border shadow-sm">
 					<CardHeader>
-						<CardTitle className="text-base font-semibold">Features & amenities</CardTitle>
+						<CardTitle role="heading" aria-level={2} className="text-base font-semibold">
+							Features & amenities
+						</CardTitle>
 					</CardHeader>
 					<CardContent>
 						<div className="flex flex-wrap gap-1.5">

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/pages/PropertySearch.tsx

@@ -339,6 +339,7 @@ export default function PropertySearch() {
 
 	return (
 		<div className="flex h-[calc(100vh-4rem)] min-h-[500px] flex-col">
+			<h1 className="sr-only">Property Search</h1>
 			<PropertySearchFilters
 				searchQuery={searchQuery}
 				onSearchQueryChange={setSearchQuery}
@@ -380,7 +381,12 @@ export default function PropertySearch() {
 							{searchQuery.trim() ? ` matching "${searchQuery.trim()}"` : ""}
 						</h2>
 						<div className="flex flex-wrap items-center gap-2">
-							<div className="text-sm text-muted-foreground">
+							<div
+								role="status"
+								aria-live="polite"
+								aria-atomic="true"
+								className="text-sm text-muted-foreground"
+							>
 								{apiUnavailable ? (
 									"Placeholder (API unavailable)"
 								) : resultsLoading ? (
@@ -402,7 +408,12 @@ export default function PropertySearch() {
 							)}
 						</div>
 					</div>
-					<div className="flex-1 overflow-y-auto p-4">
+					<div
+						className="flex-1 overflow-y-auto p-4"
+						tabIndex={0}
+						role="region"
+						aria-label="Property listings"
+					>
 						{apiUnavailable ? (
 							<PropertySearchPlaceholder message="Search is temporarily unavailable." />
 						) : resultsLoading ? (
@@ -412,12 +423,12 @@ export default function PropertySearch() {
 								))}
 							</div>
 						) : results.length === 0 ? (
-							<div className="py-12 text-center">
+							<div role="status" className="py-12 text-center">
 								<p className="mb-2 font-medium">No results found</p>
 								<p className="text-sm text-muted-foreground">Try adjusting search or filters</p>
 							</div>
 						) : visibleResults.length === 0 && mapBounds != null ? (
-							<div className="py-12 text-center">
+							<div role="status" className="py-12 text-center">
 								<p className="mb-2 font-medium">No listings in this map area</p>
 								<p className="text-sm text-muted-foreground">
 									Pan or zoom to see results, or clear the map filter

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/styles/global.css

@@ -154,7 +154,7 @@
 	--accent-foreground: oklch(0.21 0.02 260);
 	/* Border / input: soft teal-tinted gray */
 	--border: oklch(0.91 0.02 192);
-	--input: oklch(0.91 0.02 192);
+	--input: oklch(0.62 0.03 192);
 	--ring: oklch(0.52 0.09 192);
 	/* Slightly larger radius for soft, friendly feel (screenshots use 16–24px) */
 	--radius: 0.75rem;

package/dist/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@salesforce/ui-bundle-template-base-sfdx-project",
-  "version": "11.56.2",
+  "version": "11.56.4",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@salesforce/ui-bundle-template-base-sfdx-project",
-      "version": "11.56.2",
+      "version": "11.56.4",
       "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": "11.56.2",
+  "version": "11.56.4",
   "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-sample-b2x",
-  "version": "11.56.2",
+  "version": "11.56.4",
   "description": "Salesforce sample property rental React app",
   "license": "SEE LICENSE IN LICENSE.txt",
   "author": "",