citation dialog: restore arrowDown on bubbles opening details popup (#5123)

- restore earlier behavior of arrowDown on a bubble
opening itemDetails popup
- remove arrowUp closing the popup
- remove arrow navigation between rows of bubbles on arrowUp/down
- remove no longer needed edge case of arrowDown
handling on the last row of bubbles

Fixes: #5118
This commit is contained in:
abaevbog 2025-03-17 20:27:27 -07:00 committed by GitHub
parent fef389290a
commit d780eed06f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 4 additions and 18 deletions

View file

@ -288,9 +288,9 @@
input.value += event.key;
input.dispatchEvent(new Event('input', { bubbles: true }));
}
// Space on bubble simulates a click
if (event.key == " ") {
event.target.click();
// Space or arrowDown on a bubble open item details popup
if (event.key == " " || event.key == "ArrowDown") {
Utils.notifyDialog("show-details-popup", { dialogReferenceID: bubble.getAttribute("dialogReferenceID") });
event.preventDefault();
event.stopPropagation();
}
@ -302,18 +302,6 @@
if (event.key == "End") {
this._body.lastChild.focus();
}
// Navigate bubble rows on arrow up/down
if (["ArrowUp", "ArrowDown"].includes(event.key)) {
let { x, y, width } = bubble.getBoundingClientRect();
let nextBubble = Utils.getLastBubbleBeforePoint(x + (width / 2), event.key == "ArrowUp" ? y - 25 : y + 30);
// Focus the next bubble if it exists. Otherwise, event will propagate to be handled
// by keyboardHandler.js of citationDialog.js
if (nextBubble) {
nextBubble.focus();
event.preventDefault();
event.stopPropagation();
}
}
}
// Citation dialog will record that the item is removed and the bubble will be gone after refresh()

View file

@ -150,10 +150,8 @@ export class CitationDialogKeyboardHandler {
}
else if (current || event.key == "ArrowDown") {
// Arrow down from input will just change the selected item without moving focus
// Arrow down from a bubble in the lowest row will move focus
let shouldFocus = event.target.classList.contains("bubble");
let multiSelect = event.shiftKey;
this._navigateGroup({ group, current, forward: event.key == "ArrowDown", shouldSelect: true, shouldFocus, multiSelect });
this._navigateGroup({ group, current, forward: event.key == "ArrowDown", shouldSelect: true, shouldFocus: false, multiSelect });
}
handled = true;
}