fix: snapshot -i auto-detects dropdown/popover interactive elements (#844)

- Auto-enable cursor-interactive scan (-C) when -i flag is used
- Add floating container detection (portals, popovers, dropdowns)
  - Detects position:fixed/absolute with high z-index
  - Recognizes data-floating-ui-portal, data-radix-* attributes
  - Recognizes role=listbox, role=menu containers
- Elements inside floating containers bypass the hasRole skip
  - Catches dropdown items missed by the accessibility tree
- Role=option/menuitem elements in floating containers captured
  even without cursor:pointer/onclick
- Tag floating container items with 'popover-child' reason
- Include role name in @c ref reasons when present
- Add dropdown.html test fixture
- Add dropdown/popover detection test suite (6 tests)
- Add test: -i alone includes cursor-interactive elements

Fixes: Bookface autocomplete, Radix UI combobox, React portals,
and similar dynamic dropdown patterns where ariaSnapshot() misses
the floating content.

Co-authored-by: root <root@localhost>

browse/src/snapshot.ts

@@ -233,7 +233,12 @@ export async function handleSnapshot(
     output.push(outputLine);
   }
 
-  // ─── Cursor-interactive scan (-C) ─────────────────────────
+  // ─── Cursor-interactive scan (-C, or auto with -i) ────────
+  // Auto-enable cursor scan when interactive mode is on — agents asking for
+  // interactive elements should always see clickable non-ARIA items too.
+  if (opts.interactive && !opts.cursorInteractive) {
+    opts.cursorInteractive = true;
+  }
   if (opts.cursorInteractive) {
     try {
       const cursorElements = await target.evaluate(() => {
@@ -256,9 +261,37 @@ export async function handleSnapshot(
           const hasTabindex = el.hasAttribute('tabindex') && parseInt(el.getAttribute('tabindex')!, 10) >= 0;
           const hasRole = el.hasAttribute('role');
 
-          if (!hasCursorPointer && !hasOnclick && !hasTabindex) continue;
-          // Skip if it has an ARIA role (likely already captured)
-          if (hasRole) continue;
+          // Check if element is inside a floating container (portal/popover/dropdown)
+          const isInFloating = (() => {
+            let parent: Element | null = el;
+            while (parent && parent !== document.documentElement) {
+              const pStyle = getComputedStyle(parent);
+              const isFloating = (pStyle.position === 'fixed' || pStyle.position === 'absolute') &&
+                parseInt(pStyle.zIndex || '0', 10) >= 10;
+              const hasPortalAttr = parent.hasAttribute('data-floating-ui-portal') ||
+                parent.hasAttribute('data-radix-popper-content-wrapper') ||
+                parent.hasAttribute('data-radix-portal') ||
+                parent.hasAttribute('data-popper-placement') ||
+                parent.getAttribute('role') === 'listbox' ||
+                parent.getAttribute('role') === 'menu';
+              if (isFloating || hasPortalAttr) return true;
+              parent = parent.parentElement;
+            }
+            return false;
+          })();
+
+          if (!hasCursorPointer && !hasOnclick && !hasTabindex) {
+            // For elements inside floating containers, also check for role="option"/"menuitem"
+            if (isInFloating && hasRole) {
+              const role = el.getAttribute('role');
+              if (role !== 'option' && role !== 'menuitem' && role !== 'menuitemcheckbox' && role !== 'menuitemradio') continue;
+            } else {
+              continue;
+            }
+          }
+          // Skip elements with ARIA roles UNLESS they're inside a floating container
+          // (floating container items may be missed by the accessibility tree)
+          if (hasRole && !isInFloating) continue;
 
           // Build deterministic nth-child CSS path
           const parts: string[] = [];
@@ -275,9 +308,11 @@ export async function handleSnapshot(
 
           const text = (el as HTMLElement).innerText?.trim().slice(0, 80) || el.tagName.toLowerCase();
           const reasons: string[] = [];
+          if (isInFloating) reasons.push('popover-child');
           if (hasCursorPointer) reasons.push('cursor:pointer');
           if (hasOnclick) reasons.push('onclick');
           if (hasTabindex) reasons.push(`tabindex=${el.getAttribute('tabindex')}`);
+          if (hasRole) reasons.push(`role=${el.getAttribute('role')}`);
 
           results.push({ selector, text, reason: reasons.join(', ') });
         }