Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-11-27 14:52:16 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1909885 - Add shift tab listeners for reader mode narrator, theme menu, and text menu. r=Gijs

Browse Source 
Remove redundant lines, fix test to correctly check focus in text layout menu

Differential Revision: https://phabricator.services.mozilla.com/D220969
This commit is contained in:
schu96 2024-09-17 14:06:51 +00:00
parent 6a003eeb71
commit b50c24990f
4 changed files with 71 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
toolkit/components/narrate/NarrateControls.sys.mjs
View File

@ -235,7 +235,7 @@ NarrateControls.prototype = {
this._onButtonClick(evt);
break;
case "keydown":
if (evt.key === "Tab" && !evt.shiftKey) {
if (evt.key === "Tab") {
this._handleFocus(evt);
}
break;
@ -436,19 +436,25 @@ NarrateControls.prototype = {
_handleFocus(e) {
let classList = e.target.classList;
if (classList.contains("option") || classList.contains("select-toggle")) {
e.preventDefault();
} else {
return;
}
let narrateDropdown = this._doc.querySelector(".narrate-dropdown");
if (narrateDropdown.classList.contains("speaking")) {
let skipPrevious = this._doc.querySelector(".narrate-skip-previous");
skipPrevious.focus();
} else {
let startStop = this._doc.querySelector(".narrate-start-stop");
startStop.focus();
if (!e.shiftKey) {
if (classList.contains("option") || classList.contains("select-toggle")) {
e.preventDefault();
} else {
return;
}
if (narrateDropdown.classList.contains("speaking")) {
let skipPrevious = this._doc.querySelector(".narrate-skip-previous");
skipPrevious.focus();
} else {
let startStop = this._doc.querySelector(".narrate-start-stop");
startStop.focus();
}
}
let firstFocusableButton = narrateDropdown.querySelector("button:enabled");
if (e.target === firstFocusableButton) {
e.preventDefault();
narrateDropdown.querySelector(".select-toggle").focus();
}
},
};

27
toolkit/components/reader/AboutReader.sys.mjs
View File

@ -1276,6 +1276,16 @@ AboutReader.prototype = {
textFirstFocusable.focus();
}
});
textFirstFocusable.addEventListener("keydown", e => {
if (e.key === "Tab" && e.shiftKey) {
e.preventDefault();
if (accordion.hasAttribute("open")) {
textResetButton.focus();
} else {
advancedHeader.focus();
}
}
});
},
_setColorScheme(newColorScheme) {
@ -1867,6 +1877,23 @@ AboutReader.prototype = {
customThemeFirstFocusable.focus();
}
});
defaultThemeFirstFocusable.addEventListener("keydown", e => {
if (e.key === "Tab" && e.shiftKey) {
e.preventDefault();
let themeLabels = themeButtons.getElementsByTagName("label");
for (const label of themeLabels) {
if (label.hasAttribute("checked")) {
doc.querySelector(`.${label.className}`).focus();
}
}
}
});
customThemeFirstFocusable.addEventListener("keydown", e => {
if (e.key === "Tab" && e.shiftKey) {
e.preventDefault();
themeResetButton.focus();
}
});
},
_toggleDropdownClicked(event) {

9
toolkit/components/reader/tests/browser/browser_readerMode_colorSchemePref.js
View File

@ -99,6 +99,11 @@ async function testColorsFocus() {
defaultTab,
"Focus moves back to the Default tab"
);
let themeInput = doc.querySelector("#radio-itemauto-button");
defaultTab.focus();
EventUtils.synthesizeKey("KEY_Tab", { shiftKey: true }, content);
is(doc.activeElement, themeInput, "Focus moves to selected theme");
});
}
);
@ -130,6 +135,10 @@ async function testColorsFocus() {
EventUtils.synthesizeKey("KEY_Tab", {}, content);
is(doc.activeElement, customTab, "Focus moves back to the Custom tab");
customTab.focus();
EventUtils.synthesizeKey("KEY_Tab", { shiftKey: true }, content);
is(doc.activeElement, resetButton, "Focus moves to Reset theme button");
});
}
);

17
toolkit/components/reader/tests/browser/browser_readerMode_textLayoutPref.js
View File

@ -168,9 +168,16 @@ async function testTextLayoutFocus() {
"Focus moves back to the first focusable button"
);
firstFocusableElement.focus();
EventUtils.synthesizeKey("KEY_Tab", { shiftKey: true }, content);
is(
doc.activeElement,
advancedHeader,
"Focus moves to last focusable button"
);
// Expand the advanced layout accordion.
advancedHeader.click();
let resetButton = doc.querySelector(".text-layout-reset-button");
resetButton.focus();
@ -180,6 +187,14 @@ async function testTextLayoutFocus() {
firstFocusableElement,
"Focus moves back to the first focusable button"
);
firstFocusableElement.focus();
EventUtils.synthesizeKey("KEY_Tab", { shiftKey: true }, content);
is(
doc.activeElement,
resetButton,
"Focus moves from first focusable button to last focusable button"
);
});
}
);