Give every public route its own description, and keep canonicals and structured data on the host that serves the page.

Decorative images on the marketing pages stay quiet, and every dialog close button is named Close.

Co-authored-by: Cursor <cursoragent@cursor.com>

tests/unit/ContentContainer.test.jsx

@@ -26,6 +26,13 @@ vi.mock("../../lib/assetUtils", () => ({
 }));
 
 // Mock blog post data
+function decorativeIcon() {
+  const icon = document.querySelector("img");
+  expect(icon).toBeTruthy();
+  expect(icon).toHaveAttribute("alt", "");
+  return icon;
+}
+
 const mockPost = {
   slug: "test-article",
   frontmatter: {
@@ -57,7 +64,7 @@ describe("ContentContainer", () => {
   it("displays the icon correctly", () => {
     render(<ContentContainer post={mockPost} />);
 
-    const icon = screen.getByAltText("Icon for Test Article Title");
+    const icon = decorativeIcon();
     expect(icon).toBeInTheDocument();
     expect(icon).toHaveAttribute(
       "src",
@@ -125,9 +132,7 @@ describe("ContentContainer", () => {
   it("has proper spacing between icon and text", () => {
     render(<ContentContainer post={mockPost} />);
 
-    const iconContainer = screen
-      .getByAltText("Icon for Test Article Title")
-      .closest("div");
+    const iconContainer = decorativeIcon().closest("div");
     const textContainer = screen.getByText("Test Article Title").closest("div");
 
     // Check the content container (parent of icon)
@@ -169,7 +174,7 @@ describe("ContentContainer", () => {
   it("uses per-article tag assets for catalog slugs", () => {
     const { rerender } = render(<ContentContainer post={mockPost} />);
 
-    let icon = screen.getByAltText("Icon for Test Article Title");
+    let icon = decorativeIcon();
     expect(icon).toHaveAttribute(
       "src",
       "/content/blog/resolving-active-conflicts-tag.svg",
@@ -178,7 +183,7 @@ describe("ContentContainer", () => {
     const post2 = { ...mockPost, slug: "operational-security-mutual-aid" };
     rerender(<ContentContainer post={post2} />);
 
-    icon = screen.getByAltText("Icon for Test Article Title");
+    icon = decorativeIcon();
     expect(icon).toHaveAttribute(
       "src",
       "/content/blog/operational-security-mutual-aid-tag.svg",
@@ -187,7 +192,7 @@ describe("ContentContainer", () => {
     const post3 = { ...mockPost, slug: "making-decisions-without-hierarchy" };
     rerender(<ContentContainer post={post3} />);
 
-    icon = screen.getByAltText("Icon for Test Article Title");
+    icon = decorativeIcon();
     expect(icon).toHaveAttribute(
       "src",
       "/content/blog/making-decisions-without-hierarchy-tag.svg",
@@ -211,7 +216,7 @@ describe("ContentContainer", () => {
   it("applies correct responsive sizing for xs breakpoint", () => {
     render(<ContentContainer post={mockPost} size="xs" />);
 
-    const icon = screen.getByAltText("Icon for Test Article Title");
+    const icon = decorativeIcon();
     expect(icon).toHaveClass("w-[60px]", "h-[30px]");
 
     const title = screen.getByText("Test Article Title");
@@ -224,7 +229,7 @@ describe("ContentContainer", () => {
   it("applies correct responsive sizing for responsive breakpoint", () => {
     render(<ContentContainer post={mockPost} size="responsive" />);
 
-    const icon = screen.getByAltText("Icon for Test Article Title");
+    const icon = decorativeIcon();
     expect(icon).toHaveClass("w-[60px]", "h-[30px]");
 
     const title = screen.getByText("Test Article Title");
@@ -237,8 +242,8 @@ describe("ContentContainer", () => {
   it("has proper accessibility attributes", () => {
     render(<ContentContainer post={mockPost} />);
 
-    const icon = screen.getByAltText("Icon for Test Article Title");
-    expect(icon).toHaveAttribute("alt", "Icon for Test Article Title");
+    const icon = decorativeIcon();
+    expect(icon).toHaveAttribute("alt", "");
   });
 
   it("handles long titles gracefully", () => {