mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-17 15:25:52 +00:00
Bug 1712869 - Set keyboard focus on the correct button for each screen of the upgrade modal r=Mardak
Differential Revision: https://phabricator.services.mozilla.com/D117364
This commit is contained in:
parent
a5873d50c0
commit
ce4e4163cb
@ -141,6 +141,8 @@ function onLoad(ready) {
|
||||
|
||||
// Move to the next screen and perform screen-specific behavior.
|
||||
const strings = await SCREEN_STRINGS[++current];
|
||||
// Set the correct target for keyboard focus.
|
||||
let toFocus = primary;
|
||||
switch (current) {
|
||||
// Handle initial / first screen setup.
|
||||
case 0:
|
||||
@ -221,7 +223,8 @@ function onLoad(ready) {
|
||||
|
||||
// Prepare the initial theme selection and wait for theme button clicks.
|
||||
const { id, swatch } = await gPrevTheme;
|
||||
themes.children[THEME_IDS.indexOf(id)].checked = true;
|
||||
toFocus = themes.children[THEME_IDS.indexOf(id)];
|
||||
toFocus.checked = true;
|
||||
themes.addEventListener("click", ({ target: button }) => {
|
||||
// Ignore clicks on whitespace of the container around theme buttons.
|
||||
if (button.parentNode === themes) {
|
||||
@ -285,8 +288,8 @@ function onLoad(ready) {
|
||||
// Wait for initial translations to load before getting sizing information.
|
||||
await document.l10n.translateElements(translatedElements);
|
||||
requestAnimationFrame(() => {
|
||||
// Ensure the primary button is focused on each screen.
|
||||
primary.focus({ preventFocusRing: true });
|
||||
// Ensure the correct button is focused on each screen.
|
||||
toFocus.focus({ preventFocusRing: true });
|
||||
|
||||
// Save first screen height, so later screens can flex and anchor content.
|
||||
if (current === 0) {
|
||||
|
@ -163,6 +163,36 @@ add_task(async function theme_change() {
|
||||
theme.disable();
|
||||
});
|
||||
|
||||
add_task(async function keyboard_focus_okay() {
|
||||
mockShell({ canPin: true });
|
||||
|
||||
await showAndWaitForDialog(async win => {
|
||||
await BrowserTestUtils.waitForEvent(win, "ready");
|
||||
Assert.equal(
|
||||
win.document.activeElement,
|
||||
win.document.getElementById("primary"),
|
||||
"Primary button has focus"
|
||||
);
|
||||
|
||||
win.document.getElementById("primary").click();
|
||||
await BrowserTestUtils.waitForEvent(win, "ready");
|
||||
Assert.equal(
|
||||
win.document.activeElement,
|
||||
win.document.getElementById("primary"),
|
||||
"Primary button has focus"
|
||||
);
|
||||
|
||||
win.document.getElementById("primary").click();
|
||||
await BrowserTestUtils.waitForEvent(win, "ready");
|
||||
Assert.equal(
|
||||
win.document.activeElement,
|
||||
win.document.querySelectorAll("[name=theme]")[0],
|
||||
"First theme has focus"
|
||||
);
|
||||
win.close();
|
||||
});
|
||||
});
|
||||
|
||||
add_task(async function skip_screens() {
|
||||
Services.telemetry.clearEvents();
|
||||
const mock = mockShell({ isPinned: true });
|
||||
|
Loading…
Reference in New Issue
Block a user