focusVisible.html - mozsearch

Enable keyboard shortcuts

This test has a WPT meta file that expects 4 subtest issues.
This WPT test may be referenced by the following Test IDs:
- /html/interaction/focus/processing-model/focusVisible.html - WPT Dashboard Interop Dashboard

<!doctype html>

<title>focus(options) - focusVisible</title>

<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>

<style>

  div {

    height: 10px;

    border: 1px solid black;

</style>

<button>ABC</button>

<input>

<div id="contenteditable" contenteditable></div>

<div id="tabindex" tabindex=0></div>

<div id="not_focusable"></div>

<div id="reset_focus" tabindex=0></div>

<script>

const reset_focus = document.getElementById("reset_focus");

async function check_focus_visible(element, options, { shouldBeVisible, shouldBeFocused }) {

  // Reset focus by clicking on a div, which should not show focus rings.

  await test_driver.click(reset_focus);

  assert_equals(document.activeElement, reset_focus, "Reset should be focused");

  assert_true(reset_focus.matches(":focus"), "Clicking focusable div should match :focus");

  assert_false(reset_focus.matches(":focus-visible"), "Clicking focusable div shouldn't match :focus-visible");

  element.focus(options);

  assert_equals(document.activeElement, shouldBeFocused ? element : reset_focus, "activeElement");

  assert_equals(element.matches(":focus"), shouldBeFocused, ":focus");

  assert_equals(element.matches(":focus-visible"), shouldBeVisible, ":focus-visible");

for (let selector of ["button", "input", "#contenteditable", "#tabindex", "#not_focusable"]) {

  promise_test(async function() {

    const takesKeyboardInput = selector == "#contenteditable" || selector == "input";

    const shouldBeFocused = selector != "#not_focusable";

    const element = document.querySelector(selector);

    await check_focus_visible(element, {}, {

      shouldBeVisible: takesKeyboardInput,

      shouldBeFocused,

});

    await check_focus_visible(element, { focusVisible: true }, {

      shouldBeVisible: shouldBeFocused,

      shouldBeFocused,

});

    await check_focus_visible(element, { focusVisible: false }, {

      shouldBeVisible: false,

      shouldBeFocused,

});

  }, "FocusOptions.focusVisible: " + selector);

</script>