diff --git a/src/ui/layout/Breadcrumbs.test.tsx b/src/ui/layout/Breadcrumbs.test.tsx
new file mode 100644
index 00000000..8cf2d0ad
--- /dev/null
+++ b/src/ui/layout/Breadcrumbs.test.tsx
@@ -0,0 +1,68 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { Breadcrumbs } from "./Breadcrumbs.js";
+
+vi.mock("@/i18n/provider.js", () => ({
+ useTranslation: () => ({ t: (k: string) => k }),
+}));
+
+// Suppress SCSS import errors in jsdom
+vi.mock("./Breadcrumbs.scss", () => ({}));
+
+describe("Breadcrumbs", () => {
+ it("renders the nav with data-testid breadcrumbs", () => {
+ render();
+ expect(screen.getByTestId("breadcrumbs")).toBeTruthy();
+ });
+
+ it("last crumb rendered as has aria-current='page'", () => {
+ render();
+ const span = screen.getByText("Flights");
+ expect(span.tagName.toLowerCase()).toBe("span");
+ expect(span.getAttribute("aria-current")).toBe("page");
+ });
+
+ it("last crumb rendered as (with url) has aria-current='page'", () => {
+ render(
+ ,
+ );
+ const link = screen.getByText("Results");
+ expect(link.tagName.toLowerCase()).toBe("a");
+ expect(link.getAttribute("aria-current")).toBe("page");
+ });
+
+ it("non-last crumb rendered as does NOT have aria-current", () => {
+ render(
+ ,
+ );
+ const link = screen.getByText("Online Board");
+ expect(link.tagName.toLowerCase()).toBe("a");
+ expect(link.getAttribute("aria-current")).toBeNull();
+ });
+
+ it("non-last crumb rendered as does NOT have aria-current", () => {
+ // The home crumb (index 0) has url so it won't be a span, but we can
+ // check an intermediate span by using items without url at non-last position
+ render(
+ ,
+ );
+ const intermediate = screen.getByText("Intermediate");
+ expect(intermediate.getAttribute("aria-current")).toBeNull();
+ });
+});
diff --git a/src/ui/layout/Breadcrumbs.tsx b/src/ui/layout/Breadcrumbs.tsx
index f9e3ec96..3e8eb8d6 100644
--- a/src/ui/layout/Breadcrumbs.tsx
+++ b/src/ui/layout/Breadcrumbs.tsx
@@ -46,7 +46,13 @@ export const Breadcrumbs: FC = ({ items = [] }) => {
className={`breadcrumbs__item${isLast ? " breadcrumbs__item--active" : ""}`}
>
{showAsLink ? (
- {item.label}
+
+ {item.label}
+
) : (