donobu 5.52.2 → 5.52.3

package/dist/esm/managers/PageInspector.js

@@ -933,24 +933,22 @@ class PageInspector {
         if (document.scrollingElement) {
             maybeAddScrollable(document.scrollingElement);
         }
-        // 2) Iterate and assign numbers
-        uniqueElements.forEach((element) => {
-            if (element === document.scrollingElement) {
-                // Special-case: always keep the root scrolling element
-                element.setAttribute(interactableAttribute, offset.toString());
-                offset++;
-                return; // skip the usual checks
-            }
-            else if (element.hasAttribute(interactableAttribute)) {
-                // Skip if this element already carries a value (e.g. assigned via <label>)
-                return;
+        /**
+         * Run the visibility / enabled / top-most checks on a single element and,
+         * if they pass, assign it the next interactable number. Returns `true` if
+         * the element (or, via the <label htmlFor> mapping, its associated control)
+         * was attributed.
+         */
+        function tryAttributeElement(element) {
+            if (element.hasAttribute(interactableAttribute)) {
+                return false;
             }
             const rect = element.getBoundingClientRect();
             const style = window.getComputedStyle(element);
             const visible = isElementVisible(rect, style) && isElementMoreThanHalfInViewport(rect);
             const enabled = isElementEnabled(element, style);
             if (!visible || !enabled) {
-                return;
+                return false;
             }
             // Check a few probe points to make sure the element is top-most
             for (const pt of getPointsToCheck(rect)) {
@@ -959,9 +957,9 @@ class PageInspector {
                     if (elToCheck === element) {
                         element.setAttribute(interactableAttribute, offset.toString());
                         offset++;
-                        return; // this element done
+                        return true; // this element done
                     }
-                    // Handle <label> -> control mapping
+                    // Handle <label> -> control mapping (explicit `for`/`htmlFor`)
                     if (elToCheck.tagName.toLowerCase() === 'label' &&
                         elToCheck.htmlFor) {
                         const forId = elToCheck.htmlFor;
@@ -972,11 +970,41 @@ class PageInspector {
                             control.setAttribute(interactableAttribute, offset.toString());
                             offset++;
                         }
-                        return;
+                        return true;
                     }
                     elToCheck = elToCheck.parentElement;
                 }
             }
+            return false;
+        }
+        // 2) Iterate and assign numbers
+        uniqueElements.forEach((element) => {
+            if (element === document.scrollingElement) {
+                // Special-case: always keep the root scrolling element
+                element.setAttribute(interactableAttribute, offset.toString());
+                offset++;
+                return; // skip the usual checks
+            }
+            else if (element.hasAttribute(interactableAttribute)) {
+                // Skip if this element already carries a value (e.g. assigned via <label>)
+                return;
+            }
+            if (tryAttributeElement(element)) {
+                return;
+            }
+            // Fallback: the element is a visually-hidden native control (e.g. a 0x0,
+            // opacity-0, pointer-events:none <input>) wrapped in a styled <label>.
+            // This is the standard pattern for Ant Design Segmented/Radio/Checkbox/
+            // Switch and many other component libraries: the native input is hidden
+            // and the surrounding <label> is the real clickable surface. Since the
+            // hidden control fails the visibility/enabled checks above, attribute the
+            // wrapping <label> instead so the toggle is still annotated.
+            const wrappingLabel = element.closest('label');
+            if (wrappingLabel &&
+                wrappingLabel !== element &&
+                !wrappingLabel.hasAttribute(interactableAttribute)) {
+                tryAttributeElement(wrappingLabel);
+            }
         });
         return offset;
     }

package/dist/managers/PageInspector.js

@@ -933,24 +933,22 @@ class PageInspector {
         if (document.scrollingElement) {
             maybeAddScrollable(document.scrollingElement);
         }
-        // 2) Iterate and assign numbers
-        uniqueElements.forEach((element) => {
-            if (element === document.scrollingElement) {
-                // Special-case: always keep the root scrolling element
-                element.setAttribute(interactableAttribute, offset.toString());
-                offset++;
-                return; // skip the usual checks
-            }
-            else if (element.hasAttribute(interactableAttribute)) {
-                // Skip if this element already carries a value (e.g. assigned via <label>)
-                return;
+        /**
+         * Run the visibility / enabled / top-most checks on a single element and,
+         * if they pass, assign it the next interactable number. Returns `true` if
+         * the element (or, via the <label htmlFor> mapping, its associated control)
+         * was attributed.
+         */
+        function tryAttributeElement(element) {
+            if (element.hasAttribute(interactableAttribute)) {
+                return false;
             }
             const rect = element.getBoundingClientRect();
             const style = window.getComputedStyle(element);
             const visible = isElementVisible(rect, style) && isElementMoreThanHalfInViewport(rect);
             const enabled = isElementEnabled(element, style);
             if (!visible || !enabled) {
-                return;
+                return false;
             }
             // Check a few probe points to make sure the element is top-most
             for (const pt of getPointsToCheck(rect)) {
@@ -959,9 +957,9 @@ class PageInspector {
                     if (elToCheck === element) {
                         element.setAttribute(interactableAttribute, offset.toString());
                         offset++;
-                        return; // this element done
+                        return true; // this element done
                     }
-                    // Handle <label> -> control mapping
+                    // Handle <label> -> control mapping (explicit `for`/`htmlFor`)
                     if (elToCheck.tagName.toLowerCase() === 'label' &&
                         elToCheck.htmlFor) {
                         const forId = elToCheck.htmlFor;
@@ -972,11 +970,41 @@ class PageInspector {
                             control.setAttribute(interactableAttribute, offset.toString());
                             offset++;
                         }
-                        return;
+                        return true;
                     }
                     elToCheck = elToCheck.parentElement;
                 }
             }
+            return false;
+        }
+        // 2) Iterate and assign numbers
+        uniqueElements.forEach((element) => {
+            if (element === document.scrollingElement) {
+                // Special-case: always keep the root scrolling element
+                element.setAttribute(interactableAttribute, offset.toString());
+                offset++;
+                return; // skip the usual checks
+            }
+            else if (element.hasAttribute(interactableAttribute)) {
+                // Skip if this element already carries a value (e.g. assigned via <label>)
+                return;
+            }
+            if (tryAttributeElement(element)) {
+                return;
+            }
+            // Fallback: the element is a visually-hidden native control (e.g. a 0x0,
+            // opacity-0, pointer-events:none <input>) wrapped in a styled <label>.
+            // This is the standard pattern for Ant Design Segmented/Radio/Checkbox/
+            // Switch and many other component libraries: the native input is hidden
+            // and the surrounding <label> is the real clickable surface. Since the
+            // hidden control fails the visibility/enabled checks above, attribute the
+            // wrapping <label> instead so the toggle is still annotated.
+            const wrappingLabel = element.closest('label');
+            if (wrappingLabel &&
+                wrappingLabel !== element &&
+                !wrappingLabel.hasAttribute(interactableAttribute)) {
+                tryAttributeElement(wrappingLabel);
+            }
         });
         return offset;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "donobu",
-  "version": "5.52.2",
+  "version": "5.52.3",
   "description": "Create browser automations with an LLM agent and replay them as Playwright scripts.",
   "main": "dist/main.js",
   "module": "dist/esm/main.js",