[focusgroup] Use HTML auto-globals in shadow and tentative-root WPTs

Replace document.getElementById('x') with the bare HTML auto-global x in
the focusgroup shadow WPT suite and the remaining loose tests at the
focusgroup/tentative/ root.

Inspired by Mason's comment here:
https://chromium-review.googlesource.com/c/chromium/src/+/7681875/comment/8353cb43_450159ed/

Test only, no behavior change

Bug: 4021071
Change-Id: I6bc0b684b905d71710e2539f48723c968ce88a7a
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7834833
Reviewed-by: Stephanie Zhang <stephanie.zhang@microsoft.com>
Commit-Queue: Jacques Newman <janewman@microsoft.com>
Cr-Commit-Position: refs/heads/main@{#1637305}

Author: janewman

html/interaction/focus/focusgroup/tentative/ax-role-inference-top-layer.html

@@ -31,7 +31,6 @@
 }, 'Sibling outside the popover still infers the implied tab role');
 
 promise_test(async t => {
-  const pop = document.getElementById('pop');
   assert_false(pop.matches(':popover-open'),
     'precondition: popover starts closed');
   pop.showPopover();

html/interaction/focus/focusgroup/tentative/behavior-first-requirement.html

@@ -46,49 +46,37 @@
 <script>
   promise_test(async t => {
     // Valid behavior-first syntax should enable focusgroup navigation
-    var item1 = document.getElementById("item1");
-    var item2 = document.getElementById("item2");
 
     await focusAndSendDirectionalInput(item1, kRight);
     assert_equals(document.activeElement, item2, "Valid 'toolbar' behavior should enable navigation");
   }, "Valid behavior-first token 'toolbar' enables focusgroup navigation");
 
   promise_test(async t => {
-    var item3 = document.getElementById("item3");
-    var item4 = document.getElementById("item4");
 
     await focusAndSendDirectionalInput(item3, kRight);
     assert_equals(document.activeElement, item4, "Valid 'tablist inline' behavior should enable navigation");
   }, "Valid behavior-first token 'tablist' with modifier enables focusgroup navigation");
 
   promise_test(async t => {
-    var item5 = document.getElementById("item5");
-    var item6 = document.getElementById("item6");
 
     await focusAndSendDirectionalInput(item5, kRight);
     assert_equals(document.activeElement, item6, "Valid 'radiogroup wrap' behavior should enable navigation");
   }, "Valid behavior-first token 'radiogroup' with modifier enables focusgroup navigation");
 
   promise_test(async t => {
     // Invalid behavior-first syntax should NOT enable focusgroup navigation
-    var item7 = document.getElementById("item7");
-    var item8 = document.getElementById("item8");
 
     await focusAndSendDirectionalInput(item7, kRight);
     assert_equals(document.activeElement, item7, "Empty focusgroup attribute should not enable navigation");
   }, "Empty focusgroup attribute is rejected and does not enable navigation");
 
   promise_test(async t => {
-    var item9 = document.getElementById("item9");
-    var item10 = document.getElementById("item10");
 
     await focusAndSendDirectionalInput(item9, kRight);
     assert_equals(document.activeElement, item9, "Invalid first token 'inline' should not enable navigation");
   }, "Invalid first token 'inline' is rejected and does not enable navigation");
 
   promise_test(async t => {
-    var item11 = document.getElementById("item11");
-    var item12 = document.getElementById("item12");
 
     await focusAndSendDirectionalInput(item11, kRight);
     assert_equals(document.activeElement, item11, "Invalid first token 'wrap' should not enable navigation");

html/interaction/focus/focusgroup/tentative/home-end-keys.optional.html

@@ -83,128 +83,128 @@
   // --- Basic Home/End in toolbar (inline, no wrap) ---
 
   promise_test(async t => {
-    await focusAndSendHomeInput(document.getElementById('tb2'));
+    await focusAndSendHomeInput(tb2);
     assert_equals(document.activeElement.id, 'tb1');
   }, "Home moves focus to first item in toolbar");
 
   promise_test(async t => {
-    await focusAndSendEndInput(document.getElementById('tb2'));
+    await focusAndSendEndInput(tb2);
     assert_equals(document.activeElement.id, 'tb3');
   }, "End moves focus to last item in toolbar");
 
   promise_test(async t => {
-    await focusAndSendHomeInput(document.getElementById('tb1'));
+    await focusAndSendHomeInput(tb1);
     assert_equals(document.activeElement.id, 'tb1');
   }, "Home on first item stays on first item");
 
   promise_test(async t => {
-    await focusAndSendEndInput(document.getElementById('tb3'));
+    await focusAndSendEndInput(tb3);
     assert_equals(document.activeElement.id, 'tb3');
   }, "End on last item stays on last item");
 
   // --- Home/End in wrapping tablist ---
 
   promise_test(async t => {
-    await focusAndSendHomeInput(document.getElementById('tl3'));
+    await focusAndSendHomeInput(tl3);
     assert_equals(document.activeElement.id, 'tl1');
   }, "Home in tablist moves to first item");
 
   promise_test(async t => {
-    await focusAndSendEndInput(document.getElementById('tl1'));
+    await focusAndSendEndInput(tl1);
     assert_equals(document.activeElement.id, 'tl3');
   }, "End in tablist moves to last item");
 
   // --- Home/End in block-only menu ---
 
   promise_test(async t => {
-    await focusAndSendHomeInput(document.getElementById('m3'));
+    await focusAndSendHomeInput(m3);
     assert_equals(document.activeElement.id, 'm1');
   }, "Home in block-only menu moves to first item");
 
   promise_test(async t => {
-    await focusAndSendEndInput(document.getElementById('m1'));
+    await focusAndSendEndInput(m1);
     assert_equals(document.activeElement.id, 'm3');
   }, "End in block-only menu moves to last item");
 
   // --- Home/End in nested focusgroups ---
 
   promise_test(async t => {
-    await focusAndSendHomeInput(document.getElementById('i3'));
+    await focusAndSendHomeInput(i3);
     assert_equals(document.activeElement.id, 'i1');
   }, "Home in nested focusgroup moves to first item of inner group");
 
   promise_test(async t => {
-    await focusAndSendEndInput(document.getElementById('i1'));
+    await focusAndSendEndInput(i1);
     assert_equals(document.activeElement.id, 'i3');
   }, "End in nested focusgroup moves to last item of inner group");
 
   // --- Home/End ignores focusgroupstart ---
 
   promise_test(async t => {
-    await focusAndSendHomeInput(document.getElementById('fs3'));
+    await focusAndSendHomeInput(fs3);
     assert_equals(document.activeElement.id, 'fs1');
   }, "Home goes to first item, not focusgroupstart item");
 
   promise_test(async t => {
-    await focusAndSendEndInput(document.getElementById('fs1'));
+    await focusAndSendEndInput(fs1);
     assert_equals(document.activeElement.id, 'fs3');
   }, "End goes to last item, not focusgroupstart item");
 
   // --- Home/End with opted-out elements ---
 
   promise_test(async t => {
-    await focusAndSendHomeInput(document.getElementById('oo4'));
+    await focusAndSendHomeInput(oo4);
     assert_equals(document.activeElement.id, 'oo1');
   }, "Home skips opted-out elements and reaches first item");
 
   promise_test(async t => {
-    await focusAndSendEndInput(document.getElementById('oo1'));
+    await focusAndSendEndInput(oo1);
     assert_equals(document.activeElement.id, 'oo4');
   }, "End skips opted-out elements and reaches last item");
 
   // --- Home/End blocked inside key conflict elements ---
 
   promise_test(async t => {
-    await focusAndSendHomeInput(document.getElementById('kc2'));
+    await focusAndSendHomeInput(kc2);
     assert_equals(document.activeElement.id, 'kc2');
   }, "Home inside text input does not navigate focusgroup");
 
   promise_test(async t => {
-    await focusAndSendEndInput(document.getElementById('kc2'));
+    await focusAndSendEndInput(kc2);
     assert_equals(document.activeElement.id, 'kc2');
   }, "End inside text input does not navigate focusgroup");
 
   // --- Home/End from a non-key-conflict element works ---
 
   promise_test(async t => {
-    await focusAndSendHomeInput(document.getElementById('kc3'));
+    await focusAndSendHomeInput(kc3);
     assert_equals(document.activeElement.id, 'kc1');
   }, "Home from button navigates past key conflict element to first item");
 
   promise_test(async t => {
-    await focusAndSendEndInput(document.getElementById('kc1'));
+    await focusAndSendEndInput(kc1);
     assert_equals(document.activeElement.id, 'kc3');
   }, "End from button navigates past key conflict element to last item");
 
   // --- Home/End blocked inside other key conflict element types ---
 
   promise_test(async t => {
-    await focusAndSendHomeInput(document.getElementById('hc2'));
+    await focusAndSendHomeInput(hc2);
     assert_equals(document.activeElement.id, 'hc2');
   }, "Home inside select does not navigate focusgroup");
 
   promise_test(async t => {
-    await focusAndSendEndInput(document.getElementById('hc2'));
+    await focusAndSendEndInput(hc2);
     assert_equals(document.activeElement.id, 'hc2');
   }, "End inside select does not navigate focusgroup");
 
   promise_test(async t => {
-    await focusAndSendHomeInput(document.getElementById('hc3'));
+    await focusAndSendHomeInput(hc3);
     assert_equals(document.activeElement.id, 'hc3');
   }, "Home inside textarea does not navigate focusgroup");
 
   promise_test(async t => {
-    await focusAndSendEndInput(document.getElementById('hc3'));
+    await focusAndSendEndInput(hc3);
     assert_equals(document.activeElement.id, 'hc3');
   }, "End inside textarea does not navigate focusgroup");
 </script>

html/interaction/focus/focusgroup/tentative/shadow/shadow-items-basic.html

@@ -26,7 +26,6 @@
     return a;
   }
   promise_test(async t => {
-    const host = document.getElementById('host');
     const sr = host.attachShadow({mode: 'open'});
     sr.innerHTML = `
       <button id=item1 tabindex=0>One</button>

html/interaction/focus/focusgroup/tentative/shadow/shadow-nested-scope.html

@@ -26,15 +26,13 @@
     return a;
   }
   promise_test(async t => {
-    const host = document.getElementById('shadow_host');
+    const host = shadow_host;
     const sr = host.attachShadow({mode: 'open'});
     sr.innerHTML = `
       <div id=inner_fg focusgroup="toolbar inline">
         <button id=inner1 tabindex=0>Inner 1</button>
         <button id=inner2 tabindex=0>Inner 2</button>
       </div>`;
-    const outer1 = document.getElementById('outer1');
-    const outer2 = document.getElementById('outer2');
     const inner1 = sr.getElementById('inner1');
     const inner2 = sr.getElementById('inner2');
 

html/interaction/focus/focusgroup/tentative/top-layer-dialog-excluded.html

@@ -32,7 +32,6 @@
 // still operates normally").
 
 promise_test(async t => {
-  const dlg = document.getElementById("dlg");
   dlg.showModal();
   t.add_cleanup(() => dlg.close());
 

html/interaction/focus/focusgroup/tentative/top-layer-dynamic-exclusion.html

@@ -42,7 +42,6 @@
 <script>
 
 promise_test(async t => {
-  const pop = document.getElementById("pop");
   t.add_cleanup(() => pop.hidePopover());
 
   // Hidden popover: items not rendered, naturally skipped. Guard against
@@ -72,7 +71,6 @@
 }, "Top-layer exclusion is dynamic: show and hide cycles");
 
 promise_test(async t => {
-  const pop = document.getElementById("pop");
   pop.showPopover();
   t.add_cleanup(() => pop.hidePopover());
 
@@ -81,7 +79,6 @@
 }, "Wrapping navigation skips shown popover subtree");
 
 promise_test(async t => {
-  const pop = document.getElementById("pop");
   pop.showPopover();
   t.add_cleanup(() => pop.hidePopover());
 
@@ -99,7 +96,7 @@
 }, "Home and End keys skip shown popover subtree");
 
 promise_test(async t => {
-  const pop_b = document.getElementById("pop_block");
+  const pop_b = pop_block;
   pop_b.showPopover();
   t.add_cleanup(() => pop_b.hidePopover());
 
@@ -113,8 +110,8 @@
 }, "Block-axis navigation skips shown popover subtree");
 
 promise_test(async t => {
-  const p1 = document.getElementById("pop_m1");
-  const p2 = document.getElementById("pop_m2");
+  const p1 = pop_m1;
+  const p2 = pop_m2;
   p1.showPopover();
   p2.showPopover();
   t.add_cleanup(() => {

html/interaction/focus/focusgroup/tentative/top-layer-inner-focusgroup.html

@@ -23,7 +23,7 @@
 <script>
 
 promise_test(async t => {
-  const pop = document.getElementById("popover_fg");
+  const pop = popover_fg;
   pop.showPopover();
   t.add_cleanup(() => pop.hidePopover());
 
@@ -33,7 +33,7 @@
 }, "Popover with own focusgroup is excluded from ancestor arrow navigation");
 
 promise_test(async t => {
-  const pop = document.getElementById("popover_fg");
+  const pop = popover_fg;
   pop.showPopover();
   t.add_cleanup(() => pop.hidePopover());
 
@@ -59,7 +59,7 @@
 <script>
 
 promise_test(async t => {
-  const pop = document.getElementById("focusable_pop");
+  const pop = focusable_pop;
   pop.showPopover();
   t.add_cleanup(() => pop.hidePopover());
 

html/interaction/focus/focusgroup/tentative/top-layer-popover-excluded.html

@@ -22,15 +22,15 @@
 <script>
 
 promise_test(async t => {
-  const pop = document.getElementById("popover_simple");
+  const pop = popover_simple;
   pop.showPopover();
   t.add_cleanup(() => pop.hidePopover());
 
   await assert_directional_navigation_bidirectional([before_pop, after_pop]);
 }, "Arrow navigation skips a shown popover in ancestor focusgroup");
 
 promise_test(async t => {
-  const pop = document.getElementById("popover_simple");
+  const pop = popover_simple;
   pop.showPopover();
   t.add_cleanup(() => pop.hidePopover());
 
@@ -59,7 +59,7 @@
 <script>
 
 promise_test(async t => {
-  const pop = document.getElementById("first_pop");
+  const pop = first_pop;
   pop.showPopover();
   t.add_cleanup(() => pop.hidePopover());
 
@@ -95,7 +95,7 @@
 <script>
 
 promise_test(async t => {
-  const pop = document.getElementById("seg_pop");
+  const pop = seg_pop;
   pop.showPopover();
   t.add_cleanup(() => pop.hidePopover());
 
@@ -125,7 +125,7 @@
 <script>
 
 promise_test(async t => {
-  const pop = document.getElementById("sib_pop");
+  const pop = sib_pop;
   pop.showPopover();
   t.add_cleanup(() => pop.hidePopover());
 
@@ -157,7 +157,7 @@
 <script>
 
 promise_test(async t => {
-  const pop = document.getElementById("none_pop");
+  const pop = none_pop;
   pop.showPopover();
   t.add_cleanup(() => pop.hidePopover());