fix: preserve published inspector sources

Author: DjDeveloperr

client/src/app/AppShell.tsx

@@ -1330,6 +1330,7 @@ export function AppShell({
         accessibilityPreferredSource,
         accessibilitySource,
         snapshot.source,
+        availableSources,
         roots.length,
         accessibilityRootsRef.current.length,
       );
@@ -1371,6 +1372,7 @@ export function AppShell({
         accessibilityPreferredSource,
         accessibilitySource,
         "native-ax",
+        accessibilityAvailableSources,
         0,
         accessibilityRootsRef.current.length,
       );

client/src/app/uiState.test.ts

@@ -76,6 +76,7 @@ describe("uiState", () => {
         "auto",
         "flutter",
         "flutter",
+        ["flutter", "native-ax"],
         0,
         3,
       ),
@@ -85,6 +86,7 @@ describe("uiState", () => {
         "flutter",
         "flutter",
         "native-ax",
+        ["flutter", "native-ax"],
         12,
         3,
       ),
@@ -94,6 +96,7 @@ describe("uiState", () => {
         "auto",
         "flutter",
         "flutter",
+        ["flutter", "native-ax"],
         4,
         3,
       ),
@@ -103,6 +106,7 @@ describe("uiState", () => {
         "native-ax",
         "native-ax",
         "flutter",
+        ["flutter", "native-ax"],
         4,
         3,
       ),
@@ -112,6 +116,7 @@ describe("uiState", () => {
         "flutter",
         "native-ax",
         "native-ax",
+        ["native-ax"],
         4,
         3,
       ),
@@ -124,6 +129,7 @@ describe("uiState", () => {
         "auto",
         "nativescript",
         "nativescript",
+        ["nativescript", "native-ax"],
         0,
         3,
       ),
@@ -133,6 +139,7 @@ describe("uiState", () => {
         "nativescript",
         "nativescript",
         "native-ax",
+        ["nativescript", "native-ax"],
         12,
         3,
       ),
@@ -142,6 +149,20 @@ describe("uiState", () => {
         "auto",
         "nativescript",
         "nativescript",
+        ["nativescript", "native-ax"],
+        4,
+        3,
+      ),
+    ).toBe(false);
+  });
+
+  it("does not retain a rich tree after that source disappears", () => {
+    expect(
+      shouldRetainAccessibilityTreeDuringRefresh(
+        "react-native",
+        "react-native",
+        "nativescript",
+        ["nativescript", "native-ax"],
         4,
         3,
       ),

client/src/app/uiState.ts

@@ -165,6 +165,7 @@ export function shouldRetainAccessibilityTreeDuringRefresh(
   currentPreference: AccessibilitySourcePreference,
   currentSource: AccessibilitySource | "",
   snapshotSource: AccessibilitySource,
+  availableSources: AccessibilitySource[],
   nextRootCount: number,
   currentRootCount: number,
 ): boolean {
@@ -179,6 +180,9 @@ export function shouldRetainAccessibilityTreeDuringRefresh(
   ) {
     return false;
   }
+  if (!availableSources.includes(retainedSource)) {
+    return false;
+  }
   if (currentSource !== retainedSource) {
     return false;
   }

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

@@ -55,4 +55,52 @@ describe("AccessibilityOverlay", () => {
     expect(markup).toContain('aria-label="SimDeck accessibility element');
     expect(markup).not.toContain(" title=");
   });
+
+  it("marks overlay nodes as app representations without bare disabled wording", () => {
+    const markup = renderToStaticMarkup(
+      createElement(AccessibilityOverlay, {
+        hoveredId: null,
+        roots: [
+          {
+            frame: { height: 844, width: 390, x: 0, y: 0 },
+            role: "application",
+            children: [
+              {
+                AXLabel: "Upgrade",
+                enabled: false,
+                frame: { height: 48, width: 180, x: 105, y: 720 },
+                nativeScript: {
+                  testID: "upgrade-button",
+                  type: "Button",
+                },
+                source: "nativescript",
+                sourceLocation: {
+                  file: "/Users/dj/Developer/app/src/app.component.ts",
+                  line: 12,
+                  column: 8,
+                },
+                type: "Button",
+              },
+            ],
+          },
+        ],
+        selectedId: "",
+      }),
+    );
+
+    expect(markup).toContain(
+      'data-simdeck-overlay-node="accessibility-representation"',
+    );
+    expect(markup).toContain(
+      "SimDeck overlay node representing a simulator app element",
+    );
+    expect(markup).toContain('data-test-id="upgrade-button"');
+    expect(markup).toContain(
+      'data-simdeck-accessibility-source-location="/Users/dj/Developer/app/src/app.component.ts:12:8"',
+    );
+    expect(markup).toContain("simulator accessibility state enabled=false");
+    expect(markup).not.toContain(">disabled<");
+    expect(markup).not.toContain("; disabled");
+    expect(markup).not.toContain(" title=");
+  });
 });

client/src/features/accessibility/AccessibilityOverlay.tsx

@@ -146,30 +146,42 @@ function AccessibilityDomNode({
   const kind = accessibilityKind(node);
   const role = accessibilityDomRole(kind);
   const tagName = accessibilityDomTagName(node);
+  const description = accessibilityDomDescription(node, metadata);
 
   return createElement(tagName, {
     "aria-checked":
       role === "checkbox" || role === "switch"
         ? (node.checked ?? undefined)
         : undefined,
     "aria-label": label,
+    "aria-description": description,
     "aria-level": depth + 1,
     "aria-selected": node.selected ?? undefined,
     className: "accessibility-dom-node",
+    "data-test-id": metadata.testId,
     "data-testid": `simdeck-accessibility-${id}`,
     "data-simdeck-accessibility-id": id,
     "data-simdeck-accessibility-component": kind,
+    "data-simdeck-accessibility-description": description,
     "data-simdeck-accessibility-identifier":
       accessibilityIdentifier(node) || undefined,
     "data-simdeck-accessibility-kind": kind,
     "data-simdeck-accessibility-label": primaryAccessibilityText(node),
     "data-simdeck-accessibility-image": metadata.imageName,
+    "data-simdeck-accessibility-source-location": metadata.sourceLocation,
     "data-simdeck-accessibility-source-file": metadata.sourceFile,
     "data-simdeck-accessibility-source-line": metadata.sourceLine,
     "data-simdeck-accessibility-source-column": metadata.sourceColumn,
     "data-simdeck-accessibility-source": node.source || undefined,
+    "data-simdeck-accessibility-test-id": metadata.testId,
+    "data-simdeck-accessibility-native-id": metadata.nativeId,
+    "data-simdeck-accessibility-role": role,
     "data-simdeck-accessibility-state": metadata.state,
     "data-simdeck-accessibility-value": metadata.value,
+    "data-simdeck-framework": metadata.framework,
+    "data-simdeck-framework-id": metadata.frameworkId,
+    "data-simdeck-framework-type": metadata.frameworkType,
+    "data-simdeck-overlay-node": "accessibility-representation",
     "data-simdeck-inspector-id": node.inspectorId || undefined,
     "data-simdeck-uikit-id": node.uikitId || undefined,
     role,
@@ -222,6 +234,23 @@ function accessibilityDomLabel(node: AccessibilityNode): string {
   return parts.join("; ");
 }
 
+function accessibilityDomDescription(
+  node: AccessibilityNode,
+  metadata: ReturnType<typeof accessibilityDomMetadata>,
+): string | undefined {
+  const parts = [
+    "SimDeck overlay node representing a simulator app element, not the browser page control",
+    metadata.framework ? `framework ${metadata.framework}` : "",
+    metadata.frameworkType ? `component ${metadata.frameworkType}` : "",
+    metadata.testId ? `test id ${metadata.testId}` : "",
+    metadata.nativeId ? `native id ${metadata.nativeId}` : "",
+    metadata.sourceLocation ? `source ${metadata.sourceLocation}` : "",
+    metadata.state ? `state ${metadata.state}` : "",
+    node.help ? `hint ${node.help}` : "",
+  ].filter(Boolean);
+  return parts.length > 0 ? parts.join("; ") : undefined;
+}
+
 function accessibilityDomRole(kind: string): AriaRole {
   const normalized = kind.toLowerCase();
   if (normalized.includes("button")) {
@@ -275,8 +304,13 @@ function cleanTagPart(value: string | null | undefined): string | null {
 
 function accessibilityDomMetadata(node: AccessibilityNode, id?: string) {
   const sourceLocation = primarySourceLocation(node);
+  const framework = frameworkMetadata(node);
   return {
+    framework: framework.framework,
+    frameworkId: framework.id,
+    frameworkType: framework.type,
     imageName: cleanAccessibilityText(node.imageName),
+    nativeId: framework.nativeId,
     placeholder: cleanAccessibilityText(node.placeholder),
     sourceFile: sourceLocation.file || undefined,
     sourceColumn:
@@ -289,10 +323,60 @@ function accessibilityDomMetadata(node: AccessibilityNode, id?: string) {
         : undefined,
     sourceLocation: formatSourceLocation(sourceLocation),
     state: accessibilityStateSummary(node, id),
+    testId: framework.testId,
     value: cleanAccessibilityText(node.AXValue),
   };
 }
 
+function frameworkMetadata(node: AccessibilityNode): {
+  framework: string | undefined;
+  id: string | undefined;
+  nativeId: string | undefined;
+  testId: string | undefined;
+  type: string | undefined;
+} {
+  const nativeScript = node.nativeScript ?? {};
+  const reactNative = node.reactNative ?? {};
+  const flutter = node.flutter ?? {};
+  const semantics = node.semantics ?? {};
+  return {
+    framework: node.source || undefined,
+    id:
+      stringRecordValue(nativeScript, "id") ??
+      stringRecordValue(reactNative, "tag") ??
+      stringRecordValue(flutter, "key") ??
+      undefined,
+    nativeId:
+      stringRecordValue(reactNative, "nativeID") ??
+      stringRecordValue(nativeScript, "id") ??
+      stringRecordValue(semantics, "identifier") ??
+      undefined,
+    testId:
+      stringRecordValue(nativeScript, "testID") ??
+      stringRecordValue(reactNative, "testID") ??
+      undefined,
+    type:
+      stringRecordValue(nativeScript, "type") ??
+      stringRecordValue(reactNative, "displayName") ??
+      stringRecordValue(flutter, "widgetType") ??
+      undefined,
+  };
+}
+
+function stringRecordValue(
+  record: Record<string, unknown>,
+  key: string,
+): string | undefined {
+  const value = record[key];
+  if (typeof value === "string") {
+    return value.trim() || undefined;
+  }
+  if (typeof value === "number" || typeof value === "boolean") {
+    return String(value);
+  }
+  return undefined;
+}
+
 function primarySourceLocation(node: AccessibilityNode): {
   column: number | null;
   file: string;
@@ -342,13 +426,17 @@ function accessibilityStateSummary(
 ): string {
   const state = [
     id ? `tree id ${id}` : "",
-    node.enabled === false ? "disabled" : "",
-    node.focused === true ? "focused" : "",
-    node.selected === true ? "selected" : "",
-    node.checked === true ? "checked" : "",
-    node.checked === false ? "unchecked" : "",
-    node.clickable === true ? "clickable" : "",
-    node.scrollable === true ? "scrollable" : "",
+    node.enabled === false ? "simulator accessibility state enabled=false" : "",
+    node.focused === true ? "simulator accessibility state focused=true" : "",
+    node.selected === true ? "simulator accessibility state selected=true" : "",
+    node.checked === true ? "simulator accessibility state checked=true" : "",
+    node.checked === false ? "simulator accessibility state checked=false" : "",
+    node.clickable === true
+      ? "simulator accessibility action clickable=true"
+      : "",
+    node.scrollable === true
+      ? "simulator accessibility action scrollable=true"
+      : "",
   ].filter(Boolean);
   return state.join(", ");
 }