1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
|
<!DOCTYPE HTML>
<html>
<!--
Test the confirmation-dialog component
-->
<head>
<meta charset="utf-8">
<title>Test the confirmation-dialog component</title>
<script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
<script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>
<script type="module" src="chrome://browser/content/aboutlogins/components/confirmation-dialog.mjs"></script>
<script src="aboutlogins_common.js"></script>
<link rel="stylesheet" href="/tests/SimpleTest/test.css"/>
</head>
<body>
<p id="display">
</p>
<div id="content" style="display: none">
<iframe id="templateFrame" src="chrome://browser/content/aboutlogins/aboutLogins.html"
sandbox="allow-same-origin"></iframe>
</div>
<pre id="test">
</pre>
<script>
/** Test the confirmation-dialog component **/
let options = {
title: "confirm-delete-dialog-title",
message: "confirm-delete-dialog-message",
confirmButtonLabel: "confirm-delete-dialog-confirm-button"
};
let cancelButton, confirmButton, gConfirmationDialog;
add_setup(async () => {
let templateFrame = document.getElementById("templateFrame");
let displayEl = document.getElementById("display");
await importDependencies(templateFrame, displayEl);
gConfirmationDialog = document.createElement("confirmation-dialog");
displayEl.appendChild(gConfirmationDialog);
ok(gConfirmationDialog, "The dialog should exist");
cancelButton = gConfirmationDialog.shadowRoot.querySelector(".cancel-button");
confirmButton = gConfirmationDialog.shadowRoot.querySelector(".confirm-button");
ok(cancelButton, "The cancel button should exist");
ok(confirmButton, "The confirm button should exist");
});
add_task(async function test_escape_key_to_cancel() {
gConfirmationDialog.show(options);
ok(!gConfirmationDialog.hidden, "The dialog should be visible");
sendKey("ESCAPE");
ok(gConfirmationDialog.hidden, "The dialog should be hidden after hitting Escape");
gConfirmationDialog.hide();
});
add_task(async function test_initial_focus() {
gConfirmationDialog.show(options);
ok(!gConfirmationDialog.hidden, "The dialog should be visible");
is(gConfirmationDialog.shadowRoot.activeElement, confirmButton,
"After initially opening the dialog, the confirm button should be focused");
gConfirmationDialog.hide();
});
add_task(async function test_tab_focus() {
gConfirmationDialog.show(options);
ok(!gConfirmationDialog.hidden, "The dialog should be visible");
sendKey("TAB");
is(gConfirmationDialog.shadowRoot.activeElement, cancelButton,
"After opening the dialog and tabbing once, the cancel button should be focused");
gConfirmationDialog.hide();
});
add_task(async function test_enter_key_to_cancel() {
let showPromise = gConfirmationDialog.show(options);
ok(!gConfirmationDialog.hidden, "The dialog should be visible");
sendKey("RETURN");
try {
await showPromise;
ok(true, "The dialog Promise should resolve after hitting Return with the confirm button focused");
} catch (ex) {
ok(false, "The dialog Promise should not reject after hitting Return with the confirm button focused");
}
});
add_task(async function test_enter_key_to_confirm() {
let showPromise = gConfirmationDialog.show(options);
ok(!gConfirmationDialog.hidden, "The dialog should be visible");
sendKey("TAB");
sendKey("RETURN");
try {
await showPromise;
ok(false, "The dialog Promise should not resolve after hitting Return with the cancel button focused");
} catch (ex) {
ok(true, "The dialog Promise should reject after hitting Return with the cancel button focused");
}
});
add_task(async function test_dialog_focus_trap() {
let displayEl = document.getElementById("display");
let displayElChildSpan = document.createElement("span");
displayElChildSpan.tabIndex = 0;
displayElChildSpan.id = "display-child";
displayEl.appendChild(displayElChildSpan);
gConfirmationDialog.show(options);
ok(!gConfirmationDialog.hidden, "The dialog should be visible");
ok(displayElChildSpan.tabIndex === -1, "The tabIndex value for elements with a hardcoded tabIndex attribute should be reset to '-1'.")
ok(displayElChildSpan.dataset.oldTabIndex === "0", "Existing tabIndex values should be stored in `dataset.oldTabIndex`.")
const isActiveElemDialogOrHTMLorBODY = (elemTagName) => {
return (["HTML", "BODY", "CONFIRMATION-DIALOG"].includes(elemTagName));
}
let iterator = 0;
while(iterator < 20) {
sendKey("TAB");
isnot(document.activeElement.id, "display-child", "The display-child element should not gain focus when the dialog is showing");
ok(isActiveElemDialogOrHTMLorBODY(document.activeElement.tagName), "The confirmation-dialog should always have focus when the dialog is showing");
iterator++;
}
});
</script>
</body>
</html>
|
