shadow-utils.js - mozsearch

Enable keyboard shortcuts

// Structure:

// <div #aboveHost>

// <div #host>

//    #shadowRoot

//      <div #aboveSlot>

//      <slot #slotAbove>

//        (slotted) <div #slottedAbove>

//      <slot #slotBelow>

//        (slotted) <div #slottedBelow>

//      <div #belowSlot>

// <div #belowHost>

function prepareDOM(container, delegatesFocus) {

  const aboveHost = document.createElement("div");

  aboveHost.innerText = "aboveHost";

  const host = document.createElement("div");

  host.id = "host";

  const slottedBelow = document.createElement("div");

  slottedBelow.innerText = "slotted below";

  slottedBelow.slot = "below";

  const slottedAbove = document.createElement("div");

  slottedAbove.innerText = "slotted above";

  slottedAbove.slot = "above";

  const belowHost = document.createElement("div");

  belowHost.innerText = "belowHost";

  container.appendChild(aboveHost);

  container.appendChild(host);

  container.appendChild(belowHost);

  host.appendChild(slottedBelow);

  host.appendChild(slottedAbove);

  const shadowRoot = host.attachShadow({ mode: "open", delegatesFocus: delegatesFocus});

  const aboveSlot = document.createElement("div");

  aboveSlot.innerText = "aboveSlot";

  const slotAbove = document.createElement("slot");

  slotAbove.name = "above";

  const slotBelow = document.createElement("slot");

  slotBelow.name = "below";

  const belowSlot = document.createElement("div");

  belowSlot.innerText = "belowSlot";

  shadowRoot.appendChild(aboveSlot);

  shadowRoot.appendChild(slotAbove);

  shadowRoot.appendChild(slotBelow);

  shadowRoot.appendChild(belowSlot);

  return [aboveHost, host, aboveSlot, slotAbove, slottedAbove, slotBelow, slottedBelow, belowSlot, belowHost];

function setTabIndex(elements, value) {

  for (const el of elements) {

    el.tabIndex = value;

function removeTabIndex(elements) {

  for (const el of elements) {

    el.removeAttribute("tabindex");

function resetFocus(root = document) {

  if (root.activeElement)

    root.activeElement.blur();

function navigateFocusForward() {

  // TAB = '\ue004'

  return test_driver.send_keys(document.body, "\ue004");

async function assertFocusOrder(expectedOrder) {

  const shadowRoot = document.getElementById("host").shadowRoot;

  for (const el of expectedOrder) {

    await navigateFocusForward();

    const focused = shadowRoot.activeElement ? shadowRoot.activeElement : document.activeElement;

    assert_equals(focused, el);