@salesforce/ui-bundle-template-app-react-sample-b2e 11.7.0 → 11.8.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.8.1](https://github.com/salesforce-experience-platform-emu/webapps/compare/v11.8.0...v11.8.1) (2026-07-06)
+
+**Note:** Version bump only for package @salesforce/ui-bundle-template-base-sfdx-project
+
+
+
+
+
+## [11.8.0](https://github.com/salesforce-experience-platform-emu/webapps/compare/v11.7.0...v11.8.0) (2026-07-06)
+
+**Note:** Version bump only for package @salesforce/ui-bundle-template-base-sfdx-project
+
+
+
+
+
 ## [11.7.0](https://github.com/salesforce-experience-platform-emu/webapps/compare/v11.6.0...v11.7.0) (2026-07-06)
 
 **Note:** Version bump only for package @salesforce/ui-bundle-template-base-sfdx-project

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

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

@@ -45,10 +45,24 @@ export const IssuesDonutChart: React.FC<IssuesDonutChartProps> = ({ data, loadin
 	const maxValue = data.length > 0 ? Math.max(...data.map((item) => item.value)) : 0;
 	const mainPercentage = total > 0 ? Math.round((maxValue / total) * 100) : 0;
 
+	// Recharts renders each sector as an <svg><path role="img">, but arbitrary ARIA
+	// props on <Cell> are not reliably forwarded to that path. Instead of labelling
+	// each slice, expose the whole chart as a single labelled image summarizing the
+	// data, and hide the decorative SVG internals from assistive technology.
+	const chartSummary =
+		total > 0
+			? `Top maintenance issues: ${data
+					.map((item) => `${item.name} ${Math.round((item.value / total) * 100)}%`)
+					.join(", ")}.`
+			: "Top maintenance issues: no data available.";
+
 	return (
 		<Card className="p-4 border-gray-200 shadow-sm flex flex-col relative">
 			{/* Three-dot menu */}
-			<button className="absolute top-4 right-4 p-1 hover:bg-gray-100 rounded-md transition-colors z-10">
+			<button
+				className="absolute top-4 right-4 p-1 hover:bg-gray-100 rounded-md transition-colors z-10"
+				aria-label="More options"
+			>
 				<MoreVertical className="w-4 h-4 text-gray-400" />
 			</button>
 
@@ -71,34 +85,41 @@ export const IssuesDonutChart: React.FC<IssuesDonutChartProps> = ({ data, loadin
 				</>
 			) : (
 				<>
-					<div className="relative flex items-center justify-center">
-						<ResponsiveContainer width="100%" height={300}>
-							<PieChart>
-								<Pie
-									data={data}
-									cx="50%"
-									cy="50%"
-									innerRadius={70}
-									outerRadius={110}
-									paddingAngle={2}
-									dataKey="value"
-								>
-									{data.map((entry, index) => (
-										<Cell key={`cell-${index}`} fill={entry.color} />
-									))}
-								</Pie>
-								<Tooltip
-									content={(props) => (
-										<CustomTooltip
-											active={props.active}
-											payload={props.payload as CustomTooltipProps["payload"]}
-											total={total}
-										/>
-									)}
-									wrapperStyle={{ zIndex: 1000 }}
-								/>
-							</PieChart>
-						</ResponsiveContainer>
+					<div
+						className="relative flex items-center justify-center"
+						role="img"
+						aria-label={chartSummary}
+					>
+						<div aria-hidden="true" className="w-full">
+							<ResponsiveContainer width="100%" height={300}>
+								<PieChart>
+									<Pie
+										data={data}
+										cx="50%"
+										cy="50%"
+										innerRadius={70}
+										outerRadius={110}
+										paddingAngle={2}
+										dataKey="value"
+										rootTabIndex={-1}
+									>
+										{data.map((entry, index) => (
+											<Cell key={`cell-${index}`} fill={entry.color} />
+										))}
+									</Pie>
+									<Tooltip
+										content={(props) => (
+											<CustomTooltip
+												active={props.active}
+												payload={props.payload as CustomTooltipProps["payload"]}
+												total={total}
+											/>
+										)}
+										wrapperStyle={{ zIndex: 1000 }}
+									/>
+								</PieChart>
+							</ResponsiveContainer>
+						</div>
 						{/* Center text */}
 						<div className="absolute inset-0 flex items-center justify-center pointer-events-none">
 							<div className="text-center">

package/dist/force-app/main/default/uiBundles/propertymanagementapp/src/components/properties/PropertyCard.tsx

@@ -32,8 +32,17 @@ export const PropertyCard: React.FC<PropertyCardProps> = ({ property, onClick })
 
 	return (
 		<div
-			className="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow cursor-pointer"
+			role="button"
+			tabIndex={0}
+			aria-label={name}
+			className="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-purple focus-visible:ring-offset-2"
 			onClick={handleClick}
+			onKeyDown={(e) => {
+				if (e.key === "Enter" || e.key === " ") {
+					e.preventDefault();
+					handleClick();
+				}
+			}}
 		>
 			<div className="relative h-48 bg-gray-200">
 				{heroImage && !imageError ? (

package/dist/force-app/main/default/uiBundles/propertymanagementapp/src/components/ui/button.tsx

@@ -17,7 +17,7 @@ const buttonVariants = cva(
         ghost:
           'hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground',
         destructive:
-          'bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30',
+          'bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-red-700 dark:text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30',
         link: 'text-primary underline-offset-4 hover:underline',
       },
       size: {

package/dist/force-app/main/default/uiBundles/propertymanagementapp/src/components/ui/datePicker.tsx

@@ -38,7 +38,7 @@ function DatePickerTrigger({
         data-slot="date-picker-trigger"
         data-empty={!date}
         className={cn(
-          'w-[280px] justify-start text-left font-normal data-[empty=true]:text-muted-foreground',
+          'w-[280px] justify-start text-left font-normal data-[empty=true]:text-gray-600',
           className
         )}
         {...props}
@@ -87,7 +87,7 @@ function DatePickerRangeTrigger({
         data-slot="date-picker-range-trigger"
         data-empty={!hasDate}
         className={cn(
-          'justify-start text-left font-normal data-[empty=true]:text-muted-foreground',
+          'justify-start text-left font-normal data-[empty=true]:text-gray-600',
           className
         )}
         {...props}

package/dist/force-app/main/default/uiBundles/propertymanagementapp/src/components/ui/table.tsx

@@ -2,11 +2,18 @@ import * as React from 'react';
 
 import { cn } from '../../lib/utils';
 
-function Table({ className, ...props }: React.ComponentProps<'table'>) {
+function Table({
+  className,
+  'aria-label': ariaLabel = 'Table',
+  ...props
+}: React.ComponentProps<'table'>) {
   return (
     <div
       data-slot="table-container"
-      className="relative w-full overflow-x-auto"
+      role="region"
+      aria-label={ariaLabel}
+      tabIndex={0}
+      className="relative w-full overflow-x-auto focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-purple"
     >
       <table
         data-slot="table"

package/dist/force-app/main/default/uiBundles/propertymanagementapp/src/features/object-search/components/filters/DateFilter.tsx

@@ -83,7 +83,7 @@ export function DateFilter({
 		<FilterFieldWrapper label={label} helpText={helpText} className={className} {...props}>
 			<div className="flex gap-2">
 				<Select value={operator} onValueChange={(v) => handleOperatorChange(v as DateOperator)}>
-					<SelectTrigger className="w-full flex-1">
+					<SelectTrigger className="w-full flex-1" aria-label={label}>
 						<SelectValue />
 					</SelectTrigger>
 					<SelectContent>

package/dist/force-app/main/default/uiBundles/propertymanagementapp/src/features/object-search/components/filters/FilterFieldWrapper.tsx

@@ -4,6 +4,8 @@ import { cn } from "../../../../lib/utils";
 interface FilterFieldWrapperProps extends React.ComponentProps<"div"> {
 	label: string;
 	htmlFor?: string;
+	/** id applied to the visible label so a non-native control can reference it via aria-labelledby */
+	labelId?: string;
 	helpText?: string;
 	error?: string;
 }
@@ -11,6 +13,7 @@ interface FilterFieldWrapperProps extends React.ComponentProps<"div"> {
 export function FilterFieldWrapper({
 	label,
 	htmlFor,
+	labelId,
 	helpText,
 	error,
 	className,
@@ -19,7 +22,9 @@ export function FilterFieldWrapper({
 }: FilterFieldWrapperProps) {
 	return (
 		<div className={cn("space-y-1", className)} {...props}>
-			<Label htmlFor={htmlFor}>{label}</Label>
+			<Label id={labelId} htmlFor={htmlFor}>
+				{label}
+			</Label>
 			{children}
 			<div className="min-h-4">
 				{error ? (

package/dist/force-app/main/default/uiBundles/propertymanagementapp/src/features/object-search/components/filters/MultiSelectFilter.tsx

@@ -28,6 +28,7 @@ export function MultiSelectFilter({
 }: MultiSelectFilterProps) {
 	const { value, onChange } = useFilterField(field);
 	const selected = value?.value ? value.value.split(",") : [];
+	const labelId = `filter-${field}-label`;
 
 	const triggerLabel =
 		selected.length === 0
@@ -54,12 +55,19 @@ export function MultiSelectFilter({
 	}
 
 	return (
-		<FilterFieldWrapper label={label} helpText={helpText} className={className} {...props}>
+		<FilterFieldWrapper
+			label={label}
+			labelId={labelId}
+			helpText={helpText}
+			className={className}
+			{...props}
+		>
 			<Popover>
 				<PopoverTrigger asChild>
 					<Button
 						variant="outline"
 						role="combobox"
+						aria-labelledby={labelId}
 						className={cn(
 							"w-full justify-between font-normal",
 							selected.length === 0 && "text-muted-foreground",

package/dist/force-app/main/default/uiBundles/propertymanagementapp/src/pages/ApplicationSearch.tsx

@@ -142,7 +142,7 @@ export default function ApplicationSearch() {
 					resetAll={resetAll}
 				/>
 				<div className="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
-					<Table>
+					<Table aria-label="Applications">
 						<ApplicationSearchTableHeader />
 						<TableBody>
 							{loading && <ApplicationSearchSkeleton pageSize={pagination.pageSize} />}
@@ -282,8 +282,17 @@ function ApplicationSearchTable({
 				return (
 					<TableRow
 						key={application.Id}
+						role="button"
+						tabIndex={0}
+						aria-label={applicationName}
 						onClick={() => setSelectedApplication(application)}
-						className="hover:bg-gray-50 transition-colors cursor-pointer"
+						onKeyDown={(e) => {
+							if (e.key === "Enter" || e.key === " ") {
+								e.preventDefault();
+								setSelectedApplication(application);
+							}
+						}}
+						className="hover:bg-gray-50 transition-colors cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-purple focus-visible:ring-inset"
 					>
 						<TableCell className="px-6 py-4">
 							<div className="text-sm font-medium text-gray-900">{applicationName}</div>

package/dist/force-app/main/default/uiBundles/propertymanagementapp/src/pages/MaintenanceRequestSearch.tsx

@@ -162,7 +162,7 @@ export default function MaintenanceRequestSearch() {
 				/>
 
 				<div className="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
-					<Table>
+					<Table aria-label="Maintenance requests">
 						<MaintenanceRequestSearchTableHeader />
 						<TableBody>
 							{loading && <MaintenanceRequestSearchSkeleton pageSize={pagination.pageSize} />}
@@ -328,8 +328,17 @@ function MaintenanceRequestSearchTable({
 				return (
 					<TableRow
 						key={request.Id}
+						role="button"
+						tabIndex={0}
+						aria-label={requestName}
 						onClick={() => setSelectedRequest(request)}
-						className="hover:bg-gray-50 transition-colors cursor-pointer"
+						onKeyDown={(e) => {
+							if (e.key === "Enter" || e.key === " ") {
+								e.preventDefault();
+								setSelectedRequest(request);
+							}
+						}}
+						className="hover:bg-gray-50 transition-colors cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-purple focus-visible:ring-inset"
 					>
 						<TableCell className="max-w-xs px-6 py-5">
 							<div className="flex items-center gap-4">

package/dist/force-app/main/default/uiBundles/propertymanagementapp/src/pages/MaintenanceWorkerSearch.tsx

@@ -109,7 +109,7 @@ export default function MaintenanceWorkerSearch() {
 				/>
 
 				<div className="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
-					<Table>
+					<Table aria-label="Maintenance workers">
 						<MaintenanceWorkerSearchTableHeader />
 						<TableBody>
 							{loading && <MaintenanceWorkerSearchSkeleton pageSize={pagination.pageSize} />}
@@ -265,8 +265,17 @@ function MaintenanceWorkerSearchTable({
 				return (
 					<TableRow
 						key={worker.Id}
+						role="button"
+						tabIndex={0}
+						aria-label={name}
 						onClick={() => setSelectedWorker(worker)}
-						className="hover:bg-gray-50 transition-colors cursor-pointer"
+						onKeyDown={(e) => {
+							if (e.key === "Enter" || e.key === " ") {
+								e.preventDefault();
+								setSelectedWorker(worker);
+							}
+						}}
+						className="hover:bg-gray-50 transition-colors cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-purple focus-visible:ring-inset"
 					>
 						<TableCell className="px-6 py-4 font-medium text-gray-900">{name}</TableCell>
 						<TableCell className="px-6 py-4 text-gray-600">

package/dist/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@salesforce/webapp-template-base-sfdx-project-experimental",
-  "version": "11.7.0",
+  "version": "11.8.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@salesforce/webapp-template-base-sfdx-project-experimental",
-      "version": "11.7.0",
+      "version": "11.8.1",
       "license": "SEE LICENSE IN LICENSE.txt",
       "devDependencies": {
         "@lwc/eslint-plugin-lwc": "^3.3.0",

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforce/ui-bundle-template-base-sfdx-project",
-  "version": "11.7.0",
+  "version": "11.8.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-b2e",
-  "version": "11.7.0",
+  "version": "11.8.1",
   "description": "Salesforce sample property rental React app",
   "license": "SEE LICENSE IN LICENSE.txt",
   "author": "",
@@ -16,7 +16,7 @@
     "clean": "rm -rf dist"
   },
   "dependencies": {
-    "@salesforce/ui-bundle": "^11.7.0",
+    "@salesforce/ui-bundle": "^11.8.1",
     "sonner": "^1.7.0"
   },
   "devDependencies": {