Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-08 19:04:45 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1597316 - Don't scroll login list on arrows, allow holding an arrow to navigate r=MattN

Browse Source 
Differential Revision: https://phabricator.services.mozilla.com/D53659

--HG--
extra : moz-landing-system : lando
This commit is contained in:
Mark Striemer 2019-11-18 23:48:26 +00:00
parent 1a348de365
commit b45de81c28
1 changed files with 55 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

99
browser/components/aboutlogins/content/components/login-list.js
View File

@ -261,24 +261,28 @@ export default class LoginList extends HTMLElement {
}
break;
}
case "keyup":
case "keydown": {
this._handleTabbingToExternalElements(event);
// Since Space will select a login in the list, prevent it from
// also scrolling the list.
if (
this.shadowRoot.activeElement &&
this.shadowRoot.activeElement.closest("ol") &&
event.key == " "
this.shadowRoot.activeElement.closest("ol")
) {
event.preventDefault();
// Since Space, ArrowUp and ArrowDown will perform actions, prevent
// them from also scrolling the list.
if (
event.type == "keydown" &&
(event.key == " " ||
event.key == "ArrowUp" ||
event.key == "ArrowDown")
) {
event.preventDefault();
}
this._handleKeyboardNavWithinList(event);
}
break;
}
case "keyup": {
this._handleKeyboardNavWithinList(event);
break;
}
}
}
@ -549,45 +553,52 @@ export default class LoginList extends HTMLElement {
while (nextItem && nextItem.hidden) {
nextItem = nextItem.nextElementSibling;
}
switch (event.key) {
case "ArrowDown": {
if (!nextItem) {
if (event.type == "keydown") {
switch (event.key) {
case "ArrowDown": {
if (!nextItem) {
return;
}
newlyFocusedItem = nextItem;
break;
}
case "ArrowLeft": {
let item = isLTR ? previousItem : nextItem;
if (!item) {
return;
}
newlyFocusedItem = item;
break;
}
case "ArrowRight": {
let item = isLTR ? nextItem : previousItem;
if (!item) {
return;
}
newlyFocusedItem = item;
break;
}
case "ArrowUp": {
if (!previousItem) {
return;
}
newlyFocusedItem = previousItem;
break;
}
default:
return;
}
} else if (event.type == "keyup") {
switch (event.key) {
case " ":
case "Enter": {
event.preventDefault();
activeDescendant.click();
return;
}
newlyFocusedItem = nextItem;
break;
}
case "ArrowLeft": {
let item = isLTR ? previousItem : nextItem;
if (!item) {
default:
return;
}
newlyFocusedItem = item;
break;
}
case "ArrowRight": {
let item = isLTR ? nextItem : previousItem;
if (!item) {
return;
}
newlyFocusedItem = item;
break;
}
case "ArrowUp": {
if (!previousItem) {
return;
}
newlyFocusedItem = previousItem;
break;
}
case " ":
case "Enter": {
event.preventDefault();
activeDescendant.click();
return;
}
default:
return;
}
event.preventDefault();
this._list.setAttribute("aria-activedescendant", newlyFocusedItem.id);