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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
|
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
"use strict";
/**
* Ensure navigating through Datepicker using keyboard after a date
* has already been selected will keep the keyboard focus
* when reaching a different month (bug 1804466).
*/
add_task(async function test_focus_after_selection() {
info(
`Ensure navigating through Datepicker using keyboard after a date has already been selected will not lose keyboard focus when reaching a different month.`
);
// Set "prefers-reduced-motion" media to "reduce"
// to avoid intermittent scroll failures (1803612, 1803687)
await SpecialPowers.pushPrefEnv({
set: [["ui.prefersReducedMotion", 1]],
});
Assert.ok(
matchMedia("(prefers-reduced-motion: reduce)").matches,
"The reduce motion mode is active"
);
const inputValue = "2022-12-12";
const prevMonth = "2022-10-01";
const nextYear = "2023-11-01";
const nextYearAfter = "2024-01-01";
await helper.openPicker(
`data:text/html, <input type="date" value=${inputValue}>`
);
let browser = helper.tab.linkedBrowser;
info("Test behavior when selection is done on the calendar grid");
// Move focus from 2022-12-12 to 2022-10-24 by week
// Changing 2 month views along the way:
EventUtils.synthesizeKey("KEY_ArrowUp", { repeat: 7 });
Assert.equal(
helper.getElement(MONTH_YEAR).textContent,
DATE_FORMAT(new Date(prevMonth)),
"The calendar is updated to show the second previous month (2022-10)."
);
// 2022-10-24:
const focusedDayEl = getDayEl(24);
Assert.ok(
focusedDayEl.matches(":focus"),
"An expected focusable day within a calendar grid is focused"
);
let closed = helper.promisePickerClosed();
// Make a selection and close the picker
EventUtils.synthesizeKey(" ", {});
// Check the focus is returned to main browser window when a panel is closed
await SpecialPowers.spawn(browser, [], async () => {
const body = content.document.body;
// Testing the focus position within content:
Assert.deepEqual(
body,
content.document.activeElement,
`The main content's <body> received programmatic focus`
);
});
await closed;
Assert.equal(
helper.panel.state,
"closed",
"Panel is closed when the selection is made"
);
let ready = helper.waitForPickerReady();
// Move the keyboard focus to the input field to reopen the picker
EventUtils.synthesizeKey("KEY_Tab", {});
// Check the focus is returned to the Calendar button
await SpecialPowers.spawn(browser, [], async () => {
const input = content.document.querySelector("input");
// Testing the focus position within content:
Assert.deepEqual(
input,
content.document.activeElement,
`The input field includes programmatic focus`
);
});
// Reopen the picker
EventUtils.synthesizeKey(" ", {});
await ready;
Assert.equal(helper.panel.state, "open", "Panel is reopened");
// Move focus from 2022-10-24 to 2022-12-12 by week
// Changing 2 month views along the way:
EventUtils.synthesizeKey("KEY_ArrowDown", { repeat: 7 });
// 2022-12-12:
const focusedDay = getDayEl(12);
const monthYearEl = helper.getElement(MONTH_YEAR);
await BrowserTestUtils.waitForMutationCondition(
monthYearEl,
{ childList: true },
() => {
return monthYearEl.textContent == DATE_FORMAT(new Date(inputValue));
},
`Should change to December 2022, instead got ${
helper.getElement(MONTH_YEAR).textContent
}`
);
Assert.equal(
focusedDay,
helper.getElement(DAYS_VIEW).querySelector('[tabindex="0"]'),
"There is a focusable day within a calendar grid"
);
Assert.ok(
focusedDay.matches(":focus"),
"The focusable day within a calendar grid is focused"
);
info("Test behavior when selection is done on the month-year panel");
// Move focus to the month-year toggle button and open it:
EventUtils.synthesizeKey("KEY_Tab", { repeat: 3 });
EventUtils.synthesizeKey(" ");
// Move focus to the month spin button and change its value
// from December to November:
EventUtils.synthesizeKey("KEY_Tab");
EventUtils.synthesizeKey("KEY_ArrowUp");
// Move focus to the year spin button and change its value
// from 2022 to 2023:
EventUtils.synthesizeKey("KEY_Tab");
EventUtils.synthesizeKey("KEY_ArrowDown");
await BrowserTestUtils.waitForMutationCondition(
monthYearEl,
{ childList: true },
() => {
return monthYearEl.textContent == DATE_FORMAT(new Date(nextYear));
},
`Should change to November 2023, instead got ${
helper.getElement(MONTH_YEAR).textContent
}`
);
// Make a selection, close the month picker
EventUtils.synthesizeKey(" ", {});
Assert.ok(
BrowserTestUtils.is_hidden(helper.getElement(MONTH_YEAR_VIEW)),
"Month-year selection panel is not visible"
);
// Move focus from 2023-11-12 to 2024-01-07 by week
// Changing 2 month views along the way:
EventUtils.synthesizeKey("KEY_ArrowDown", { repeat: 8 });
// 2024-01-07:
const newFocusedDay = getDayEl(7);
Assert.equal(
helper.getElement(MONTH_YEAR).textContent,
DATE_FORMAT(new Date(nextYearAfter)),
"The calendar is updated to show another month (2024-01)."
);
Assert.equal(
newFocusedDay,
helper.getElement(DAYS_VIEW).querySelector('[tabindex="0"]'),
"There is a focusable day within a calendar grid"
);
Assert.ok(
newFocusedDay.matches(":focus"),
"The focusable day within a calendar grid is focused"
);
await helper.tearDown();
await SpecialPowers.popPrefEnv();
});
|
