html/semantics/popovers/popover-focus.html - external/github.com/web-platform-tests/wpt - Git at Google

 <!DOCTYPE html>
 <meta charset="utf-8" />
 <title>Popover focus behaviors</title>
 <link rel="author" href="mailto:[email protected]">
 <link rel=help href="https://open-ui.org/components/popover.research.explainer">
 <meta name="timeout" content="long">
 <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 popover data-test='default behavior - popover is not focused' data-no-focus>
   <p>This is a popover</p>
   <button tabindex="0">first button</button>
 </div>

 <div popover data-test='autofocus popover' autofocus tabindex=-1 class=should-be-focused>
   <p>This is a popover</p>
 </div>

 <div popover data-test='autofocus empty popover' autofocus tabindex=-1 class=should-be-focused></div>

 <div popover data-test='autofocus popover with button' autofocus tabindex=-1 class=should-be-focused>
   <p>This is a popover</p>
   <button tabindex="0">button</button>
 </div>

 <div popover data-test='autofocus child'>
   <p>This is a popover</p>
   <button autofocus class=should-be-focused tabindex="0">autofocus button</button>
 </div>

 <div popover data-test='autofocus on tabindex=0 element'>
   <p autofocus tabindex=0 class=should-be-focused>This is a popover with autofocus on a tabindex=0 element</p>
   <button tabindex="0">button</button>
 </div>

 <div popover data-test='autofocus multiple children'>
   <p>This is a popover</p>
   <button autofocus class=should-be-focused tabindex="0">autofocus button</button>
   <button autofocus tabindex="0">second autofocus button</button>
 </div>

 <div popover autofocus tabindex=-1 data-test='autofocus popover and multiple autofocus children' class=should-be-focused>
   <p>This is a popover</p>
   <button autofocus tabindex="0">autofocus button</button>
   <button autofocus tabindex="0">second autofocus button</button>
 </div>

 <dialog popover=auto data-test='Opening dialogs as popovers should use dialog initial focus algorithm.'>
   <button class=should-be-focused tabindex="0">button</button>
 </dialog>

 <dialog popover=auto autofocus class=should-be-focused data-test='Opening dialogs as popovers which have autofocus should focus the dialog.'>
   <button tabindex="0">button</button>
 </dialog>

 <style>
   [popover] {
     border: 2px solid black;
     top:150px;
     left:150px;
   }
   :focus-within { border: 5px dashed red; }
   :focus { border: 5px solid lime; }
 </style>

 <script>
   function addInvoker(t, popover) {
     const button = document.createElement('button');
     button.innerText = 'Click me';
     const popoverId = 'popover-id';
     assert_equals(document.querySelectorAll('#' + popoverId).length, 0);
     document.body.appendChild(button);
     t.add_cleanup(function() {
       popover.removeAttribute('id');
       button.remove();
     });
     popover.id = popoverId;
     button.setAttribute('tabindex', '0');
     button.setAttribute('popovertarget', popoverId);
     return button;
   }
   function addPriorFocus(t) {
     const priorFocus = document.createElement('button');
     priorFocus.setAttribute("tabindex", "0");
     priorFocus.id = 'priorFocus';
     document.body.appendChild(priorFocus);
     t.add_cleanup(() => priorFocus.remove());
     return priorFocus;
   }
   function activateAndVerify(popover) {
     const testName = popover.getAttribute('data-test');
     promise_test(async t => {
       const priorFocus = addPriorFocus(t);
       let expectedFocusedElement = popover.matches('.should-be-focused') ? popover : popover.querySelector('.should-be-focused');
       const changesFocus = !popover.hasAttribute('data-no-focus');
       if (!changesFocus) {
         expectedFocusedElement = priorFocus;
       }
       assert_true(!!expectedFocusedElement);
       assert_false(popover.matches(':popover-open'));

       // Directly show and hide the popover:
       priorFocus.focus();
       assert_equals(document.activeElement, priorFocus);
       popover.showPopover();
       assert_equals(document.activeElement, expectedFocusedElement, `${testName} activated by popover.showPopover()`);
       popover.hidePopover();
       assert_equals(document.activeElement, priorFocus, 'prior element should get focus on hide, or if focus didn\'t shift on show, focus should stay where it was');
       assert_false(isElementVisible(popover));

       // Manual popover does not restore focus
       popover.popover = 'manual';
       priorFocus.focus();
       assert_equals(document.activeElement, priorFocus);
       popover.showPopover();
       assert_equals(document.activeElement, expectedFocusedElement, `${testName} activated by popover.showPopover()`);
       popover.hidePopover();
       if (!popover.hasAttribute('data-no-focus')) {
         assert_not_equals(document.activeElement, priorFocus, 'prior element should *not* get focus when the popover is manual');
       }
       assert_false(isElementVisible(popover));
       popover.popover = 'auto';

       // Hit Escape:
       priorFocus.focus();
       assert_equals(document.activeElement, priorFocus);
       popover.showPopover();
       assert_equals(document.activeElement, expectedFocusedElement, `${testName} activated by popover.showPopover()`);
       await sendEscape();
       assert_equals(document.activeElement, priorFocus, 'prior element should get focus after Escape');
       assert_false(isElementVisible(popover));

       // Move focus into the popover, then hit Escape:
       let containedButton = popover.querySelector('button');
       if (containedButton) {
         priorFocus.focus();
         assert_equals(document.activeElement, priorFocus);
         popover.showPopover();
         containedButton.focus();
         assert_equals(document.activeElement, containedButton);
         await sendEscape();
         assert_equals(document.activeElement, priorFocus, 'prior element should get focus after Escape');
         assert_false(isElementVisible(popover));
       }

       // Change the popover type:
       priorFocus.focus();
       popover.showPopover();
       assert_equals(document.activeElement, expectedFocusedElement, `${testName} activated by popover.showPopover()`);
       assert_equals(popover.popover, 'auto', 'All popovers in this test should start as popover=auto');
       popover.popover = 'manual';
       assert_false(popover.matches(':popover-open'), 'Changing the popover type should hide the popover');
       assert_equals(document.activeElement, priorFocus, 'prior element should get focus when the type is changed');
       assert_false(isElementVisible(popover));
       popover.popover = 'auto';

       // Remove from the document:
       priorFocus.focus();
       popover.showPopover();
       assert_equals(document.activeElement, expectedFocusedElement, `${testName} activated by popover.showPopover()`);
       popover.remove();
       assert_false(isElementVisible(popover), 'Removing the popover should hide it immediately');
       if (!popover.hasAttribute('data-no-focus')) {
         assert_not_equals(document.activeElement, priorFocus, 'prior element should *not* get focus when the popover is removed from the document');
       }
       document.body.appendChild(popover);

       // Show a modal dialog:
       priorFocus.focus();
       popover.showPopover();
       assert_equals(document.activeElement, expectedFocusedElement, `${testName} activated by popover.showPopover()`);
       const dialog = document.body.appendChild(document.createElement('dialog'));
       dialog.showModal();
       assert_false(popover.matches(':popover-open'), 'Opening a modal dialog should hide the popover');
       assert_not_equals(document.activeElement, priorFocus, 'prior element should *not* get focus when a modal dialog is shown');
       assert_false(isElementVisible(popover));
       dialog.close();
       dialog.remove();

       // Use an activating element:
       const button = addInvoker(t, popover);
       priorFocus.focus();
       button.click();
       assert_true(popover.matches(':popover-open'));
       assert_equals(document.activeElement, expectedFocusedElement, `${testName} activated by button.click()`);

       // Make sure Escape works in the invoker case:
       await sendEscape();
       assert_equals(document.activeElement, priorFocus, 'prior element should get focus after Escape (via invoker)');
       assert_false(isElementVisible(popover));

       // Make sure we can directly focus the (already open) popover:
       priorFocus.focus();
       button.click();
       assert_true(popover.matches(':popover-open'));
       assert_equals(document.activeElement, expectedFocusedElement, `${testName} activated by button.click()`);
       popover.focus();
       assert_equals(document.activeElement, popover.hasAttribute('tabindex') || popover.tagName === 'DIALOG' ? popover : expectedFocusedElement, `${testName} directly focus with popover.focus()`);
       button.click(); // Button is set to toggle the popover
       assert_false(popover.matches(':popover-open'));
       assert_equals(document.activeElement, priorFocus, 'prior element should get focus on button-toggled hide');
       assert_false(isElementVisible(popover));
     }, "Popover focus test: " + testName);

     promise_test(async t => {
       const priorFocus = addPriorFocus(t);
       assert_false(popover.matches(':popover-open'), 'popover should start out hidden');
       let button = addInvoker(t, popover);
       assert_equals(button.getAttribute('popovertarget'), popover.id, 'This test assumes the button uses `popovertarget`.');
       assert_not_equals(button, priorFocus, 'Stranger things have happened');
       assert_false(popover.contains(button), 'Start with a non-contained button');
       priorFocus.focus();
       assert_equals(document.activeElement, priorFocus);
       popover.showPopover();
       assert_true(popover.matches(':popover-open'));
       await clickOn(button); // This will *not* light dismiss, but will "toggle" the popover.
       assert_false(popover.matches(':popover-open'));
       assert_equals(document.activeElement, button, 'focus should move to the button when clicked, and should stay there when the popover closes');
       assert_false(isElementVisible(popover));

       // Same thing, but the button is contained within the popover
       button.setAttribute('popovertarget', popover.id);
       button.setAttribute('popovertargetaction', 'hide');
       popover.appendChild(button);
       t.add_cleanup(() => button.remove());
       priorFocus.focus();
       popover.showPopover();
       assert_true(popover.matches(':popover-open'));
       const changesFocus = !popover.hasAttribute('data-no-focus');
       if (changesFocus) {
         assert_not_equals(document.activeElement, priorFocus, 'focus should shift for this element');
       }
       await clickOn(button);
       assert_false(popover.matches(':popover-open'), 'clicking button should hide the popover');
       assert_equals(document.activeElement, priorFocus, 'Contained button should return focus to the previously focused element');
       assert_false(isElementVisible(popover));

       // Same thing, but the button is unrelated (no popovertarget)
       button = document.createElement('button');
       button.setAttribute("tabindex", "0");
       document.body.appendChild(button);
       priorFocus.focus();
       popover.showPopover();
       assert_true(popover.matches(':popover-open'));
       await clickOn(button); // This will light dismiss the popover, focus the prior focus, then focus this button.
       assert_false(popover.matches(':popover-open'), 'clicking button should hide the popover (via light dismiss)');
       assert_equals(document.activeElement, button, 'Focus should go to unrelated button on light dismiss');
       assert_false(isElementVisible(popover));
     }, "Popover button click focus test: " + testName);

     promise_test(async t => {
       if (popover.hasAttribute('data-no-focus')) {
         // This test only applies if the popover changes focus
         return;
       }
       const priorFocus = addPriorFocus(t);
       assert_false(popover.matches(':popover-open'), 'popover should start out hidden');

       // Move the prior focus out of the document
       priorFocus.focus();
       popover.showPopover();
       assert_true(popover.matches(':popover-open'));
       const newFocus = document.activeElement;
       assert_not_equals(newFocus, priorFocus, 'focus should shift for this element');
       priorFocus.remove();
       assert_equals(document.activeElement, newFocus, 'focus should not change when prior focus is removed');
       popover.hidePopover();
       assert_not_equals(document.activeElement, priorFocus, 'focused element has been removed');
       assert_false(isElementVisible(popover));
       document.body.appendChild(priorFocus); // Put it back

       // Move the prior focus inside the (already open) popover
       priorFocus.focus();
       popover.showPopover();
       assert_true(popover.matches(':popover-open'));
       assert_false(popover.contains(priorFocus), 'Start with a non-contained prior focus');
       popover.appendChild(priorFocus); // Move inside the popover
       assert_true(popover.contains(priorFocus));
       assert_true(popover.matches(':popover-open'), 'popover should stay open');
       popover.hidePopover();
       assert_false(isElementVisible(popover));
       assert_not_equals(document.activeElement, priorFocus, 'focused element is display:none inside the popover');
       document.body.appendChild(priorFocus); // Put it back
     }, "Popover corner cases test: " + testName);
   }

   document.querySelectorAll('body > [popover]').forEach(popover => activateAndVerify(popover));
 </script>
	<!DOCTYPE html>
	<meta charset="utf-8" />
	<title>Popover focus behaviors</title>
	<link rel="author" href="mailto:[email protected]">
	<link rel=help href="https://open-ui.org/components/popover.research.explainer">
	<meta name="timeout" content="long">
	<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 popover data-test='default behavior - popover is not focused' data-no-focus>
	<p>This is a popover</p>
	<button tabindex="0">first button</button>
	</div>

	<div popover data-test='autofocus popover' autofocus tabindex=-1 class=should-be-focused>
	<p>This is a popover</p>
	</div>

	<div popover data-test='autofocus empty popover' autofocus tabindex=-1 class=should-be-focused></div>

	<div popover data-test='autofocus popover with button' autofocus tabindex=-1 class=should-be-focused>
	<p>This is a popover</p>
	<button tabindex="0">button</button>
	</div>

	<div popover data-test='autofocus child'>
	<p>This is a popover</p>
	<button autofocus class=should-be-focused tabindex="0">autofocus button</button>
	</div>

	<div popover data-test='autofocus on tabindex=0 element'>
	<p autofocus tabindex=0 class=should-be-focused>This is a popover with autofocus on a tabindex=0 element</p>
	<button tabindex="0">button</button>
	</div>

	<div popover data-test='autofocus multiple children'>
	<p>This is a popover</p>
	<button autofocus class=should-be-focused tabindex="0">autofocus button</button>
	<button autofocus tabindex="0">second autofocus button</button>
	</div>

	<div popover autofocus tabindex=-1 data-test='autofocus popover and multiple autofocus children' class=should-be-focused>
	<p>This is a popover</p>
	<button autofocus tabindex="0">autofocus button</button>
	<button autofocus tabindex="0">second autofocus button</button>
	</div>

	<dialog popover=auto data-test='Opening dialogs as popovers should use dialog initial focus algorithm.'>
	<button class=should-be-focused tabindex="0">button</button>
	</dialog>

	<dialog popover=auto autofocus class=should-be-focused data-test='Opening dialogs as popovers which have autofocus should focus the dialog.'>
	<button tabindex="0">button</button>
	</dialog>

	<style>
	[popover] {
	border: 2px solid black;
	top:150px;
	left:150px;
	}
	:focus-within { border: 5px dashed red; }
	:focus { border: 5px solid lime; }
	</style>

	<script>
	function addInvoker(t, popover) {
	const button = document.createElement('button');
	button.innerText = 'Click me';
	const popoverId = 'popover-id';
	assert_equals(document.querySelectorAll('#' + popoverId).length, 0);
	document.body.appendChild(button);
	t.add_cleanup(function() {
	popover.removeAttribute('id');
	button.remove();
	});
	popover.id = popoverId;
	button.setAttribute('tabindex', '0');
	button.setAttribute('popovertarget', popoverId);
	return button;
	}
	function addPriorFocus(t) {
	const priorFocus = document.createElement('button');
	priorFocus.setAttribute("tabindex", "0");
	priorFocus.id = 'priorFocus';
	document.body.appendChild(priorFocus);
	t.add_cleanup(() => priorFocus.remove());
	return priorFocus;
	}
	function activateAndVerify(popover) {
	const testName = popover.getAttribute('data-test');
	promise_test(async t => {
	const priorFocus = addPriorFocus(t);
	let expectedFocusedElement = popover.matches('.should-be-focused') ? popover : popover.querySelector('.should-be-focused');
	const changesFocus = !popover.hasAttribute('data-no-focus');
	if (!changesFocus) {
	expectedFocusedElement = priorFocus;
	}
	assert_true(!!expectedFocusedElement);
	assert_false(popover.matches(':popover-open'));

	// Directly show and hide the popover:
	priorFocus.focus();
	assert_equals(document.activeElement, priorFocus);
	popover.showPopover();
	assert_equals(document.activeElement, expectedFocusedElement, `${testName} activated by popover.showPopover()`);
	popover.hidePopover();
	assert_equals(document.activeElement, priorFocus, 'prior element should get focus on hide, or if focus didn\'t shift on show, focus should stay where it was');
	assert_false(isElementVisible(popover));

	// Manual popover does not restore focus
	popover.popover = 'manual';
	priorFocus.focus();
	assert_equals(document.activeElement, priorFocus);
	popover.showPopover();
	assert_equals(document.activeElement, expectedFocusedElement, `${testName} activated by popover.showPopover()`);
	popover.hidePopover();
	if (!popover.hasAttribute('data-no-focus')) {
	assert_not_equals(document.activeElement, priorFocus, 'prior element should not get focus when the popover is manual');
	}
	assert_false(isElementVisible(popover));
	popover.popover = 'auto';

	// Hit Escape:
	priorFocus.focus();
	assert_equals(document.activeElement, priorFocus);
	popover.showPopover();
	assert_equals(document.activeElement, expectedFocusedElement, `${testName} activated by popover.showPopover()`);
	await sendEscape();
	assert_equals(document.activeElement, priorFocus, 'prior element should get focus after Escape');
	assert_false(isElementVisible(popover));

	// Move focus into the popover, then hit Escape:
	let containedButton = popover.querySelector('button');
	if (containedButton) {
	priorFocus.focus();
	assert_equals(document.activeElement, priorFocus);
	popover.showPopover();
	containedButton.focus();
	assert_equals(document.activeElement, containedButton);
	await sendEscape();
	assert_equals(document.activeElement, priorFocus, 'prior element should get focus after Escape');
	assert_false(isElementVisible(popover));
	}

	// Change the popover type:
	priorFocus.focus();
	popover.showPopover();
	assert_equals(document.activeElement, expectedFocusedElement, `${testName} activated by popover.showPopover()`);
	assert_equals(popover.popover, 'auto', 'All popovers in this test should start as popover=auto');
	popover.popover = 'manual';
	assert_false(popover.matches(':popover-open'), 'Changing the popover type should hide the popover');
	assert_equals(document.activeElement, priorFocus, 'prior element should get focus when the type is changed');
	assert_false(isElementVisible(popover));
	popover.popover = 'auto';

	// Remove from the document:
	priorFocus.focus();
	popover.showPopover();
	assert_equals(document.activeElement, expectedFocusedElement, `${testName} activated by popover.showPopover()`);
	popover.remove();
	assert_false(isElementVisible(popover), 'Removing the popover should hide it immediately');
	if (!popover.hasAttribute('data-no-focus')) {
	assert_not_equals(document.activeElement, priorFocus, 'prior element should not get focus when the popover is removed from the document');
	}
	document.body.appendChild(popover);

	// Show a modal dialog:
	priorFocus.focus();
	popover.showPopover();
	assert_equals(document.activeElement, expectedFocusedElement, `${testName} activated by popover.showPopover()`);
	const dialog = document.body.appendChild(document.createElement('dialog'));
	dialog.showModal();
	assert_false(popover.matches(':popover-open'), 'Opening a modal dialog should hide the popover');
	assert_not_equals(document.activeElement, priorFocus, 'prior element should not get focus when a modal dialog is shown');
	assert_false(isElementVisible(popover));
	dialog.close();
	dialog.remove();

	// Use an activating element:
	const button = addInvoker(t, popover);
	priorFocus.focus();
	button.click();
	assert_true(popover.matches(':popover-open'));
	assert_equals(document.activeElement, expectedFocusedElement, `${testName} activated by button.click()`);

	// Make sure Escape works in the invoker case:
	await sendEscape();
	assert_equals(document.activeElement, priorFocus, 'prior element should get focus after Escape (via invoker)');
	assert_false(isElementVisible(popover));

	// Make sure we can directly focus the (already open) popover:
	priorFocus.focus();
	button.click();
	assert_true(popover.matches(':popover-open'));
	assert_equals(document.activeElement, expectedFocusedElement, `${testName} activated by button.click()`);
	popover.focus();
	assert_equals(document.activeElement, popover.hasAttribute('tabindex') \|\| popover.tagName === 'DIALOG' ? popover : expectedFocusedElement, `${testName} directly focus with popover.focus()`);
	button.click(); // Button is set to toggle the popover
	assert_false(popover.matches(':popover-open'));
	assert_equals(document.activeElement, priorFocus, 'prior element should get focus on button-toggled hide');
	assert_false(isElementVisible(popover));
	}, "Popover focus test: " + testName);

	promise_test(async t => {
	const priorFocus = addPriorFocus(t);
	assert_false(popover.matches(':popover-open'), 'popover should start out hidden');
	let button = addInvoker(t, popover);
	assert_equals(button.getAttribute('popovertarget'), popover.id, 'This test assumes the button uses `popovertarget`.');
	assert_not_equals(button, priorFocus, 'Stranger things have happened');
	assert_false(popover.contains(button), 'Start with a non-contained button');
	priorFocus.focus();
	assert_equals(document.activeElement, priorFocus);
	popover.showPopover();
	assert_true(popover.matches(':popover-open'));
	await clickOn(button); // This will not light dismiss, but will "toggle" the popover.
	assert_false(popover.matches(':popover-open'));
	assert_equals(document.activeElement, button, 'focus should move to the button when clicked, and should stay there when the popover closes');
	assert_false(isElementVisible(popover));

	// Same thing, but the button is contained within the popover
	button.setAttribute('popovertarget', popover.id);
	button.setAttribute('popovertargetaction', 'hide');
	popover.appendChild(button);
	t.add_cleanup(() => button.remove());
	priorFocus.focus();
	popover.showPopover();
	assert_true(popover.matches(':popover-open'));
	const changesFocus = !popover.hasAttribute('data-no-focus');
	if (changesFocus) {
	assert_not_equals(document.activeElement, priorFocus, 'focus should shift for this element');
	}
	await clickOn(button);
	assert_false(popover.matches(':popover-open'), 'clicking button should hide the popover');
	assert_equals(document.activeElement, priorFocus, 'Contained button should return focus to the previously focused element');
	assert_false(isElementVisible(popover));

	// Same thing, but the button is unrelated (no popovertarget)
	button = document.createElement('button');
	button.setAttribute("tabindex", "0");
	document.body.appendChild(button);
	priorFocus.focus();
	popover.showPopover();
	assert_true(popover.matches(':popover-open'));
	await clickOn(button); // This will light dismiss the popover, focus the prior focus, then focus this button.
	assert_false(popover.matches(':popover-open'), 'clicking button should hide the popover (via light dismiss)');
	assert_equals(document.activeElement, button, 'Focus should go to unrelated button on light dismiss');
	assert_false(isElementVisible(popover));
	}, "Popover button click focus test: " + testName);

	promise_test(async t => {
	if (popover.hasAttribute('data-no-focus')) {
	// This test only applies if the popover changes focus
	return;
	}
	const priorFocus = addPriorFocus(t);
	assert_false(popover.matches(':popover-open'), 'popover should start out hidden');

	// Move the prior focus out of the document
	priorFocus.focus();
	popover.showPopover();
	assert_true(popover.matches(':popover-open'));
	const newFocus = document.activeElement;
	assert_not_equals(newFocus, priorFocus, 'focus should shift for this element');
	priorFocus.remove();
	assert_equals(document.activeElement, newFocus, 'focus should not change when prior focus is removed');
	popover.hidePopover();
	assert_not_equals(document.activeElement, priorFocus, 'focused element has been removed');
	assert_false(isElementVisible(popover));
	document.body.appendChild(priorFocus); // Put it back

	// Move the prior focus inside the (already open) popover
	priorFocus.focus();
	popover.showPopover();
	assert_true(popover.matches(':popover-open'));
	assert_false(popover.contains(priorFocus), 'Start with a non-contained prior focus');
	popover.appendChild(priorFocus); // Move inside the popover
	assert_true(popover.contains(priorFocus));
	assert_true(popover.matches(':popover-open'), 'popover should stay open');
	popover.hidePopover();
	assert_false(isElementVisible(popover));
	assert_not_equals(document.activeElement, priorFocus, 'focused element is display:none inside the popover');
	document.body.appendChild(priorFocus); // Put it back
	}, "Popover corner cases test: " + testName);
	}

	document.querySelectorAll('body > [popover]').forEach(popover => activateAndVerify(popover));
	</script>