Add a test that <popup> is not keyboard focusable.

This test already passes. It was left off of the [1] CL which implemented focus behavior for <popup>. [1] https://chromium-review.googlesource.com/c/chromium/src/+/2869490 Bug: 1168738 Change-Id: I057d66a348e2db9e278e2c6f04b963d461faeabd Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2885545 Commit-Queue: Mason Freed <[email protected]> Commit-Queue: Joey Arhar <[email protected]> Auto-Submit: Mason Freed <[email protected]> Reviewed-by: Joey Arhar <[email protected]> Cr-Commit-Position: refs/heads/master@{#881361}
web-platform-tests · May 11, 2021 · f01bea6 · f01bea6
1 parent 4578bac
commit f01bea6
Showing 1 changed file with 44 additions and 0 deletions.
diff --git a/...nteractive-elements/the-popup-element/popup-element-not-keyboard-focusable.tentative.html b/...nteractive-elements/the-popup-element/popup-element-not-keyboard-focusable.tentative.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8" />
+<title>Popup keyboard focus behaviors</title>
+<link rel="author" href="mailto:[email protected]">
+<link rel=help href="https://open-ui.org/components/popup.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>
+
+<button id=firstfocus>Button 1</button>
+<popup>
+  <p>This is a popup without a focusable element</p>
+</popup>
+<button id=secondfocus>Button 2</button>
+
+<script>
+promise_test(async () => {
+  const b1 = document.getElementById('firstfocus');
+  const b2 = document.getElementById('secondfocus');
+  const popup = document.querySelector('popup');
+  b1.focus();
+  assert_equals(document.activeElement,b1);
+  popup.show();
+  assert_true(popup.open);
+  assert_equals(document.activeElement,b1);
+  // Tab once
+  await new test_driver.send_keys(document.body,'\uE004'); // Tab
+  assert_equals(document.activeElement, b2, 'Keyboard focus should skip the open popup');
+  popup.hide();
+
+  // Add a focusable button to the popup and make sure we can focus that
+  const button = document.createElement('button');
+  popup.appendChild(button);
+  b1.focus();
+  popup.show();
+  assert_equals(document.activeElement,b1);
+  // Tab once
+  await new test_driver.send_keys(document.body,'\uE004'); // Tab
+  assert_equals(document.activeElement, button, 'Keyboard focus should go to the contained button');
+  popup.hide();
+}, "Popup should not be keyboard focusable");
+</script>