Compact React Native hierarchy wrapper rows

Author: DjDeveloperr

client/src/features/accessibility/AccessibilityInspector.tsx

@@ -289,6 +289,7 @@ export function AccessibilityInspector({
               const label = hierarchyNodeLabel(item.node, kind);
               const sourceBadge = sourceLocationBadgeText(item.node);
               const chainBadge = compactedChainBadgeText(item.chain.length);
+              const chainPath = compactedChainPathText(item);
               return (
                 <div
                   className={`hierarchy-node ${item.id === selectedItem?.id ? "selected" : ""}`}
@@ -329,11 +330,19 @@ export function AccessibilityInspector({
                     {chainBadge ? (
                       <span
                         className="hierarchy-node-chain"
-                        title={`${item.chain.length} compacted wrapper nodes`}
+                        title={compactedChainTitle(item)}
                       >
                         {chainBadge}
                       </span>
                     ) : null}
+                    {chainPath ? (
+                      <span
+                        className="hierarchy-node-chain-path"
+                        title={compactedChainTitle(item)}
+                      >
+                        {chainPath}
+                      </span>
+                    ) : null}
                     <span className="hierarchy-node-kind">{kind}</span>
                     {label ? (
                       <span className="hierarchy-node-text">{label}</span>
@@ -604,6 +613,29 @@ function compactedChainBadgeText(count: number): string {
   return count > 0 ? `+${count}` : "";
 }
 
+function compactedChainPathText(
+  item: ReturnType<typeof buildAccessibilityTree>[number],
+): string {
+  if (item.chain.length === 0) {
+    return "";
+  }
+  const names = item.chain.map(accessibilityKind).filter(Boolean);
+  const tail = names.slice(-3);
+  const prefix = names.length > tail.length ? "... / " : "";
+  return `${prefix}${tail.join(" / ")} /`;
+}
+
+function compactedChainTitle(
+  item: ReturnType<typeof buildAccessibilityTree>[number],
+): string {
+  if (item.chain.length === 0) {
+    return "";
+  }
+  return [...item.chain.map(accessibilityKind), accessibilityKind(item.node)]
+    .filter(Boolean)
+    .join(" / ");
+}
+
 function primarySourceLocation(
   node: AccessibilityNode,
 ): AccessibilityNode["sourceLocation"] {

client/src/features/accessibility/accessibilityTree.test.ts

@@ -1,7 +1,120 @@
 import { describe, expect, it } from "vitest";
 
 import type { AccessibilityNode } from "../../api/types";
-import { findAccessibilityItemAtPoint } from "./accessibilityTree";
+import {
+  buildAccessibilityTree,
+  findAccessibilityItemAtPoint,
+} from "./accessibilityTree";
+
+describe("buildAccessibilityTree", () => {
+  it("compacts framed React Native wrapper chains until meaningful children", () => {
+    const roots: AccessibilityNode[] = [
+      {
+        source: "react-native",
+        type: "RCTScrollContentView",
+        title: "RCTScrollContentView",
+        frame: { x: 0, y: 0, width: 400, height: 800 },
+        children: [
+          {
+            source: "react-native",
+            type: "RCTScrollView",
+            title: "RCTScrollView",
+            frame: { x: 0, y: 0, width: 400, height: 800 },
+            children: [
+              {
+                source: "react-native",
+                type: "ScrollViewContext",
+                frame: { x: 0, y: 0, width: 400, height: 800 },
+                children: [
+                  { source: "react-native", type: "Text", title: "Today" },
+                  { source: "react-native", type: "Text", title: "7d" },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+    ];
+
+    const tree = buildAccessibilityTree(roots);
+
+    expect(tree[0].node.type).toBe("ScrollViewContext");
+    expect(tree[0].chain.map((node) => node.type)).toEqual([
+      "RCTScrollContentView",
+      "RCTScrollView",
+    ]);
+    expect(tree[0].children).toHaveLength(2);
+  });
+
+  it("keeps React Native source-location nodes visible", () => {
+    const roots: AccessibilityNode[] = [
+      {
+        source: "react-native",
+        type: "View",
+        children: [
+          {
+            source: "react-native",
+            type: "RangeAndFilterBar",
+            sourceLocation: {
+              file: "/app/src/components/RangeAndFilterBar.tsx",
+            },
+            children: [{ source: "react-native", type: "RCTView" }],
+          },
+        ],
+      },
+    ];
+
+    const tree = buildAccessibilityTree(roots);
+
+    expect(tree[0].node.type).toBe("RangeAndFilterBar");
+    expect(tree[0].chain.map((node) => node.type)).toEqual(["View"]);
+  });
+
+  it("keeps Expo route display names visible", () => {
+    const roots: AccessibilityNode[] = [
+      {
+        source: "react-native",
+        type: "RCTView",
+        children: [
+          {
+            source: "react-native",
+            type: "HomeLayout(./(tabs)/(home)/_layout.tsx)",
+            title: "HomeLayout(./(tabs)/(home)/_layout.tsx)",
+            children: [{ source: "react-native", type: "RCTView" }],
+          },
+        ],
+      },
+    ];
+
+    const tree = buildAccessibilityTree(roots);
+
+    expect(tree[0].node.type).toBe("HomeLayout(./(tabs)/(home)/_layout.tsx)");
+    expect(tree[0].chain.map((node) => node.type)).toEqual(["RCTView"]);
+  });
+
+  it("compacts generated numeric React Native wrapper titles", () => {
+    const roots: AccessibilityNode[] = [
+      {
+        source: "react-native",
+        type: "Wrap",
+        title: "1",
+        children: [
+          {
+            source: "react-native",
+            type: "RCTView",
+            title: "2",
+            children: [{ source: "react-native", type: "Text", title: "7d" }],
+          },
+        ],
+      },
+    ];
+
+    const tree = buildAccessibilityTree(roots);
+
+    expect(tree[0].node.type).toBe("Text");
+    expect(tree[0].chain.map((node) => node.type)).toEqual(["Wrap", "RCTView"]);
+  });
+});
 
 describe("findAccessibilityItemAtPoint", () => {
   it("descends through frameless wrapper nodes", () => {

client/src/features/accessibility/accessibilityTree.ts

@@ -172,7 +172,10 @@ function canCompactReactNativeNode(node: AccessibilityNode): boolean {
   if (node.source !== "react-native" || node.children?.length !== 1) {
     return false;
   }
-  return !validFrame(node.frame) && !hasMeaningfulNodeContent(node);
+  if (primarySourceLocationFile(node) || isRouteDisplayName(node)) {
+    return false;
+  }
+  return !hasMeaningfulNodeContent(node);
 }
 
 function findContainingItem(
@@ -239,10 +242,40 @@ function hasMeaningfulNodeContent(node: AccessibilityNode): boolean {
     node.title,
   ].some((value) => {
     const text = cleanText(value);
+    if (text && isGeneratedReactNativeText(node, text)) {
+      return false;
+    }
     return Boolean(text && !generatedNames.has(text));
   });
 }
 
+function primarySourceLocationFile(node: AccessibilityNode): string {
+  return (
+    cleanText(node.sourceLocation?.file) ??
+    cleanText(node.sourceLocations?.find((location) => location?.file)?.file) ??
+    cleanText(node.sourceFile) ??
+    ""
+  );
+}
+
+function isRouteDisplayName(node: AccessibilityNode): boolean {
+  return /\(\.{1,2}\/.+\.[cm]?[jt]sx?\)$/.test(cleanText(node.type) ?? "");
+}
+
+function isGeneratedReactNativeText(
+  node: AccessibilityNode,
+  text: string,
+): boolean {
+  if (node.source !== "react-native" || node.children?.length !== 1) {
+    return false;
+  }
+  const type = cleanText(node.type);
+  if (type === "Text" || type === "RCTText") {
+    return false;
+  }
+  return /^\d+$/.test(text);
+}
+
 function frameContainsPoint(
   frame: AccessibilityFrame | null | undefined,
   point: { x: number; y: number },

client/src/styles/components.css

@@ -519,6 +519,16 @@
   white-space: nowrap;
 }
 
+.hierarchy-node-chain-path {
+  max-width: 260px;
+  overflow: hidden;
+  color: var(--text-muted);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 10px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .hierarchy-node.selected .hierarchy-node-kind {
   color: color-mix(in srgb, var(--accent-text) 82%, var(--success));
 }