show-modal-focusing-steps.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /html/semantics/interactive-elements/the-dialog-element/show-modal-focusing-steps.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<html>

<head>

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

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

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

<script>

promise_test(() => {

  return waitUntilLoadedAndAutofocused().then(() => {

        outerButton = document.getElementById('outer-button');

        assert_equals(document.activeElement, outerButton);

        // Test that focus goes to the dialog if the dialog has no focusable elements

        var outerDialog = document.getElementById('outer-dialog');

        outerDialog.showModal();

        assert_equals(document.activeElement, outerDialog);

        // Test that an autofocus element in the dialog gets focus.

        var dialog = document.getElementById('dialog');

        dialog.showModal();

        autofocusButton = document.getElementById('autofocus-button');

        assert_equals(document.activeElement, autofocusButton);

        dialog.close();

        // ... or else first focusable element in the dialog gets focus.

        autofocusButton.parentNode.removeChild(autofocusButton);

        dialog.showModal();

        firstButton = document.getElementById('first-button');

        assert_equals(document.activeElement, firstButton);

        dialog.close();

        // ... or else the dialog itself gets focus.;

        var buttons = dialog.querySelectorAll('button');

        for (var i = 0; i < buttons.length; ++i)

            buttons[i].hidden = true;

        dialog.showModal();

        assert_equals(document.activeElement, dialog);

        dialog.close();

        document.getElementById('outer-dialog').close();

});

}, "focus when a modal dialog is opened");

</script>

</head>

<body>

<button id="outer-button" autofocus></button>

<dialog id="outer-dialog">

    <dialog id="dialog" tabindex=0>

        <button disabled></button>

        <dialog>

            <button autofocus></button>

        </dialog>

        <button id="first-button"></button>

        <div>

            <span>

                <button id="autofocus-button" autofocus></button>

            </span>

        </div>

        <button id="final-button"></button>

    </dialog>

</dialog>

</body>

</html>