popover-focus-2.html

<!DOCTYPE html>

<meta charset="utf-8" />

<title>Popover focus behaviors</title>

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

<link rel="author" href="mailto:masonf@chromium.org">

<link rel="author" title="Luke Warlow" href="mailto:lwarlow@igalia.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="resources/popover-utils.js"></script>

<div id=fixup>

  <button id=button1 tabindex="0">Button1</button>

  <div popover id=popover0  tabindex="0" style="top:300px">

  </div>

  <div popover id=popover1 style="top:100px">

    <button id=inside_popover1 tabindex="0">Inside1</button>

    <button id=invoker2 tabindex="0">Nested Invoker 2</button>

    <button id=inside_popover2 tabindex="0">Inside2</button>

  </div>

  <button id=button2 tabindex="0">Button2</button>

  <div popover id=popover_no_invoker tabindex="0" style="top:300px"></div>

  <button id=invoker0 tabindex="0">Invoker0</button>

  <button id=invoker1 tabindex="0">Invoker1</button>

  <button id=button3 tabindex="0">Button3</button>

  <div popover id=popover2 style="top:200px">

    <button id=inside_popover3 tabindex="0">Inside3</button>

    <button id=invoker3 tabindex="0">Nested Invoker 3</button>

  </div>

  <div popover id=popover3 style="top:300px">

    Non-focusable popover

  </div>

  <button id=button4 tabindex="0">Button4</button>

</div>

<style>

  #fixup [popover] {

    bottom:auto;

</style>

<script>

