Keep a control clickable when it contains something

Making containers click-through stopped them swallowing clicks aimed at
the leaves inside them, but it treated every parent as scenery. A control
that happens to contain something else is still a control: the cart
button became unclickable the moment it grew a badge, because the badge
and the icon are nodes of their own. An agent driving the app could only
reach it through the child image — the button itself was no longer among
the things a snapshot offers as actionable.

Only tappable roles are exempted. A role-bearing container such as a list
or a navigation bar spans its children by definition and would go
straight back to swallowing their clicks, so those stay click-through. A
control's own children remain clickable and, sitting on top, still win a
hit test aimed at them.

The roles that must not be exempted are asserted alongside the ones that
must, because the failure of adding one is silent: clicks land on the
wrong element rather than failing.

Author: omnarayan

internal/web/static/device.html

@@ -38,6 +38,23 @@
       pointer-events: none;
     }
     #mirror [data-dd-node]:not(:has([data-dd-node])) { pointer-events: auto; }
+    /* A control that happens to contain something else is still a control.
+       Culling every parent made the cart button unclickable the moment it
+       grew a badge — an agent could only reach it through the child image,
+       and the button itself vanished from what a snapshot offers as
+       actionable. Only the roles that represent something a person taps
+       are listed: a role-bearing *container* like a list or a navigation
+       bar spans its children and would go back to swallowing their
+       clicks. A control's own children stay clickable and, being on top,
+       still win a hit test aimed at them. */
+    #mirror [data-dd-node][role="button"],
+    #mirror [data-dd-node][role="link"],
+    #mirror [data-dd-node][role="textbox"],
+    #mirror [data-dd-node][role="searchbox"],
+    #mirror [data-dd-node][role="checkbox"],
+    #mirror [data-dd-node][role="radio"],
+    #mirror [data-dd-node][role="switch"],
+    #mirror [data-dd-node][role="tab"] { pointer-events: auto; }
     /* A div paints nothing by default; an <input> paints a border, an
        opaque background and a caret. Mirrored fields are inputs so that
        fill() works, which made two white boxes float over the video and

internal/web/web_test.go

@@ -190,3 +190,30 @@ func TestMirroredFieldsPaintNothing(t *testing.T) {
 		}
 	}
 }
+
+// Container nodes are click-through so they stop swallowing clicks aimed
+// at the leaves inside them — but a control that happens to contain
+// something else is still a control. Without the exception the cart
+// button became unclickable the moment it grew a badge, and an agent
+// could only reach it through the child image. Only tappable roles are
+// exempt: a list or a navigation bar spans its children and would go
+// straight back to swallowing them.
+func TestControlsStayClickableEvenWithChildren(t *testing.T) {
+	body := get(t, "/device/EB69B42A-4763-4A33-AF0F-CD233F721951").Body.String()
+	if !strings.Contains(body, `:not(:has([data-dd-node])) { pointer-events: auto; }`) {
+		t.Error("leaf nodes are no longer clickable; every click would hit a container")
+	}
+	for _, role := range []string{"button", "link", "textbox", "searchbox"} {
+		want := `[role="` + role + `"]`
+		if !strings.Contains(body, want) {
+			t.Errorf("role %q is not exempted from click-through, so such a control "+
+				"becomes unclickable as soon as it contains anything", role)
+		}
+	}
+	// The roles that must NOT be exempt, because they span their children.
+	for _, role := range []string{"list", "navigation", "listitem"} {
+		if strings.Contains(body, `[role="`+role+`"] { pointer-events: auto`) {
+			t.Errorf("role %q is exempted; it spans its children and will swallow their clicks", role)
+		}
+	}
+}