dynamic-changes.html

Enable keyboard shortcuts

This test has a WPT meta file that expects 1 subtest issues.
This WPT test may be referenced by the following Test IDs:
- /html/interaction/focus/focusgroup/tentative/sequential-navigation/dynamic-changes.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<meta charset="utf-8">

<title>HTML Test: focusgroup - Dynamic DOM and focusgroup-entry-priority changes</title>

<link rel="author" title="Microsoft" href="http://www.microsoft.com/">

<link rel="help" href="https://open-ui.org/components/scoped-focusgroup.explainer/">

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<script src="/resources/testdriver.js"></script>

<script src="/resources/testdriver-vendor.js"></script>

<script src="/resources/testdriver-actions.js"></script>

<script src="/shadow-dom/focus-navigation/resources/focus-utils.js"></script>

<script src="../resources/focusgroup-utils.js"></script>

<!-- Test focusgroup-entry-priority changes during navigation -->

<div id=before1 tabindex=0>Before test 1</div>

<div id=fg1 focusgroup="toolbar no-memory">

  <span id=item1 tabindex=0>Item 1</span>

  <span id=item2 tabindex=0>Item 2</span>

</div>

<div id=after1 tabindex=0>After test 1</div>

<!-- Test disabled element changes -->

<div id=before2 tabindex=0>Before test 2</div>

<div id=fg2 focusgroup="toolbar no-memory">

  <button id=btn1>Button 1</button>

  <button id=btn2 disabled>Button 2</button>

</div>

<div id=after2 tabindex=0>After test 2</div>

<script>

  promise_test(async t => {

    document.getElementById("before1").focus();

    await navigateFocusForward();

    assert_equals(document.activeElement, document.getElementById("item1"),

                  "First item selected as entry element initially (tree order)");

    document.getElementById("item2").setAttribute("focusgroup-entry-priority", "");

    document.getElementById("before1").focus();

    await navigateFocusForward();

    assert_equals(document.activeElement, document.getElementById("item2"),

                  "After adding focusgroup-entry-priority, new priority is respected");

  }, "Dynamic focusgroup-entry-priority changes affect entry element selection");

  promise_test(async t => {

    document.getElementById("before2").focus();

    await navigateFocusForward();

    assert_equals(document.activeElement, document.getElementById("btn1"),

                  "Tab skips disabled button");

    document.getElementById("btn2").removeAttribute("disabled");

    document.getElementById("before2").focus();

    await navigateFocusForward();

    assert_equals(document.activeElement, document.getElementById("btn1"),

                  "First enabled button selected in tree order");

  }, "Enabling disabled elements makes them available for tab stop");

</script>