async function verifyFocusOrder(order,description) {

  order[0].focus();

  for(let i=0;i<order.length;++i) {

    const control = order[i];

    assert_equals(document.activeElement,control,`${description}: Step ${i+1}`);

    await sendTab();

  for(let i=order.length-1;i>=0;--i) {

    const control = order[i];

    await sendShiftTab();

    assert_equals(document.activeElement,control,`${description}: Step ${i+1} (backwards)`);

async function testPopoverFocusNavigation() {

  button1.focus();

  assert_equals(document.activeElement,button1);

  await sendTab();

  assert_equals(document.activeElement,button2,'Hidden popover should be skipped');

  await sendShiftTab();

  assert_equals(document.activeElement,button1,'Hidden popover should be skipped backwards');

  popover_no_invoker.showPopover();

  await sendTab();

  await sendTab();

  assert_equals(document.activeElement,popover_no_invoker,"Focusable popover that is opened without an invoker should get focused");

  await sendTab();

  assert_equals(document.activeElement,invoker0);

  await sendEnter(); // Activate the invoker0

  assert_true(popover0.matches(':popover-open'), 'popover0 should be invoked by invoker0');

  assert_equals(document.activeElement,invoker0,'Focus should not move when popover is shown');

  await sendTab();

  await sendEnter(); // Activate the invoker

  assert_true(popover1.matches(':popover-open'), 'popover1 should be invoked by invoker1');

  assert_equals(document.activeElement,invoker1,'Focus should not move when popover is shown');

  await sendTab();

  // Make invoker1 non-focusable.

  invoker1.disabled = true;

  assert_equals(document.activeElement,inside_popover1,'Focus should move from invoker into the open popover');

  await sendTab();

  assert_equals(document.activeElement,invoker2,'Focus should move within popover');

  await sendShiftTab();

  await sendShiftTab();

  assert_equals(document.activeElement,invoker0,'Focus should not move back to invoker as it is non-focusable');

  // Reset invoker1 to focusable.

  invoker1.disabled = false;

  await verifyFocusOrder([button1, button2, invoker0, invoker1, inside_popover1, invoker2, inside_popover2, button3, button4],'set 1');

  invoker2.focus();

  await sendEnter(); // Activate the nested invoker

  assert_true(popover2.matches(':popover-open'), 'popover2 should be invoked by nested invoker');

  assert_equals(document.activeElement,invoker2,'Focus should stay on the invoker');

  await sendTab();

  assert_equals(document.activeElement,inside_popover3,'Focus should move into nested popover');

  await sendTab();

  assert_equals(document.activeElement,invoker3);

  await sendEnter(); // Activate the (empty) nested invoker

  assert_true(popover3.matches(':popover-open'), 'popover3 should be invoked by nested invoker');

  assert_equals(document.activeElement,invoker3,'Focus should stay on the invoker');

  await sendTab();

  assert_equals(document.activeElement,inside_popover2,'Focus should skip popover without focusable content, going back to higher scope');

  await sendShiftTab();

  assert_equals(document.activeElement,invoker3,'Shift-tab from the higher scope should return to the lower scope');

  await sendTab();

  assert_equals(document.activeElement,inside_popover2);

  await sendTab();

  assert_equals(document.activeElement,button3,'Focus should exit popovers');

  await sendTab();

  assert_equals(document.activeElement,button4,'Focus should skip popovers');

  button1.focus();

  await verifyFocusOrder([button1, button2, invoker0, invoker1, inside_popover1, invoker2, inside_popover3, invoker3, inside_popover2, button3, button4],'set 2');

promise_test(async t => {

  invoker0.setAttribute('popovertarget', 'popover0');

  invoker1.setAttribute('popovertarget', 'popover1');

  invoker2.setAttribute('popovertarget', 'popover2');

  invoker3.setAttribute('popovertarget', 'popover3');

  t.add_cleanup(() => {

    invoker0.removeAttribute('popovertarget');

    invoker1.removeAttribute('popovertarget');

    invoker2.removeAttribute('popovertarget');

    invoker3.removeAttribute('popovertarget');

});

  await testPopoverFocusNavigation();

}, "Popover focus navigation with popovertarget invocation");

promise_test(async t => {

  invoker0.setAttribute('commandfor', 'popover0');

  invoker1.setAttribute('commandfor', 'popover1');

  invoker2.setAttribute('commandfor', 'popover2');

  invoker3.setAttribute('commandfor', 'popover3');

  invoker0.setAttribute('command', 'toggle-popover');

  invoker1.setAttribute('command', 'toggle-popover');

  invoker2.setAttribute('command', 'toggle-popover');

  invoker3.setAttribute('command', 'toggle-popover');

  t.add_cleanup(() => {

    invoker0.removeAttribute('commandfor');

    invoker1.removeAttribute('commandfor');

    invoker2.removeAttribute('commandfor');

    invoker3.removeAttribute('commandfor');

    invoker0.removeAttribute('command');

    invoker1.removeAttribute('command');

    invoker2.removeAttribute('command');

    invoker3.removeAttribute('command');

});

  await testPopoverFocusNavigation();

}, "Popover focus navigation with command/commandfor invocation");

promise_test(async t => {

  const invoker0Click = () => {

    popover0.togglePopover({ source: invoker0 });

};

  invoker0.addEventListener('click', invoker0Click);

  const invoker1Click = () => {

    popover1.togglePopover({ source: invoker1 });

};

  invoker1.addEventListener('click', invoker1Click);

  const invoker2Click = () => {

    popover2.togglePopover({ source: invoker2 });

};

  invoker2.addEventListener('click', invoker2Click);

  const invoker3Click = () => {

    popover3.togglePopover({ source: invoker3 });

};

  invoker3.addEventListener('click', invoker3Click);

  t.add_cleanup(() => {

    invoker0.removeEventListener('click', invoker0Click);

    invoker1.removeEventListener('click', invoker1Click);

    invoker2.removeEventListener('click', invoker2Click);

    invoker3.removeEventListener('click', invoker3Click);

});

  await testPopoverFocusNavigation()

}, "Popover focus navigation with imperative invocation");

</script>

<button id=circular0 tabindex="0">Invoker</button>

<div id=popover4 popover>

  <button id=circular1 autofocus tabindex="0"></button>

  <button id=circular2 tabindex="0"></button>

  <button id=circular3 tabindex="0"></button>

</div>

<button id=circular4 tabindex="0">after</button>

<script>

async function testCircularReferenceTabNavigation() {

  circular0.focus();

  await sendEnter(); // Activate the invoker

  await verifyFocusOrder([circular0, circular1, circular2, circular3, circular4],'circular reference');

  popover4.hidePopover();

promise_test(async t => {

  circular0.setAttribute('popovertarget', 'popover4');

  circular1.setAttribute('popovertarget', 'popover4');

  circular1.setAttribute('popovertargetaction', 'hide');

  circular2.setAttribute('popovertarget', 'popover4');

  circular2.setAttribute('popovertargetaction', 'show');

  circular3.setAttribute('popovertarget', 'popover4');

  t.add_cleanup(() => {

    circular0.removeAttribute('popovertarget');

    circular1.removeAttribute('popovertarget');

    circular1.removeAttribute('popovertargetaction');

    circular2.removeAttribute('popovertarget');

    circular2.removeAttribute('popovertargetaction');

    circular3.removeAttribute('popovertarget');

});

  await testCircularReferenceTabNavigation();

}, "Circular reference tab navigation with popovertarget invocation");

promise_test(async t => {

  circular0.setAttribute('commandfor', 'popover4');

  circular1.setAttribute('commandfor', 'popover4');

  circular2.setAttribute('commandfor', 'popover4');

  circular3.setAttribute('commandfor', 'popover4');

  circular0.setAttribute('command', 'toggle-popover');

  circular1.setAttribute('command', 'hide-popover');

  circular2.setAttribute('command', 'show-popover');

  circular3.setAttribute('command', 'toggle-popover');

  t.add_cleanup(() => {

    circular0.removeAttribute('commandfor');

    circular1.removeAttribute('commandfor');

    circular2.removeAttribute('commandfor');

    circular3.removeAttribute('commandfor');

    circular0.removeAttribute('command');

    circular1.removeAttribute('command');

    circular2.removeAttribute('command');

    circular3.removeAttribute('command');

});

  await testCircularReferenceTabNavigation();

}, "Circular reference tab navigation with command/commandfor invocation");

promise_test(async t => {

  const circular0Click = () => {

    popover4.togglePopover({ source: circular0 });

};

  circular0.addEventListener('click', circular0Click);

  const circular1Click = () => {

    popover4.hidePopover();

};

  circular1.addEventListener('click', circular1Click);

  const circular2Click = () => {

    popover4.showPopover({ source: circular2 });

};

  circular2.addEventListener('click', circular2Click);

  const circular3Click = () => {

    popover4.togglePopover({ source: circular3 });

};

  circular3.addEventListener('click', circular3Click);

  t.add_cleanup(() => {

    circular0.removeEventListener('click', circular0Click);

    circular1.removeEventListener('click', circular1Click);

    circular2.removeEventListener('click', circular2Click);

    circular3.removeEventListener('click', circular3Click);

});

  await testCircularReferenceTabNavigation();

}, "Circular reference tab navigation with imperative invocation");

</script>

<div id=focus-return1>

  <button tabindex="0">Show popover</button>

  <div popover id=focus-return1-p>

    <button autofocus tabindex="0">Hide popover</button>

  </div>

</div>

<script>

async function testPopoverFocusReturn1() {

  const invoker = document.querySelector('#focus-return1>button');

  const popover = document.querySelector('#focus-return1>[popover]');

  const hideButton = popover.querySelector('button');

  invoker.focus(); // Make sure button is focused.

  assert_equals(document.activeElement,invoker);

  await sendEnter(); // Activate the invoker

  assert_true(popover.matches(':popover-open'), 'popover should be invoked by invoker');

  assert_equals(document.activeElement,hideButton,'Hide button should be focused due to autofocus attribute');

  await sendEnter(); // Activate the hide invoker

  assert_false(popover.matches(':popover-open'), 'popover should be hidden by invoker');

  assert_equals(document.activeElement,invoker,'Focus should be returned to the invoker');

promise_test(async t => {

  const invoker = document.querySelector('#focus-return1>button');

  const popover = document.querySelector('#focus-return1>[popover]');

  const hideButton = popover.querySelector('button');

  invoker.setAttribute('popovertarget', 'focus-return1-p');

  invoker.setAttribute('popovertargetaction', 'show');

  hideButton.setAttribute('popovertarget', 'focus-return1-p');

  hideButton.setAttribute('popovertargetaction', 'hide');

  t.add_cleanup(() => {

    invoker.removeAttribute('popovertarget');

    invoker.removeAttribute('popovertargetaction');

    hideButton.removeAttribute('popovertarget');

    hideButton.removeAttribute('popovertargetaction');

});

  await testPopoverFocusReturn1();

}, "Popover focus returns when popover is hidden by invoker with popovertarget invocation");

promise_test(async t => {

  const invoker = document.querySelector('#focus-return1>button');

  const popover = document.querySelector('#focus-return1>[popover]');

  const hideButton = popover.querySelector('button');

  invoker.setAttribute('commandfor', 'focus-return1-p');

  invoker.setAttribute('command', 'show-popover');

  hideButton.setAttribute('commandfor', 'focus-return1-p');

  hideButton.setAttribute('command', 'hide-popover');

  t.add_cleanup(() => {

    invoker.removeAttribute('commandfor');

    invoker.removeAttribute('command');

    hideButton.removeAttribute('commandfor');

    hideButton.removeAttribute('command');

});

  await testPopoverFocusReturn1();

}, "Popover focus returns when popover is hidden by invoker with commandfor invocation");

promise_test(async t => {

  const invoker = document.querySelector('#focus-return1>button');

  const popover = document.querySelector('#focus-return1>[popover]');

  const hideButton = popover.querySelector('button');

  const invokerClick = () => {

    popover.showPopover({ source: invoker });

};

  invoker.addEventListener('click', invokerClick);

  const hideButtonClick = () => {

    popover.hidePopover();

};

  hideButton.addEventListener('click', hideButtonClick);

  t.add_cleanup(() => {

    invoker.removeEventListener('click', invokerClick);

    hideButton.removeEventListener('click', hideButtonClick);

});

  await testPopoverFocusReturn1();

}, "Popover focus returns when popover is hidden by invoker with imperative invocation");

</script>

<div id=focus-return2>

  <button tabindex="0">Toggle popover</button>

  <div popover id=focus-return2-p>Popover with <button tabindex="0">focusable element</button></div>

  <span tabindex=0>Other focusable element</span>

</div>

<script>

async function testPopoverFocusReturn2() {

  const invoker = document.querySelector('#focus-return2>button');

  const popover = document.querySelector('#focus-return2>[popover]');

  const otherElement = document.querySelector('#focus-return2>span');

  invoker.focus(); // Make sure button is focused.

  assert_equals(document.activeElement,invoker);

  invoker.click(); // Activate the invoker

  assert_true(popover.matches(':popover-open'), 'popover should be invoked by invoker');

  assert_equals(document.activeElement,invoker,'invoker should still be focused');

  await sendTab();

  assert_equals(document.activeElement,popover.querySelector('button'),'next up is the popover');

  await sendTab();

  assert_equals(document.activeElement,otherElement,'next focus stop is outside the popover');

  await sendEscape(); // Close the popover via ESC

  assert_false(popover.matches(':popover-open'), 'popover should be hidden');

  assert_equals(document.activeElement,otherElement,'focus does not move because it was not inside the popover');

promise_test(async t => {

  const invoker = document.querySelector('#focus-return2>button');

  invoker.setAttribute('popovertarget', 'focus-return2-p');

  t.add_cleanup(() => {

    invoker.removeAttribute('popovertarget');

});

  await testPopoverFocusReturn2();

}, "Popover focus only returns to invoker when focus is within the popover with popovertarget invocation");

promise_test(async t => {

  const invoker = document.querySelector('#focus-return2>button');

  invoker.setAttribute('command', 'toggle-popover');

  invoker.setAttribute('commandfor', 'focus-return2-p');

  t.add_cleanup(() => {

    invoker.removeAttribute('command');

    invoker.removeAttribute('commandfor');

});

  await testPopoverFocusReturn2();

}, "Popover focus only returns to invoker when focus is within the popover with command/commandfor invocation");

promise_test(async t => {

  const invoker = document.querySelector('#focus-return2>button');

  const popover = document.querySelector('#focus-return2>[popover]');

  const invokerClick = () => {

    popover.togglePopover({ source: invoker });

};

  invoker.addEventListener('click', invokerClick);

  t.add_cleanup(() => {

    invoker.removeEventListener('click', invokerClick);

});

  await testPopoverFocusReturn2();

}, "Popover focus only returns to invoker when focus is within the popover with imperative invocation");

</script>

<div id=no-focus-candidate>

  <button tabindex="0">Toggle popover</button>

  <div popover id=no-focus-candidate-p>

    Popover with <button tabindex="0">focusable element</button>

    <div popover id=no-focus-candidate-p2>Nested popover with <button tabindex="0">focusable element</button></div>

  </div>

</div>

<script>

async function testNoFocusCandidate() {

  const invoker = document.querySelector('#no-focus-candidate>button');

  const popover = document.querySelector('#no-focus-candidate>[popover]');

  const nestedPopover = document.querySelector('#no-focus-candidate>[popover]>[popover]');

  invoker.focus(); // Make sure button is focused.

  assert_equals(document.activeElement,invoker);

  invoker.click(); // Activate the invoker

  assert_true(popover.matches(':popover-open'), 'popover should be invoked by invoker');

  assert_equals(document.activeElement,invoker, 'invoker should still be focused');

  await sendTab();

  assert_equals(document.activeElement,popover.querySelector('button'),'next up is the popover');

  await sendEnter(); // Show nested popover

  assert_true(nestedPopover.matches(':popover-open'), 'nested popover should be invoked by invoker');

  await sendTab();

  assert_equals(document.activeElement, nestedPopover.querySelector('button'), 'focus on the nested popover button');

  popover.querySelector('button').disabled = true; // Make the invoker no longer a focus candidate.

  await sendShiftTab();

  assert_equals(document.activeElement, invoker, 'initial invoker should be focused, nested popover invoker is skipped since it is disabled');

  nestedPopover.querySelector('button').focus();

  await sendTab();

  assert_equals(document.activeElement, document.body, 'no more focusable elements after the button');

promise_test(async t => {

  const invoker = document.querySelector('#no-focus-candidate>button');

  const popover = document.querySelector('#no-focus-candidate>[popover]');

  const nestedButton = popover.querySelector('button');

  const nestedPopover = document.querySelector('#no-focus-candidate>[popover]>[popover]');

  invoker.setAttribute('popovertarget', 'no-focus-candidate-p');

  nestedButton.setAttribute('popovertarget', 'no-focus-candidate-p2');

  t.add_cleanup(() => {

    invoker.removeAttribute('popovertarget');

    nestedButton.removeAttribute('popovertarget');

    nestedButton.disabled = false;

    popover.hidePopover();

    nestedPopover.hidePopover();

});

  await testNoFocusCandidate();

}, "Cases where the next focus candidate isn't in the direct parent scope with popovertarget invocation");

promise_test(async t => {

  const invoker = document.querySelector('#no-focus-candidate>button');

  const popover = document.querySelector('#no-focus-candidate>[popover]');

  const nestedButton = popover.querySelector('button');

  const nestedPopover = document.querySelector('#no-focus-candidate>[popover]>[popover]');

  invoker.setAttribute('commandfor', 'no-focus-candidate-p');

  invoker.setAttribute('command', 'toggle-popover');

  nestedButton.setAttribute('commandfor', 'no-focus-candidate-p2');

  nestedButton.setAttribute('command', 'toggle-popover');

  t.add_cleanup(() => {

    invoker.removeAttribute('command');

    invoker.removeAttribute('commandfor');

    nestedButton.removeAttribute('command');

    nestedButton.removeAttribute('commandfor');

    nestedButton.disabled = false;

    popover.hidePopover();

    nestedPopover.hidePopover();

});

  await testNoFocusCandidate();

}, "Cases where the next focus candidate isn't in the direct parent scope with command/commandfor invocation");

promise_test(async t => {

  const invoker = document.querySelector('#no-focus-candidate>button');

  const popover = document.querySelector('#no-focus-candidate>[popover]');

  const nestedButton = popover.querySelector('button');

  const nestedPopover = document.querySelector('#no-focus-candidate>[popover]>[popover]');

  const invokerClick = () => {

    popover.togglePopover({ source: invoker });

};

  invoker.addEventListener('click', invokerClick);

  const nestedButtonClick = () => {

    nestedPopover.togglePopover({ source: nestedButton });

};

  nestedButton.addEventListener('click', nestedButtonClick);

  t.add_cleanup(() => {

    invoker.removeEventListener('click', invokerClick);

    nestedButton.removeEventListener('click', nestedButtonClick);

    nestedButton.disabled = false;

    popover.hidePopover();

    nestedPopover.hidePopover();

});

  await testNoFocusCandidate();

}, "Cases where the next focus candidate isn't in the direct parent scope with imperative invocation");

</script>

Source code

Revision control

Copy as Markdown

Other Tools

Test Info: Warnings