Fix e2e tests

frontend/src/components/MapView.tsx

@@ -911,7 +911,15 @@ export function MapView({
         <span>{infoLabel}</span>
         <div className="flex flex-wrap items-center gap-x-3 gap-y-1 md:justify-end">
           {!showPackets && (
-            <>
+            // Grouped and labelled like the "Since" filter below it. The colour
+            // dots are aria-hidden, so without this the legend is unlabelled to
+            // assistive tech — and its bucket names collide with the identically
+            // named filter chips for anything selecting by text.
+            <div
+              className="flex flex-wrap items-center gap-x-3 gap-y-1"
+              role="group"
+              aria-label="Marker recency legend"
+            >
               <span className="flex items-center gap-1">
                 <span
                   className="w-3 h-3 rounded-full"
@@ -944,7 +952,7 @@ export function MapView({
                 />{' '}
                 older
               </span>
-            </>
+            </div>
           )}
           {showPackets && (
             <>

tests/e2e/specs/node-map.spec.ts

@@ -7,8 +7,10 @@ test.describe('Node Map page', () => {
     // Verify heading (also appears in sidebar, so scope to main)
     await expect(page.getByRole('main').getByText('Node Map')).toBeVisible({ timeout: 10_000 });
 
-    // Verify legend elements
-    await expect(page.getByText('<1h')).toBeVisible();
-    await expect(page.getByText('<1d')).toBeVisible();
+    // Verify legend elements. Scoped to the legend group: the "Since" filter
+    // chips carry the same bucket names, so an unscoped text match is ambiguous.
+    const legend = page.getByRole('group', { name: 'Marker recency legend' });
+    await expect(legend.getByText('<1h')).toBeVisible();
+    await expect(legend.getByText('<1d')).toBeVisible();
   });
 });