@salesforce/ui-bundle-template-app-react-sample-b2x 12.6.3 → 12.7.0

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/features/authentication/menu/AuthMenu.tsx

@@ -1,5 +1,12 @@
+/*
+ * Copyright (c) 2024, Salesforce, Inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { useEffect, useId, useRef } from "react";
 import { CircleUser, LogIn, LogOut, UserPen, UserPlus } from "lucide-react";
-import { Link } from "react-router";
+import { Link, useLocation } from "react-router";
 import { useAuth } from "../context/AuthContext";
 import { ROUTES } from "../authenticationConfig";
 import { Button } from "../../../components/ui/button";
@@ -31,6 +38,13 @@ export interface AuthMenuProps {
 
 export function AuthMenu({ trigger, guestContent, menuItems, className }: AuthMenuProps) {
 	const { user, isAuthenticated, loading, logout } = useAuth();
+	const { pathname } = useLocation();
+	const userLabelId = useId();
+	const openedPathname = useRef(pathname);
+	const currentPathname = useRef(pathname);
+	useEffect(() => {
+		currentPathname.current = pathname;
+	}, [pathname]);
 
 	if (loading) {
 		return <Skeleton className="size-8 rounded-full" />;
@@ -49,14 +63,38 @@ export function AuthMenu({ trigger, guestContent, menuItems, className }: AuthMe
 	const triggerNode = (isAuthenticated && user && trigger?.(user)) || defaultTrigger;
 
 	return (
-		<DropdownMenu>
+		<DropdownMenu
+			onOpenChange={(open) => {
+				if (open) openedPathname.current = pathname;
+			}}
+		>
 			<DropdownMenuTrigger asChild>{triggerNode}</DropdownMenuTrigger>
 
-			<DropdownMenuContent align="end" className={className ?? "w-48"}>
+			<DropdownMenuContent
+				align="end"
+				aria-describedby={isAuthenticated ? userLabelId : undefined}
+				className={className ?? "w-48"}
+				onCloseAutoFocus={(event) => {
+					if (openedPathname.current === currentPathname.current) return;
+					event.preventDefault();
+					// Recover page focus intercepted by the closing menu trap.
+					const active = document.activeElement;
+					if (active && active !== document.body && active.isConnected) return;
+					const target =
+						document.querySelector<HTMLElement>("main h1, [role='main'] h1") ??
+						document.querySelector<HTMLElement>("main, [role='main']");
+					if (target) {
+						if (!target.hasAttribute("tabindex")) target.setAttribute("tabindex", "-1");
+						target.focus();
+					}
+				}}
+			>
 				{isAuthenticated ? (
 					<>
-						<DropdownMenuLabel className="truncate">{user?.name}</DropdownMenuLabel>
-						<DropdownMenuSeparator />
+						<DropdownMenuLabel id={userLabelId} className="truncate" aria-hidden="true">
+							{user?.name}
+						</DropdownMenuLabel>
+						<DropdownMenuSeparator aria-hidden="true" />
 						<DropdownMenuItem asChild>
 							<Link to={ROUTES.PROFILE.PATH}>
 								<UserPen className="size-4" />

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/features/authentication/pages/ChangePassword.tsx

@@ -50,7 +50,7 @@ export default function ChangePassword() {
 						err.errors.length === 1 ? (
 							err.errors[0]
 						) : (
-							<ul>
+							<ul role="list">
 								{err.errors.map((e, i) => (
 									<li key={i}>{e}</li>
 								))}

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/features/authentication/pages/ForgotPassword.tsx

@@ -4,11 +4,15 @@ import { CenteredPageLayout } from "../layout/centered-page-layout";
 import { AuthForm } from "../forms/auth-form";
 import { useAppForm } from "../hooks/form";
 import { createDataSDK } from "@salesforce/platform-sdk";
-import { ROUTES, AUTH_PLACEHOLDERS } from "../authenticationConfig";
+import { ROUTES } from "../authenticationConfig";
 import { ApiError, handleApiResponse } from "../utils/helpers";
 
 const forgotPasswordSchema = z.object({
-	username: z.string().trim().toLowerCase().email("Please enter a valid username"),
+	username: z
+		.string()
+		.trim()
+		.toLowerCase()
+		.email("Enter your username in email format, for example asmith@example.com"),
 });
 
 export default function ForgotPassword() {
@@ -42,7 +46,7 @@ export default function ForgotPassword() {
 						err.errors.length === 1 ? (
 							err.errors[0]
 						) : (
-							<ul>
+							<ul role="list">
 								{err.errors.map((e, i) => (
 									<li key={i}>{e}</li>
 								))}
@@ -75,7 +79,7 @@ export default function ForgotPassword() {
 						{(field) => (
 							<field.TextField
 								label="Username"
-								placeholder={AUTH_PLACEHOLDERS.USERNAME}
+								placeholder="asmith@example.com"
 								autoComplete="username"
 								disabled={success}
 							/>

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/features/authentication/pages/Login.tsx

@@ -60,7 +60,7 @@ export default function Login() {
 						err.errors.length === 1 ? (
 							err.errors[0]
 						) : (
-							<ul>
+							<ul role="list">
 								{err.errors.map((e, i) => (
 									<li key={i}>{e}</li>
 								))}

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/features/authentication/pages/Register.tsx

@@ -69,7 +69,7 @@ export default function Register() {
 				console.error("Registration failed", err);
 				if (err instanceof ApiError) {
 					setSubmitError(
-						<ul>
+						<ul role="list">
 							{err.errors.map((e, i) => (
 								<li key={i}>{e}</li>
 							))}

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/features/authentication/pages/ResetPassword.tsx

@@ -45,7 +45,7 @@ export default function ResetPassword() {
 						err.errors.length === 1 ? (
 							err.errors[0]
 						) : (
-							<ul>
+							<ul role="list">
 								{err.errors.map((e, i) => (
 									<li key={i}>{e}</li>
 								))}
@@ -64,6 +64,7 @@ export default function ResetPassword() {
 		return (
 			<CenteredPageLayout title={ROUTES.RESET_PASSWORD.TITLE}>
 				<CardLayout title="Reset Password">
+					<h1 className="sr-only">Reset Password</h1>
 					<StatusAlert>
 						Reset token is invalid or expired.{" "}
 						<Link to={ROUTES.FORGOT_PASSWORD.PATH} className="underline underline-offset-4">

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/features/authentication/sessionTimeout/SessionTimeoutValidator.tsx

@@ -378,6 +378,7 @@ function SessionWarningModal({
 	onCountdownExpire,
 }: SessionWarningModalProps) {
 	const continueButtonRef = useRef<HTMLButtonElement>(null);
+	const previousFocusRef = useRef<HTMLElement | null>(null);
 
 	// Countdown timer with accessibility
 	const timer = useCountdownTimer({
@@ -399,13 +400,6 @@ function SessionWarningModal({
 		start();
 	}, [isOpen, timeRemaining, start, stop, reset]);
 
-	// Focus the continue button when dialog opens
-	useEffect(() => {
-		if (isOpen) {
-			continueButtonRef.current?.focus();
-		}
-	}, [isOpen]);
-
 	// Handle "Continue Working" button click
 	const handleContinue = useCallback(() => {
 		stop();
@@ -421,6 +415,30 @@ function SessionWarningModal({
 	return (
 		<Dialog open={isOpen} onOpenChange={() => {}}>
 			<DialogContent
+				aria-labelledby="session-warning-title"
+				aria-describedby="session-warning-description"
+				onOpenAutoFocus={(event) => {
+					event.preventDefault();
+					previousFocusRef.current =
+						document.activeElement instanceof HTMLElement ? document.activeElement : null;
+					continueButtonRef.current?.focus();
+				}}
+				onCloseAutoFocus={(event) => {
+					event.preventDefault();
+					const previous = previousFocusRef.current;
+					previousFocusRef.current = null;
+					if (previous?.isConnected && previous !== document.body) {
+						previous.focus();
+						if (document.activeElement === previous) return;
+					}
+					const target = document.querySelector<HTMLElement>("main, #main-content");
+					if (target) {
+						if (target.tabIndex < 0 && !target.hasAttribute("tabindex")) {
+							target.setAttribute("tabindex", "-1");
+						}
+						target.focus();
+					}
+				}}
 				showCloseButton={false}
 				onEscapeKeyDown={(e) => e.preventDefault()}
 				onPointerDownOutside={(e) => e.preventDefault()}
@@ -578,6 +596,11 @@ export default function SessionTimeoutValidator({
 	 */
 	const handleDismissAlert = useCallback(() => {
 		setShowExpiredAlert(false);
+		const main = document.querySelector<HTMLElement>("main, #main-content");
+		if (main) {
+			if (!main.hasAttribute("tabindex")) main.setAttribute("tabindex", "-1");
+			main.focus();
+		}
 	}, []);
 
 	return (

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/features/object-search/api/objectSearchService.ts

@@ -29,11 +29,9 @@ export async function searchObjects<TResult, TQuery, TVariables>(
 	}
 
 	const uiapi = (result.data as Record<string, unknown> | undefined)?.uiapi as
-		| Record<string, unknown>
-		| undefined;
+		Record<string, unknown> | undefined;
 	const queryResult = (uiapi?.query as Record<string, unknown> | undefined)?.[objectName] as
-		| TResult
-		| undefined;
+		TResult | undefined;
 
 	if (!queryResult) {
 		throw new Error(`No ${objectName} data returned`);
@@ -56,18 +54,15 @@ export async function fetchDistinctValues<TQuery>(
 	}
 
 	const uiapi = (result.data as Record<string, unknown> | undefined)?.uiapi as
-		| Record<string, unknown>
-		| undefined;
+		Record<string, unknown> | undefined;
 	const aggregate = (uiapi?.aggregate as Record<string, unknown> | undefined)?.[objectName] as
-		| { edges?: Array<{ node?: { aggregate?: Record<string, unknown> } }> }
-		| undefined;
+		{ edges?: Array<{ node?: { aggregate?: Record<string, unknown> } }> } | undefined;
 
 	const edges = aggregate?.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) return null;
 			return { value, label: field.label ?? field.displayValue ?? value };

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/features/object-search/components/PaginationControls.tsx

@@ -13,6 +13,7 @@ import {
 	SelectValue,
 } from "../../../components/ui/select";
 import { Label } from "../../../components/ui/label";
+import { useEffect, useRef, useState, type KeyboardEvent } from "react";
 
 interface PaginationControlsProps {
 	pageIndex: number;
@@ -37,7 +38,9 @@ export default function PaginationControls({
 	onPageSizeChange,
 	disabled = false,
 }: PaginationControlsProps) {
+	const [pageSizeOpen, setPageSizeOpen] = useState(false);
 	const handlePageSizeChange = (newValue: string) => {
+		if (disabled) return;
 		const newSize = parseInt(newValue, 10);
 		if (!isNaN(newSize) && newSize !== pageSize) {
 			onPageSizeChange(newSize);
@@ -46,9 +49,33 @@ export default function PaginationControls({
 	const currentPage = pageIndex + 1;
 	const prevDisabled = disabled || !hasPreviousPage;
 	const nextDisabled = disabled || !hasNextPage;
+	const navRef = useRef<HTMLDivElement>(null);
+
+	useEffect(() => {
+		if (disabled) {
+			setPageSizeOpen(false);
+			return;
+		}
+		const buttons = navRef.current?.querySelectorAll<HTMLElement>('[role="button"]');
+		if (!buttons || buttons.length === 0) return;
+		const first = buttons[0];
+		const last = buttons[buttons.length - 1];
+		if (nextDisabled && !prevDisabled && document.activeElement === last) first.focus();
+		else if (prevDisabled && !nextDisabled && document.activeElement === first) last.focus();
+	}, [disabled, prevDisabled, nextDisabled]);
+
+	const handleActivationKey = (action: () => void) => (event: KeyboardEvent) => {
+		if (event.key === "Enter" || event.key === " ") {
+			event.preventDefault();
+			action();
+		}
+	};
 
 	return (
-		<div className="w-full grid grid-cols-1 sm:grid-cols-2 items-center justify-center gap-4 py-2">
+		<div
+			ref={navRef}
+			className="w-full grid grid-cols-1 sm:grid-cols-2 items-center justify-center gap-4 py-2"
+		>
 			<div
 				className="flex justify-center sm:justify-start items-center gap-2 shrink-0 row-2 sm:row-1"
 				role="group"
@@ -60,11 +87,13 @@ export default function PaginationControls({
 				<Select
 					value={pageSize.toString()}
 					onValueChange={handlePageSizeChange}
-					disabled={disabled}
+					open={pageSizeOpen}
+					onOpenChange={(open) => setPageSizeOpen(!disabled && open)}
 				>
 					<SelectTrigger
 						id="page-size-select"
-						className="w-16"
+						className={`w-16 ${disabled ? "opacity-50 cursor-not-allowed" : ""}`}
+						aria-disabled={disabled || undefined}
 						aria-label="Select number of results per page"
 					>
 						<SelectValue />
@@ -82,7 +111,10 @@ export default function PaginationControls({
 				<PaginationContent>
 					<PaginationItem>
 						<PaginationPrevious
+							role="button"
+							tabIndex={prevDisabled ? -1 : 0}
 							onClick={prevDisabled ? undefined : onPreviousPage}
+							onKeyDown={prevDisabled ? undefined : handleActivationKey(onPreviousPage)}
 							aria-disabled={prevDisabled}
 							className={prevDisabled ? "pointer-events-none opacity-50" : "cursor-pointer"}
 						/>
@@ -97,7 +129,10 @@ export default function PaginationControls({
 					</PaginationItem>
 					<PaginationItem>
 						<PaginationNext
+							role="button"
+							tabIndex={nextDisabled ? -1 : 0}
 							onClick={nextDisabled ? undefined : onNextPage}
+							onKeyDown={nextDisabled ? undefined : handleActivationKey(onNextPage)}
 							aria-disabled={nextDisabled}
 							className={nextDisabled ? "pointer-events-none opacity-50" : "cursor-pointer"}
 						/>

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

@@ -0,0 +1,54 @@
+/*
+ * Copyright (c) 2026, Salesforce, Inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { useEffect, useRef } from "react";
+
+function isTextEntry(el: HTMLElement): boolean {
+	if (el.isContentEditable) return true;
+	if (el.tagName === "TEXTAREA") return true;
+	if (el.tagName !== "INPUT") return false;
+	const type = (el.getAttribute("type") ?? "text").toLowerCase();
+	return !["button", "submit", "reset", "checkbox", "radio", "range", "color", "file"].includes(
+		type,
+	);
+}
+
+/** Reanchors the reading cursor after reloads while preserving newer focus and text entry. */
+export function useReanchorReadingCursor(loading: boolean) {
+	const previousLoading = useRef(loading);
+	const focusedOnReloadStart = useRef<HTMLElement | null>(null);
+
+	useEffect(() => {
+		const started = !previousLoading.current && loading;
+		const settled = previousLoading.current && !loading;
+		previousLoading.current = loading;
+
+		if (started) {
+			const active = document.activeElement;
+			focusedOnReloadStart.current =
+				active instanceof HTMLElement && active !== document.body && !isTextEntry(active)
+					? active
+					: null;
+			return;
+		}
+		if (!settled) return;
+
+		const target = focusedOnReloadStart.current;
+		focusedOnReloadStart.current = null;
+		if (!target || !target.isConnected) return;
+		const active = document.activeElement;
+		if (active !== target && active !== document.body) return;
+
+		const raf = requestAnimationFrame(() => {
+			if (!target.isConnected) return;
+			const current = document.activeElement;
+			if (current !== target && current !== document.body) return;
+			// VoiceOver tracks the blur/refocus transition after the results render.
+			if (document.activeElement === target) target.blur();
+			target.focus();
+		});
+		return () => cancelAnimationFrame(raf);
+	}, [loading]);
+}

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

@@ -144,10 +144,18 @@ export default function Application() {
 	const [submitError, setSubmitError] = useState<string | null>(null);
 	const [submittedName, setSubmittedName] = useState<string | null>(null);
 	const successHeadingRef = useRef<HTMLHeadingElement>(null);
+	const formHeadingRef = useRef<HTMLHeadingElement>(null);
+	const returnToForm = useRef(false);
 
 	useEffect(() => {
 		if (submittedName) successHeadingRef.current?.focus();
-	}, [submittedName]);
+		else if (!propertyId && !loading && returnToForm.current) {
+			returnToForm.current = false;
+			if (document.activeElement === document.body || document.activeElement?.matches("main")) {
+				formHeadingRef.current?.focus();
+			}
+		}
+	}, [submittedName, loading, propertyId]);
 
 	const handleSubmit = useCallback(
 		async (e: SubmitEvent<HTMLFormElement>) => {
@@ -174,7 +182,7 @@ export default function Application() {
 				setSubmitting(false);
 			}
 		},
-		[propertyId, contactId, moveInDate, employment, references, user?.id],
+		[propertyId, contactId, moveInDate, employment, references],
 	);
 
 	if (loading) {
@@ -183,17 +191,18 @@ export default function Application() {
 
 	if (submittedName) {
 		return (
-			<div className="mx-auto max-w-[900px]" role="status">
+			<div className="mx-auto max-w-[900px]">
 				<h1 className="sr-only">Application submitted</h1>
 				<Card className="mb-6 rounded-2xl border border-border p-6 shadow-sm">
 					<h2
 						ref={successHeadingRef}
 						tabIndex={-1}
+						aria-describedby="application-success-description"
 						className="mb-2 text-2xl font-semibold text-foreground"
 					>
 						Application submitted
 					</h2>
-					<p className="text-sm text-muted-foreground">
+					<p id="application-success-description" className="text-sm text-muted-foreground">
 						Your application
 						{propertyName ? (
 							<>
@@ -216,9 +225,20 @@ export default function Application() {
 						<Button
 							asChild
 							size="sm"
-							className="rounded-xl bg-primary px-5 py-5 text-lg font-medium transition-colors duration-200 hover:bg-primary/90"
+							className="rounded-xl bg-primary px-5 py-5 text-lg font-medium transition-colors duration-200 [a]:hover:bg-primary/95"
 						>
-							<Link to="/application">Submit another</Link>
+							<Link
+								to="/application"
+								onClick={() => {
+									returnToForm.current = true;
+									setSubmittedName(null);
+									setMoveInDate("");
+									setEmployment("");
+									setReferences("");
+								}}
+							>
+								Submit another
+							</Link>
 						</Button>
 					</div>
 				</Card>
@@ -228,7 +248,9 @@ export default function Application() {
 
 	return (
 		<div className="mx-auto max-w-[900px]">
-			<h1 className="sr-only">Apply for a property</h1>
+			<h1 ref={formHeadingRef} tabIndex={-1} className="sr-only">
+				Apply for a property
+			</h1>
 			<div className="mb-4">
 				<Link
 					to={propertyId ? `/property/${propertyId}` : "/properties"}
@@ -308,7 +330,7 @@ export default function Application() {
 							<Button
 								type="submit"
 								size="sm"
-								className="w-full cursor-pointer rounded-xl bg-primary px-5 py-5 text-lg font-medium transition-colors duration-200 hover:bg-primary/90 disabled:opacity-50"
+								className="w-full cursor-pointer rounded-xl bg-primary px-5 py-5 text-lg font-medium transition-colors duration-200 hover:bg-primary/95 disabled:opacity-50"
 								disabled={submitting}
 							>
 								{submitting ? "Submitting…" : "Submit application"}