@salesforce/ui-bundle-template-app-react-sample-b2x 11.55.1 → 11.56.1

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.1](https://github.com/salesforce-experience-platform-emu/webapps/compare/v11.56.0...v11.56.1) (2026-08-12)
+
+**Note:** Version bump only for package @salesforce/ui-bundle-template-base-sfdx-project
+
+
+
+
+
+## [11.56.0](https://github.com/salesforce-experience-platform-emu/webapps/compare/v11.55.1...v11.56.0) (2026-08-12)
+
+**Note:** Version bump only for package @salesforce/ui-bundle-template-base-sfdx-project
+
+
+
+
+
 ## [11.55.1](https://github.com/salesforce-experience-platform-emu/webapps/compare/v11.55.0...v11.55.1) (2026-08-11)
 
 **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.55.1",
-    "@salesforce/ui-bundle": "^11.55.1",
+    "@salesforce/platform-sdk": "^11.56.1",
+    "@salesforce/ui-bundle": "^11.56.1",
     "@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.55.1",
-    "@salesforce/vite-plugin-ui-bundle": "^11.55.1",
+    "@salesforce/graphiti": "^11.56.1",
+    "@salesforce/vite-plugin-ui-bundle": "^11.56.1",
     "@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/components/dashboard/WeatherWidget.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+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";
@@ -24,6 +24,10 @@ const FORECAST_TABS: { key: ForecastTab; label: string }[] = [
 	{ key: "next3days", label: "Next 3 Days" },
 ];
 
+/** Tab/panel ids wiring the forecast tablist to its single panel. */
+const FORECAST_PANEL_ID = "weather-forecast-panel";
+const tabId = (key: ForecastTab) => `weather-tab-${key}`;
+
 const HOURLY_KEY: Record<
 	ForecastTab,
 	keyof Pick<WeatherData, "todayHourly" | "tomorrowHourly" | "next3DaysHourly">
@@ -120,7 +124,7 @@ function StatItem({
 }) {
 	return (
 		<div className="flex flex-col items-center gap-1">
-			<Icon className="h-5 w-5 text-gray-400" />
+			<Icon className="h-5 w-5 text-gray-400" aria-hidden />
 			<p className="text-base font-semibold text-primary">{value}</p>
 			<p className="text-xs text-muted-foreground">{label}</p>
 		</div>
@@ -172,26 +176,79 @@ function ForecastTabs({
 	activeTab: ForecastTab;
 	onTabChange: (tab: ForecastTab) => void;
 }) {
+	// Roving tabindex means only the active tab is in the page tab order, so the
+	// ARIA tablist pattern requires arrow/Home/End keys to move selection *and*
+	// focus between tabs — otherwise the other tabs become keyboard-unreachable.
+	const tabRefs = useRef<(HTMLButtonElement | null)[]>([]);
+
+	const onKeyDown = (event: React.KeyboardEvent, index: number) => {
+		const last = FORECAST_TABS.length - 1;
+		let next: number;
+		switch (event.key) {
+			case "ArrowRight":
+			case "ArrowDown":
+				next = index === last ? 0 : index + 1;
+				break;
+			case "ArrowLeft":
+			case "ArrowUp":
+				next = index === 0 ? last : index - 1;
+				break;
+			case "Home":
+				next = 0;
+				break;
+			case "End":
+				next = last;
+				break;
+			default:
+				return;
+		}
+		event.preventDefault();
+		onTabChange(FORECAST_TABS[next].key);
+		tabRefs.current[next]?.focus();
+	};
+
 	return (
-		<div className="flex gap-6">
-			{FORECAST_TABS.map(({ key, label }) => (
-				<button key={key} onClick={() => onTabChange(key)} className="flex flex-col items-center">
-					<span
-						className={`text-sm font-semibold ${activeTab === key ? "text-foreground" : "text-muted-foreground"}`}
+		<div className="flex gap-6" role="tablist" aria-label="Forecast range">
+			{FORECAST_TABS.map(({ key, label }, index) => {
+				const selected = activeTab === key;
+				return (
+					<button
+						key={key}
+						type="button"
+						role="tab"
+						id={tabId(key)}
+						ref={(el) => {
+							tabRefs.current[index] = el;
+						}}
+						aria-selected={selected}
+						aria-controls={FORECAST_PANEL_ID}
+						tabIndex={selected ? 0 : -1}
+						onClick={() => onTabChange(key)}
+						onKeyDown={(event) => onKeyDown(event, index)}
+						className="flex flex-col items-center"
 					>
-						{label}
-					</span>
-					{activeTab === key && <span className="mt-1 h-1.5 w-1.5 rounded-full bg-foreground" />}
-				</button>
-			))}
+						<span
+							className={`text-sm font-semibold ${selected ? "text-foreground" : "text-muted-foreground"}`}
+						>
+							{label}
+						</span>
+						{selected && <span className="mt-1 h-1.5 w-1.5 rounded-full bg-foreground" />}
+					</button>
+				);
+			})}
 		</div>
 	);
 }
 
-function HourlyForecast({ hours }: { hours: WeatherHour[] }) {
-	if (hours.length === 0) return null;
+function HourlyForecast({ hours, activeTab }: { hours: WeatherHour[]; activeTab: ForecastTab }) {
 	return (
-		<div className="mt-4 flex gap-3 overflow-x-auto pb-1">
+		<div
+			id={FORECAST_PANEL_ID}
+			role="tabpanel"
+			aria-labelledby={tabId(activeTab)}
+			tabIndex={0}
+			className="mt-4 flex gap-3 overflow-x-auto pb-1"
+		>
 			{hours.map((h) => (
 				<div
 					key={h.time}
@@ -227,7 +284,7 @@ export function WeatherWidget() {
 					<CurrentConditions weather={weather} />
 					<Divider />
 					<ForecastTabs activeTab={activeTab} onTabChange={setActiveTab} />
-					<HourlyForecast hours={weather[HOURLY_KEY[activeTab]]} />
+					<HourlyForecast hours={weather[HOURLY_KEY[activeTab]]} activeTab={activeTab} />
 				</div>
 			)}
 		</Card>

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

@@ -62,12 +62,13 @@ export function TopBar({ onMenuClick }: TopBarProps) {
 
 function Logo() {
 	return (
-		<div className="flex items-center gap-2">
-			<img src={zenLogo} alt="Zenlease Logo" className="size-8" />
+		<Link to="/" aria-label="ZENLEASE home" className="flex items-center gap-2">
+			{/* Decorative: the accessible name comes from the link's aria-label. */}
+			<img src={zenLogo} alt="" className="size-8" />
 			<span className="text-xl tracking-wide">
 				<span className="font-light">ZEN</span>
 				<span className="font-semibold">LEASE</span>
 			</span>
-		</div>
+		</Link>
 	);
 }

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

@@ -84,9 +84,13 @@ export function VerticalNav({ isOpen = false, onClose }: VerticalNavProps) {
 			{isOpen && (
 				<>
 					<div className="fixed inset-0 z-40 bg-black/50" onClick={onClose} aria-hidden />
+					{/*
+					 * Distinct label from the desktop sidebar: both navs are in the DOM at the
+					 * same time, and two navigation landmarks sharing one name is ambiguous.
+					 */}
 					<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="Main navigation"
+						aria-label="Mobile navigation"
 					>
 						{navContent(onClose)}
 					</nav>

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

@@ -29,17 +29,21 @@ export function MaintenanceRequestIcon({ type }: { type: string | null }) {
 	const iconSrc = issueIcons[issueType];
 	const bgClass = issueIconColors[issueType] ?? "bg-teal-100";
 
+	/*
+	 * Purely decorative: every caller renders the request type as adjacent text, so
+	 * exposing the icon would double-announce it. The wrapper's `aria-hidden` used to
+	 * contradict a meaningful `alt` on the image — the image is now explicitly
+	 * decorative so the intent is unambiguous.
+	 */
 	return (
 		<div
 			className={`flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-lg ${bgClass}`}
-			aria-hidden
+			aria-hidden="true"
 		>
 			{iconSrc ? (
-				<img src={iconSrc} alt={issueType || "Request"} className="h-6 w-6" />
+				<img src={iconSrc} alt="" className="h-6 w-6" />
 			) : (
-				<span className="text-2xl" aria-hidden>
-					🔧
-				</span>
+				<span className="text-2xl">🔧</span>
 			)}
 		</div>
 	);

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

@@ -1,7 +1,7 @@
 /**
  * Read-only maintenance details for B2C Maintenance page (summary rows from maintenanceRequestApi).
  */
-import { useEffect } from "react";
+import { useCallback, useEffect, useRef } from "react";
 import { X } from "lucide-react";
 import { StatusBadge } from "@/components/maintenanceRequests/StatusBadge";
 import type { MaintenanceRequestNode } from "@/api/maintenanceRequests/maintenanceRequestApi";
@@ -11,6 +11,11 @@ export interface MaintenanceSummaryDetailsModalProps {
 	onClose: () => void;
 }
 
+const TITLE_ID = "maintenance-summary-details-title";
+
+const FOCUSABLE_SELECTOR =
+	'a[href], button:not([disabled]), textarea, input, select, [tabindex]:not([tabindex="-1"])';
+
 function formatDate(value: string | null): string {
 	if (!value?.trim()) return "—";
 	try {
@@ -32,28 +37,66 @@ export default function MaintenanceSummaryDetailsModal({
 	request,
 	onClose,
 }: MaintenanceSummaryDetailsModalProps) {
+	const dialogRef = useRef<HTMLDivElement>(null);
+	const closeButtonRef = useRef<HTMLButtonElement>(null);
+
+	// Move focus into the dialog on open and return it to the invoking element on close.
 	useEffect(() => {
-		const handleEscape = (e: KeyboardEvent) => {
-			if (e.key === "Escape") onClose();
-		};
-		document.addEventListener("keydown", handleEscape);
-		return () => document.removeEventListener("keydown", handleEscape);
-	}, [onClose]);
+		const previouslyFocused = document.activeElement as HTMLElement | null;
+		closeButtonRef.current?.focus();
+		return () => previouslyFocused?.focus?.();
+	}, []);
+
+	const handleKeyDown = useCallback(
+		(e: React.KeyboardEvent<HTMLDivElement>) => {
+			if (e.key === "Escape") {
+				onClose();
+				return;
+			}
+			if (e.key !== "Tab") return;
+
+			// Trap Tab within the dialog (WCAG 2.4.3 / 2.1.2 for modal content).
+			const focusable = Array.from(
+				dialogRef.current?.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR) ?? [],
+			);
+			if (focusable.length === 0) return;
+			const first = focusable[0];
+			const last = focusable[focusable.length - 1];
+			const active = document.activeElement;
+			if (e.shiftKey && (active === first || !dialogRef.current?.contains(active))) {
+				e.preventDefault();
+				last.focus();
+			} else if (!e.shiftKey && active === last) {
+				e.preventDefault();
+				first.focus();
+			}
+		},
+		[onClose],
+	);
 
 	return (
 		<div className="fixed inset-0 z-50 flex items-center justify-center p-4">
 			<div className="fixed inset-0 bg-black/50" onClick={onClose} aria-hidden />
 			<div
+				ref={dialogRef}
 				role="dialog"
-				aria-modal
+				aria-modal="true"
+				aria-labelledby={TITLE_ID}
+				onKeyDown={handleKeyDown}
 				className="relative max-h-[90vh] w-full max-w-lg overflow-y-auto rounded-lg bg-white shadow-xl"
 			>
 				<div className="flex items-center justify-between border-b p-4">
-					<h2 className="text-lg font-semibold">
+					<h2 id={TITLE_ID} className="text-lg font-semibold">
 						{request.Description__c?.value ?? request.Name?.value ?? "Request"}
 					</h2>
-					<button type="button" onClick={onClose} className="text-gray-500 hover:text-gray-800">
-						<X className="h-5 w-5" />
+					<button
+						ref={closeButtonRef}
+						type="button"
+						onClick={onClose}
+						aria-label="Close dialog"
+						className="text-gray-500 hover:text-gray-800"
+					>
+						<X className="h-5 w-5" aria-hidden />
 					</button>
 				</div>
 				<div className="space-y-3 p-4 text-sm">

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

@@ -2,7 +2,7 @@
  * Stacked property listing card: image on top, details below. Single price + bedrooms, amenity list, Apply button.
  * No phone or secondary price. Virtual Tours / Videos pills on image.
  */
-import { useNavigate } from "react-router";
+import { useNavigate, Link } from "react-router";
 import { useCallback, type MouseEvent } from "react";
 import { Button } from "@/components/ui/button";
 import { Skeleton } from "@/components/ui/skeleton";
@@ -74,16 +74,6 @@ export default function PropertyListingCard({
 		navigate(detailPath);
 	}, [navigate, detailPath]);
 
-	const handleKeyDown = useCallback(
-		(e: React.KeyboardEvent) => {
-			if (e.key === "Enter" || e.key === " ") {
-				e.preventDefault();
-				handleClick();
-			}
-		},
-		[handleClick],
-	);
-
 	if (loading) {
 		return <PropertyListingCardSkeleton />;
 	}
@@ -94,14 +84,15 @@ export default function PropertyListingCard({
 		.map((s) => s.trim())
 		.filter(Boolean);
 
+	/*
+	 * The card is a pointer-only shortcut to the detail page; the keyboard/AT path is the
+	 * heading link below. Making the whole card `role="button"` would nest the Apply
+	 * button inside an interactive control (axe `nested-interactive`) and swallow its name.
+	 */
 	return (
 		<article
 			className="flex h-full min-h-0 cursor-pointer flex-col overflow-hidden rounded-2xl border border-border bg-card shadow-sm transition-all duration-200 hover:shadow-md focus-within:ring-2 focus-within:ring-primary focus-within:ring-offset-2"
 			onClick={handleClick}
-			onKeyDown={handleKeyDown}
-			role="button"
-			tabIndex={0}
-			aria-label={`View details for ${name}`}
 		>
 			{/* Image on top, full width */}
 			<div className="relative aspect-[16/10] w-full shrink-0 overflow-hidden rounded-t-2xl bg-muted">
@@ -126,7 +117,15 @@ export default function PropertyListingCard({
 			<div className="flex min-h-0 flex-1 flex-col justify-between p-3">
 				<div className="min-h-0">
 					<div className="mb-1.5">
-						<h3 className="text-2xl font-semibold text-foreground">{name}</h3>
+						<h3 className="text-2xl font-semibold text-foreground">
+							<Link
+								to={detailPath}
+								onClick={(e: MouseEvent<HTMLAnchorElement>) => e.stopPropagation()}
+								className="no-underline hover:underline focus-visible:outline-none"
+							>
+								{name}
+							</Link>
+						</h3>
 						{displayAddress && (
 							<p className="truncate text-sm text-muted-foreground">{displayAddress}</p>
 						)}

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

@@ -172,8 +172,9 @@ export default function PropertyMap({
 		return center;
 	}, [center, hasMarkers, markers]);
 
+	// `aria-label` needs a role to be exposed; a labelled region is what a map container is.
 	return (
-		<div className={`relative ${className}`} aria-label="Property map">
+		<div className={`relative ${className}`} role="region" aria-label="Property map">
 			<MapContent
 				center={effectiveCenter}
 				zoom={zoom}

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

@@ -16,6 +16,14 @@ const SAVE_BUTTON_CLASS =
 const DEFAULT_PRICE_MIN = 0;
 const DEFAULT_PRICE_MAX = 100_000;
 
+/*
+ * Radix renders each `Popover.Content` as `role="dialog"`, which needs an
+ * accessible name. Each popover's own heading supplies it via `aria-labelledby`.
+ */
+const PRICE_POPOVER_TITLE_ID = "property-filter-price-title";
+const BEDS_POPOVER_TITLE_ID = "property-filter-beds-title";
+const SORT_POPOVER_TITLE_ID = "property-filter-sort-title";
+
 /** Bedroom filter buckets: ≤2, exactly 3, or ≥4 */
 export type BedroomFilter = "le2" | "3" | "ge4" | null;
 
@@ -145,10 +153,13 @@ export default function PropertySearchFilters({
 							<Popover.Content
 								sideOffset={8}
 								align="start"
+								aria-labelledby={PRICE_POPOVER_TITLE_ID}
 								className="z-[1100] w-[min(20rem,90vw)] rounded-xl border border-border bg-background p-4 shadow-lg outline-none"
 							>
 								<div className="space-y-3">
-									<p className="text-sm font-medium text-foreground">Price range</p>
+									<p id={PRICE_POPOVER_TITLE_ID} className="text-sm font-medium text-foreground">
+										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">
 											<span className="pl-4 text-sm text-muted-foreground">$</span>
@@ -211,10 +222,13 @@ export default function PropertySearchFilters({
 							<Popover.Content
 								sideOffset={8}
 								align="start"
+								aria-labelledby={BEDS_POPOVER_TITLE_ID}
 								className="z-[1100] w-[min(20rem,90vw)] rounded-xl border border-border bg-background p-4 shadow-lg outline-none"
 							>
 								<div className="space-y-3">
-									<p className="text-sm font-medium text-foreground">Number of bedrooms</p>
+									<p id={BEDS_POPOVER_TITLE_ID} className="text-sm font-medium text-foreground">
+										Number of bedrooms
+									</p>
 									<div
 										className="flex overflow-hidden rounded-full border-2 border-primary/40"
 										role="group"
@@ -274,10 +288,13 @@ export default function PropertySearchFilters({
 							<Popover.Content
 								sideOffset={8}
 								align="start"
+								aria-labelledby={SORT_POPOVER_TITLE_ID}
 								className="z-[1100] w-[min(20rem,90vw)] rounded-xl border border-border bg-background p-4 shadow-lg outline-none"
 							>
 								<div className="space-y-3">
-									<p className="text-sm font-medium text-foreground">Sort by</p>
+									<p id={SORT_POPOVER_TITLE_ID} className="text-sm font-medium text-foreground">
+										Sort by
+									</p>
 									<div className="flex flex-col gap-1">
 										{SORT_OPTIONS.map(({ value, label }) => (
 											<button

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

@@ -237,7 +237,7 @@ export default function Application() {
 							))}
 					</p>
 					{loadError && (
-						<p className="mt-2 text-sm text-destructive">
+						<p className="mt-2 text-sm text-destructive" role="alert">
 							Something went wrong. Please try again later.
 						</p>
 					)}
@@ -279,7 +279,7 @@ export default function Application() {
 							/>
 						</div>
 						{submitError && (
-							<p className="mb-4 text-sm text-destructive">
+							<p className="mb-4 text-sm text-destructive" role="alert">
 								Something went wrong. Please try again later.
 							</p>
 						)}

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

@@ -148,7 +148,7 @@ function ContactForm({
 						/>
 					</div>
 					{submitError && (
-						<p className="text-sm text-destructive">
+						<p className="text-sm text-destructive" role="alert">
 							Something went wrong. Please try again later.
 						</p>
 					)}

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

@@ -30,6 +30,10 @@ import {
 	Twitter,
 } from "lucide-react";
 
+/** FAQ accordion ids — shared between the toggle button and the panel it controls. */
+const faqButtonId = (index: number) => `faq-toggle-${index}`;
+const faqPanelId = (index: number) => `faq-panel-${index}`;
+
 const HERO_IMAGE = "https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?w=1200&q=85";
 const CITY_IMAGE = "https://images.unsplash.com/photo-1514565131-fce0801e5785?w=800&q=85";
 const RELAX_IMAGE = "https://images.unsplash.com/photo-1586023492125-27b2c045efd7?w=600&q=85";
@@ -374,30 +378,45 @@ export default function Home() {
 						Frequently Asked Questions
 					</h2>
 					<div className="space-y-2">
-						{FAQ_ITEMS.map((item, index) => (
-							<div
-								key={index}
-								className="overflow-hidden rounded-xl border border-teal-100 bg-white shadow-sm"
-							>
-								<button
-									type="button"
-									onClick={() => setFaqOpen(faqOpen === index ? null : index)}
-									className="flex w-full cursor-pointer items-center justify-between gap-4 px-5 py-4 text-left font-medium text-foreground transition-colors duration-200 hover:bg-muted/50"
+						{FAQ_ITEMS.map((item, index) => {
+							const expanded = faqOpen === index;
+							return (
+								<div
+									key={index}
+									className="overflow-hidden rounded-xl border border-teal-100 bg-white shadow-sm"
 								>
-									<span>{item.q}</span>
-									{faqOpen === index ? (
-										<ChevronUp className="size-5 shrink-0 text-muted-foreground" />
-									) : (
-										<ChevronDown className="size-5 shrink-0 text-muted-foreground" />
-									)}
-								</button>
-								{faqOpen === index && (
-									<div className="border-t border-teal-100 px-5 py-4 text-sm text-muted-foreground">
+									<h3>
+										<button
+											type="button"
+											id={faqButtonId(index)}
+											aria-expanded={expanded}
+											aria-controls={faqPanelId(index)}
+											onClick={() => setFaqOpen(expanded ? null : index)}
+											className="flex w-full cursor-pointer items-center justify-between gap-4 px-5 py-4 text-left font-medium text-foreground transition-colors duration-200 hover:bg-muted/50"
+										>
+											<span>{item.q}</span>
+											{expanded ? (
+												<ChevronUp className="size-5 shrink-0 text-muted-foreground" aria-hidden />
+											) : (
+												<ChevronDown
+													className="size-5 shrink-0 text-muted-foreground"
+													aria-hidden
+												/>
+											)}
+										</button>
+									</h3>
+									<div
+										id={faqPanelId(index)}
+										role="region"
+										aria-labelledby={faqButtonId(index)}
+										hidden={!expanded}
+										className="border-t border-teal-100 px-5 py-4 text-sm text-muted-foreground"
+									>
 										{item.a}
 									</div>
-								)}
-							</div>
-						))}
+								</div>
+							);
+						})}
 					</div>
 				</div>
 			</section>
@@ -422,27 +441,33 @@ export default function Home() {
 								<Button
 									type="submit"
 									size="icon"
+									aria-label="Subscribe to newsletter"
 									className="shrink-0 bg-teal-600 hover:bg-teal-700"
 									disabled={newsletterSubmitting}
 								>
 									<Send className="size-4" aria-hidden />
 								</Button>
 							</div>
-							{newsletterMessage && (
-								<p
-									className={
-										newsletterMessage.type === "success" ? "text-teal-200" : "text-red-300"
-									}
-								>
-									{newsletterMessage.text}
-								</p>
-							)}
+							{/* Live region stays mounted so the result is announced when it arrives. */}
+							<p
+								role="status"
+								aria-live="polite"
+								className={
+									newsletterMessage == null
+										? "sr-only"
+										: newsletterMessage.type === "success"
+											? "text-teal-200"
+											: "text-red-300"
+								}
+							>
+								{newsletterMessage?.text ?? ""}
+							</p>
 						</form>
 					</div>
 					<div>
-						<h4 className="mb-3 text-sm font-semibold uppercase tracking-wider text-white">
+						<h3 className="mb-3 text-sm font-semibold uppercase tracking-wider text-white">
 							Explore
-						</h4>
+						</h3>
 						<ul className="space-y-2 text-sm">
 							<li>
 								<Link to="/" className="text-teal-200 hover:text-white">
@@ -462,9 +487,9 @@ export default function Home() {
 						</ul>
 					</div>
 					<div>
-						<h4 className="mb-3 text-sm font-semibold uppercase tracking-wider text-white">
+						<h3 className="mb-3 text-sm font-semibold uppercase tracking-wider text-white">
 							Support
-						</h4>
+						</h3>
 						<ul className="space-y-2 text-sm">
 							<li>
 								<Link to="/contact" className="text-teal-200 hover:text-white">
@@ -488,16 +513,15 @@ export default function Home() {
 					<p className="text-xs text-teal-300">
 						© {new Date().getFullYear()} ZENLEASE. All rights reserved. Terms & Conditions
 					</p>
-					<div className="flex gap-4">
-						<a href="#" className="text-teal-300 hover:text-white" aria-label="Facebook">
-							<Facebook className="size-5" aria-hidden />
-						</a>
-						<a href="#" className="text-teal-300 hover:text-white" aria-label="Instagram">
-							<Instagram className="size-5" aria-hidden />
-						</a>
-						<a href="#" className="text-teal-300 hover:text-white" aria-label="Twitter">
-							<Twitter className="size-5" aria-hidden />
-						</a>
+					{/*
+					 * Brand marks only. Rendered as decorative, non-focusable icons rather than
+					 * `href="#"` links: a link that goes nowhere is a keyboard trap for no benefit
+					 * (WCAG 2.4.4 / 3.2.4). Swap in real anchors when the social URLs exist.
+					 */}
+					<div className="flex gap-4 text-teal-300" aria-hidden="true">
+						<Facebook className="size-5" />
+						<Instagram className="size-5" />
+						<Twitter className="size-5" />
 					</div>
 				</div>
 			</footer>

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

@@ -214,7 +214,8 @@ export default function Maintenance() {
 						)}
 						{tenantProperties.length === 1 && selectedTenant && (
 							<div className="space-y-2">
-								<Label>Property</Label>
+								{/* Read-only value, not a form control — a <label> here would have nothing to label. */}
+								<p className="text-sm font-medium leading-none">Property</p>
 								<p className="text-sm text-muted-foreground">
 									{selectedTenant.Property__r?.Address__c?.value ??
 										selectedTenant.Property__r?.Name?.value}

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

@@ -360,7 +360,8 @@ export default function PropertySearch() {
 			{/* Main: map 2/3, list 1/3 */}
 			<div className="flex min-h-0 flex-1 flex-col lg:flex-row">
 				{/* Map – 2/3 on desktop */}
-				<div className="isolate h-64 shrink-0 lg:h-full lg:min-h-0 lg:w-2/3" aria-label="Map">
+				{/* Sizing wrapper only — PropertyMap renders the labelled map region. */}
+				<div className="isolate h-64 shrink-0 lg:h-full lg:min-h-0 lg:w-2/3">
 					<PropertyMap
 						center={MAP_CENTER_FALLBACK}
 						zoom={mapMarkers.length > 0 ? MAP_ZOOM_WITH_MARKERS : MAP_ZOOM_DEFAULT}

package/dist/package-lock.json

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