[UI v2] fix: Fixes acecssibility for breadcrumb lists

PrefectHQ · Jan 8, 2025 · 7b4092b · 7b4092b
1 parent fbffa5c
commit 7b4092b
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 28 deletions.
diff --git a/ui-v2/src/components/automations/automations-create-header/automations-create-header.tsx b/ui-v2/src/components/automations/automations-create-header/automations-create-header.tsx
@@ -19,9 +19,11 @@ const NavHeader = () => (
 	<div className="flex items-center gap-2">
 		<Breadcrumb>
 			<BreadcrumbList>
-				<BreadcrumbLink to="/automations" className="text-xl font-semibold">
-					Automations
-				</BreadcrumbLink>
+				<BreadcrumbItem>
+					<BreadcrumbLink to="/automations" className="text-xl font-semibold">
+						Automations
+					</BreadcrumbLink>
+				</BreadcrumbItem>
 				<BreadcrumbSeparator />
 				<BreadcrumbItem className="text-xl font-semibold">
 					<BreadcrumbPage>Create</BreadcrumbPage>

diff --git a/ui-v2/src/components/automations/automations-header/automations-header.tsx b/ui-v2/src/components/automations/automations-header/automations-header.tsx
@@ -1,5 +1,6 @@
 import {
 	Breadcrumb,
+	BreadcrumbItem,
 	BreadcrumbLink,
 	BreadcrumbList,
 } from "@/components/ui/breadcrumb";
@@ -21,12 +22,14 @@ const Header = () => (
 	<div className="flex items-center gap-2">
 		<Breadcrumb>
 			<BreadcrumbList>
-				<BreadcrumbLink
-					to="/concurrency-limits"
-					className="text-xl font-semibold"
-				>
-					Automations
-				</BreadcrumbLink>
+				<BreadcrumbItem>
+					<BreadcrumbLink
+						to="/concurrency-limits"
+						className="text-xl font-semibold"
+					>
+						Automations
+					</BreadcrumbLink>
+				</BreadcrumbItem>
 			</BreadcrumbList>
 		</Breadcrumb>
 		<Button size="icon" className="h-7 w-7" variant="outline">

diff --git a/.../concurrency/task-run-concurrency-limits/task-run-concurrency-limit-header/nav-header.tsx b/.../concurrency/task-run-concurrency-limits/task-run-concurrency-limit-header/nav-header.tsx
@@ -16,12 +16,14 @@ export const NavHeader = ({ tag }: NavHeaderProps) => {
 		<div className="flex items-center gap-2">
 			<Breadcrumb>
 				<BreadcrumbList>
-					<BreadcrumbLink
-						to="/concurrency-limits"
-						className="text-xl font-semibold"
-					>
-						Concurrency Limits
-					</BreadcrumbLink>
+					<BreadcrumbItem>
+						<BreadcrumbLink
+							to="/concurrency-limits"
+							className="text-xl font-semibold"
+						>
+							Concurrency Limits
+						</BreadcrumbLink>
+					</BreadcrumbItem>
 					<BreadcrumbSeparator />
 					<BreadcrumbItem className="text-xl font-semibold">
 						<BreadcrumbPage>{tag}</BreadcrumbPage>

diff --git a/ui-v2/src/components/ui/run-card/run-card.tsx b/ui-v2/src/components/ui/run-card/run-card.tsx
@@ -1,6 +1,7 @@
 import type { components } from "@/api/prefect";
 import {
 	Breadcrumb,
+	BreadcrumbItem,
 	BreadcrumbLink,
 	BreadcrumbList,
 	BreadcrumbSeparator,
@@ -80,25 +81,31 @@ const ConcurrencyLimitTaskRunBreadcrumb = ({
 		<Breadcrumb>
 			<BreadcrumbList>
 				{flow && (
-					<BreadcrumbLink
-						className="text-lg font-semibold"
-						to="/flows/flow/$id"
-						params={{ id: flow.id }}
-					>
-						{flow.name}
-					</BreadcrumbLink>
+					<BreadcrumbItem>
+						<BreadcrumbLink
+							className="text-lg font-semibold"
+							to="/flows/flow/$id"
+							params={{ id: flow.id }}
+						>
+							{flow.name}
+						</BreadcrumbLink>
+					</BreadcrumbItem>
 				)}
 				{flow && flowRun && <BreadcrumbSeparator />}
 				{flowRun && (
-					<BreadcrumbLink to="/runs/flow-run/$id" params={{ id: flowRun.id }}>
-						{flowRun.name}
-					</BreadcrumbLink>
+					<BreadcrumbItem>
+						<BreadcrumbLink to="/runs/flow-run/$id" params={{ id: flowRun.id }}>
+							{flowRun.name}
+						</BreadcrumbLink>
+					</BreadcrumbItem>
 				)}
 				{flowRun && taskRun && <BreadcrumbSeparator />}
 				{taskRun && (
-					<BreadcrumbLink to="/runs/task-run/$id" params={{ id: taskRun.id }}>
-						{taskRun.name}
-					</BreadcrumbLink>
+					<BreadcrumbItem>
+						<BreadcrumbLink to="/runs/task-run/$id" params={{ id: taskRun.id }}>
+							{taskRun.name}
+						</BreadcrumbLink>
+					</BreadcrumbItem>
 				)}
 			</BreadcrumbList>
 		</Breadcrumb>