Skip to content

Commit

Permalink
Fix focus traversal for self-referential invoker
Browse files Browse the repository at this point in the history
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}
  • Loading branch information
mfreed7 authored and chromium-wpt-export-bot committed Jan 5, 2023
1 parent 61e57be commit f938eec
Show file tree
Hide file tree
Showing 2 changed files with 18 additions and 1 deletion.
16 changes: 16 additions & 0 deletions html/semantics/popovers/popover-focus-2.tentative.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
3 changes: 2 additions & 1 deletion html/semantics/popovers/popover-light-dismiss.tentative.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down

0 comments on commit f938eec

Please sign in to comment.