From a931ec03a7b97a69236e15f030d6b99d0d16566a Mon Sep 17 00:00:00 2001
From: Jannik Agethen <derprofi1313@users.noreply.github.com>
Date: Fri, 31 Jul 2026 09:07:33 +0200
Subject: [PATCH] fix(a11y): label flags with country names

---
 components/PlayerCard.tsx             |  3 ++-
 tests/playerCardAccessibility.test.ts | 20 ++++++++++++++++++++
 2 files changed, 22 insertions(+), 1 deletion(-)
 create mode 100644 tests/playerCardAccessibility.test.ts

diff --git a/components/PlayerCard.tsx b/components/PlayerCard.tsx
index 114930d..3289fc5 100644
--- a/components/PlayerCard.tsx
+++ b/components/PlayerCard.tsx
@@ -2,6 +2,7 @@
 
 import { memo, type CSSProperties } from "react";
 import type { Card, StatKey } from "@/lib/scoring/types";
+import { countryName } from "@/lib/countries";
 import { languageLogoUrl } from "@/lib/github/languages";
 import { cardDisplayName } from "@/lib/text";
 import { resolveCardTheme } from "./finishTheme";
@@ -227,7 +228,7 @@ function PlayerCard({ card }: { card: Card }) {
         <img
           src={`/badges/flags/${card.country}.png`}
           onError={hideOnError}
-          alt={card.country}
+          alt={countryName(card.country) ?? card.country}
           style={{
             ...at(17.59, 33.17),
             width: "14.81%",
diff --git a/tests/playerCardAccessibility.test.ts b/tests/playerCardAccessibility.test.ts
new file mode 100644
index 0000000..fc17658
--- /dev/null
+++ b/tests/playerCardAccessibility.test.ts
@@ -0,0 +1,20 @@
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it } from "vitest";
+import PlayerCard from "@/components/PlayerCard";
+import { SAMPLE_CARDS } from "@/lib/github/samples";
+
+describe("PlayerCard accessibility", () => {
+  it.each([
+    ["us", "United States"],
+    ["sct", "Scotland"],
+  ])("labels the %s flag with its country name", (country, expectedName) => {
+    const html = renderToStaticMarkup(
+      createElement(PlayerCard, {
+        card: { ...SAMPLE_CARDS[0], country },
+      }),
+    );
+
+    expect(html).toContain(`alt="${expectedName}"`);
+  });
+});