Fix WorldMap hover tooltip/role behavior and mark task done

frontend/src/components/__tests__/WorldMap.test.tsx

@@ -12,7 +12,7 @@ import { FluentProvider, webLightTheme } from "@fluentui/react-components";
 vi.mock("react-simple-maps", () => ({
   ComposableMap: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
   ZoomableGroup: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
-  Geography: ({ children }: { children?: React.ReactNode }) => <g>{children}</g>,
+  Geography: ({ children, ...props }: { children?: React.ReactNode } & Record<string, unknown>) => <g {...props}>{children}</g>,
   useGeographies: () => ({
     geographies: [{ rsmKey: "geo-1", id: 840 }],
     path: { centroid: () => [10, 10] },
@@ -37,7 +37,10 @@ describe("WorldMap", () => {
     // Tooltip should not be present initially
     expect(screen.queryByRole("tooltip")).toBeNull();
 
-    const countryButton = screen.getByRole("button", { name: /US: 42 bans/i });
+    // Country map area is exposed as an accessible button with an accurate label
+    const countryButton = screen.getByRole("button", { name: "US: 42 bans" });
+    expect(countryButton).toBeInTheDocument();
+
     fireEvent.mouseEnter(countryButton, { clientX: 10, clientY: 10 });
 
     const tooltip = screen.getByRole("tooltip");