minor fixes to keyboard navigation

1. Swap focus direction for ArrowUp and ArrowDown events when applicable.
ArrowUp = Shift-Tab, ArrowDown - Tab.
2. Remove ArrowLeft, ArrowRight event listeners from quicksearch menus
to not prevent cursor navigation within the actual text field.
3. Tweaks to fix advanced search mode from quicksearch when " is typed.
This commit is contained in:
abaevbog 2023-11-03 18:14:50 -04:00 committed by Dan Stillman
parent 6bc97a6af6
commit 71af85adb3
2 changed files with 7 additions and 11 deletions

View file

@ -160,14 +160,14 @@ var ZoteroPane = new function()
// function to handle actual focusing based on a given event
// and a mapping of event targets + keys to the focus destinations
let moveFocus = function (actionsMap, event, verticalArrowIsTab = false) {
var key = event.key;
if (key === 'Tab' && modifierIsNotShift(event)) return;
var key = event.key;
if (event.shiftKey) {
key = 'Shift' + key;
}
// ArrowUp or ArrowDown act the same way as as
// tab/shift-tab unles it is on a menu, in which case
// shift-tab/tab unles it is on a menu, in which case
// it'll open the menu popup
let isMenu = event.target.getAttribute('type') === 'menu'
|| event.originalTarget?.getAttribute('type') === 'menu';
@ -175,10 +175,10 @@ var ZoteroPane = new function()
return;
}
if (verticalArrowIsTab && key == 'ArrowUp') {
key = 'Tab';
key = 'ShiftTab';
}
else if (verticalArrowIsTab && key == 'ArrowDown') {
key = 'ShiftTab';
key = 'Tab';
}
let focusFunction = actionsMap[event.target.id]?.[key];
// If the focusFunction is undefined, nothing was found
@ -256,7 +256,7 @@ var ZoteroPane = new function()
.dispatchEvent(new MouseEvent("click", { target: event.target }))
}
};
moveFocus(actionsMap, event);
moveFocus(actionsMap, event, true);
});
collectionTreeToolbar.addEventListener("keydown", (event) => {
@ -268,8 +268,6 @@ var ZoteroPane = new function()
ShiftTab: () => document.getElementById('zotero-tb-sync')
},
'zotero-collections-search': {
ArrowRight: () => null,
ArrowLeft: () => null,
Tab: () => document.getElementById('zotero-tb-add'),
ShiftTab: () => document.getElementById('zotero-tb-collection-add')
},
@ -324,8 +322,6 @@ var ZoteroPane = new function()
ShiftTab: () => document.getElementById('zotero-tb-collection-search').click()
},
'zotero-tb-search-textbox': {
ArrowRight: () => null,
ArrowLeft: () => null,
ShiftTab: () => {
document.getElementById("zotero-tb-search")._searchModePopup.flattenedTreeParentNode.focus();
},
@ -2728,7 +2724,7 @@ var ZoteroPane = new function()
this.handleSearchInput = function (textbox, event) {
if (textbox.value.indexOf('"') != -1) {
if (textbox.searchTextbox.value.indexOf('"') != -1) {
this.setItemsPaneMessage(Zotero.getString('advancedSearchMode'));
}
}

View file

@ -1031,7 +1031,7 @@
<spacer flex="1"/>
<image id="zotero-tb-search-spinner" class="zotero-spinner-14" style="display: none"/>
<quick-search-textbox id="zotero-tb-search" timeout="250"
onkeypress="ZoteroPane_Local.handleSearchKeypress(this, event)"
onkeydown="ZoteroPane_Local.handleSearchKeypress(this, event)"
oninput="ZoteroPane_Local.handleSearchInput(this, event)"
oncommand="ZoteroPane_Local.search()"/>
</hbox>