@salesforce/ui-bundle-template-app-react-sample-b2x 12.6.3 → 12.7.0-canary.1016.23.1.g31dc6b7a

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/features/authentication/layout/centered-page-layout.tsx

@@ -1,10 +1,12 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+
 import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../../../lib/utils";
 
-/**
- * Variant styles for the content container's maximum width.
- * Controls the maximum width of the inner content area within the page layout.
- */
 const contentContainerVariants = cva("w-full", {
 	variants: {
 		contentMaxWidth: {
@@ -18,48 +20,14 @@ const contentContainerVariants = cva("w-full", {
 	},
 });
 
-/**
- * Props for the CenteredPageLayout component.
- */
 interface CenteredPageLayoutProps
 	extends React.ComponentProps<"div">, VariantProps<typeof contentContainerVariants> {
-	/** The content to be displayed within the page layout */
 	children: React.ReactNode;
-	/**
-	 * Maximum width of the content container.
-	 * @default "sm"
-	 */
 	contentMaxWidth?: "sm" | "md" | "lg";
-	/**
-	 * Optional page title. If provided, will render a <title> component that React will place in the document head.
-	 */
 	title?: string;
-	/**
-	 * When true, content is aligned to the top instead of being vertically centered.
-	 * @default true
-	 */
 	topAligned?: boolean;
 }
 
-/**
- * CenteredPageLayout component that provides consistent page structure and spacing.
- *
- * This component creates a full-viewport-height container that centers its content
- * horizontally. By default, content is top-aligned; set `topAligned={false}` to
- * vertically center instead. The inner content area has a configurable maximum width
- * to prevent content from becoming too wide on large screens.
- *
- * @example
- * ```tsx
- * <CenteredPageLayout contentMaxWidth="md">
- *   <YourPageContent />
- * </CenteredPageLayout>
- *
- * <CenteredPageLayout contentMaxWidth="md" topAligned={false}>
- *   <VerticallyCenteredContent />
- * </CenteredPageLayout>
- * ```
- */
 export function CenteredPageLayout({
 	contentMaxWidth,
 	className,
@@ -71,7 +39,7 @@ export function CenteredPageLayout({
 	return (
 		<>
 			{title && <title>{title}</title>}
-			<main
+			<div
 				className={cn(
 					"flex min-h-svh w-full justify-center p-6 md:p-10",
 					topAligned ? "items-start" : "items-center",
@@ -81,7 +49,7 @@ export function CenteredPageLayout({
 				{...props}
 			>
 				<div className={contentContainerVariants({ contentMaxWidth })}>{children}</div>
-			</main>
+			</div>
 		</>
 	);
 }

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/features/authentication/layouts/TenantRoute.tsx

@@ -1,19 +1,43 @@
 import { Navigate, Outlet, useLocation } from "react-router";
 import { useAuth } from "@/features/authentication/context/AuthContext";
-import { ROUTES } from "@/features/authentication/authenticationConfig";
+import {
+	AUTH_REDIRECT_PARAM,
+	ROUTES,
+} from "@/features/authentication/authenticationConfig";
 import { useTenantAccess } from "@/context/TenantAccessContext";
 
 export default function TenantRoute() {
 	const location = useLocation();
 	const { isAuthenticated, loading } = useAuth();
-	const { hasTenantRecord, loading: tenantLoading } = useTenantAccess();
+	const { hasTenantRecord, loading: tenantLoading, error, retry } = useTenantAccess();
 
-	if (loading || tenantLoading) return null;
+	if (loading) return <p role="status">Checking sign-in…</p>;
 
 	if (!isAuthenticated) {
-		return <Navigate to={ROUTES.LOGIN.PATH} state={{ from: location.pathname }} replace />;
+		const search = new URLSearchParams({
+			[AUTH_REDIRECT_PARAM]: location.pathname + location.search,
+		});
+		return <Navigate to={{ pathname: ROUTES.LOGIN.PATH, search: search.toString() }} replace />;
 	}
 
+	if (tenantLoading) return <p role="status">Checking tenant access…</p>;
+	if (error)
+		return (
+			<div className="space-y-4">
+				<h1 className="text-xl font-semibold">Tenant access unavailable</h1>
+				<p role="alert" className="text-destructive">
+					{error}
+				</p>
+				<button
+					type="button"
+					onClick={retry}
+					className="rounded-md border px-4 py-2 focus-visible:outline-2 focus-visible:outline-offset-2"
+				>
+					Try again
+				</button>
+			</div>
+		);
+
 	if (!hasTenantRecord) {
 		return <Navigate to="/" replace />;
 	}

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/features/authentication/layouts/privateRouteLayout.tsx

@@ -12,7 +12,7 @@ export default function PrivateRoute() {
 	const { isAuthenticated, loading } = useAuth();
 	const location = useLocation();
 
-	if (loading) return null;
+	if (loading) return <p role="status">Checking sign-in…</p>;
 
 	if (!isAuthenticated) {
 		const searchParams = new URLSearchParams();

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"}