From f938eec99e167202dc5e9e4e8067ab4d53e10834 Mon Sep 17 00:00:00 2001
From: Mason Freed <masonf@chromium.org>
Date: Wed, 4 Jan 2023 18:39:43 -0800
Subject: [PATCH] Fix focus traversal for self-referential invoker

In the case that a popover contains an invoker that points back to that
invoker, the tab navigation code used to get confused. E.g.:

```
<div id="menu" popover>
  <button autofocus popoverhidetarget="menu">Button #1</button>
  <button popoverhidetarget="menu">Button #2</button>
</div>
```

In this case, trying to tab between the first and second button would
break because the second button appeared to be an invoker for a new
popover, when in reality it was an invoker for the same popover.

Fixed: 1399601
Bug: 1307772
Change-Id: I276370d7c8eee0dd32f0c89da202a0d3777bf911
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4133482
Commit-Queue: Mason Freed <masonf@chromium.org>
Auto-Submit: Mason Freed <masonf@chromium.org>
Commit-Queue: Joey Arhar <jarhar@chromium.org>
Reviewed-by: Joey Arhar <jarhar@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1089080}
---
 .../popovers/popover-focus-2.tentative.html      | 16 ++++++++++++++++
 .../popover-light-dismiss.tentative.html         |  3 ++-
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/html/semantics/popovers/popover-focus-2.tentative.html b/html/semantics/popovers/popover-focus-2.tentative.html
index e0effbd866c4f5..569b633886cf6a 100644
--- a/html/semantics/popovers/popover-focus-2.tentative.html
+++ b/html/semantics/popovers/popover-focus-2.tentative.html
@@ -90,6 +90,22 @@
 }, "Popover focus navigation");
 </script>
 
+<button id=circular0 popovertoggletarget=popover4>Invoker</button>
+<div id=popover4 popover>
+  <button id=circular1 autofocus popoverhidetarget=popover4></button>
+  <button id=circular2 popovershowtarget=popover4></button>
+  <button id=circular3 popovertoggletarget=popover4></button>
+</div>
+<button id=circular4>after</button>
+<script>
+promise_test(async t => {
+  circular0.focus();
+  await sendEnter(); // Activate the invoker
+  await verifyFocusOrder([circular0, circular1, circular2, circular3, circular4]);
+  popover4.hidePopover();
+}, "Circular reference tab navigation");
+</script>
+
 <div id=deleted>
   <button popovershowtarget=deleted1>Show popover</button>
   <div popover id=deleted1>
diff --git a/html/semantics/popovers/popover-light-dismiss.tentative.html b/html/semantics/popovers/popover-light-dismiss.tentative.html
index 83573c86f06f83..3c48bd9274e88e 100644
--- a/html/semantics/popovers/popover-light-dismiss.tentative.html
+++ b/html/semantics/popovers/popover-light-dismiss.tentative.html
@@ -392,8 +392,9 @@
     <div popover id=convoluted_p4><p>Popover 4</p></div>
   </div>
 </div>
-<div popover id=convoluted_p2>Popover 2
+<div popover id=convoluted_p2 anchor=convoluted_p2>Popover 2 (self-anchor-linked)
   <button popovertoggletarget=convoluted_p3>Open Popover 3</button>
+  <button popovershowtarget=convoluted_p2>Self-linked invoker</button>
 </div>
 <div popover id=convoluted_p3 anchor=convoluted_anchor>Popover 3
   <button popovertoggletarget=convoluted_p4>Open Popover 4</button>