fix(a11y): label flags with country names

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%",

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}"`);
+  });
+});