popover-focus-across-slot.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /html/semantics/popovers/popover-focus-across-slot.html - WPT Dashboard Interop Dashboard

<!doctype html>

<meta charset="utf-8" />

<title>Popover focus behaviors in form control elements</title>

<meta name="timeout" content="long" />

<link rel="author" title="Peng Zhou" href="mailto:zhoupeng.1996@bytedance.com">

<link rel=help href="https://open-ui.org/components/popover.research.explainer">

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<script src="/resources/testdriver.js"></script>

<script src="/resources/testdriver-actions.js"></script>

<script src="/resources/testdriver-vendor.js"></script>

<script src="/shadow-dom/focus-navigation/resources/focus-utils.js"></script>

<script src="/shadow-dom/focus-navigation/resources/shadow-dom.js"></script>

<script src="resources/popover-utils.js"></script>

<div popover id="popover">

  <div id="host">

    <template shadowrootmode="open">

      <div>

        <div>

          <div>

            <slot></slot>

            <button id="close">Close popover</button>

          </div>

        </div>

      </div>

    </template>

    <div>

      <input type="checkbox" id="target1" />

      <input type="checkbox" id="target2" />

    </div>

  </div>

</div>

<button popovertarget="popover" id="invoker">Open popover</button>

<button id="after">

  This button is where focus should land after traversing this popover

</button>

<script>

promise_test(async () => {

  // Open popover

  invoker.focus();

  assert_equals(document.activeElement, invoker);

  invoker.click();

  assert_true(popover.matches(":popover-open"));

  await assert_focus_navigation_bidirectional([

    'invoker',

    'target1',

    'target2',

    'host/close',

    'after',

]);

});

</script>