revision of focus management through the reader (#3687)
- brought back escape behavior that just focuses the reader whenever a reader tab is opened, wherever it comes from (unless it's from an element that is .open - like an item type menu, in which case just let it get closed) - removed moving focus from contextPane title to sync button on shift-tab - using new reader methods onIframeTab, onToolbarShiftTab to move focus to the contextPane on tab from reader iframe or to the sync button on shift-tab from the toolbar So now, the focus path is: tab bar -> tabs menu -> sync button -> reader toolbar -> reader sidebar -> reader scrollable area -> contextPane title (if visible) or tab bar
This commit is contained in:
parent
294835b995
commit
61d3c5c85c
4 changed files with 35 additions and 23 deletions
|
@ -181,15 +181,6 @@ var ZoteroItemPane = new function() {
|
|||
isLibraryTab ? 'zotero-view-item-sidenav' : 'zotero-context-pane-sidenav'
|
||||
);
|
||||
|
||||
// Shift-tab from title when reader is opened focuses the last button in tabs toolbar
|
||||
if (event.target.closest(".title") && event.key == "Tab"
|
||||
&& event.shiftKey && Zotero_Tabs.selectedType == "reader") {
|
||||
let focusable = [...document.querySelectorAll("#zotero-tabs-toolbar toolbarbutton:not([disabled]):not([hidden])")];
|
||||
let btn = focusable[focusable.length - 1];
|
||||
btn.focus();
|
||||
stopEvent();
|
||||
return;
|
||||
}
|
||||
// Tab from the scrollable area focuses the pinned pane if it exists
|
||||
if (event.target.classList.contains("zotero-view-item") && event.key == "Tab" && !event.shiftKey && sidenav.pinnedPane) {
|
||||
let pane = sidenav.getPane(sidenav.pinnedPane);
|
||||
|
|
|
@ -502,7 +502,20 @@ class ReaderInstance {
|
|||
Zotero.debug('toggle context pane')
|
||||
let win = Zotero.getMainWindow();
|
||||
win.ZoteroContextPane.togglePane();
|
||||
|
||||
},
|
||||
onToolbarShiftTab: () => {
|
||||
// Shift-tab from the toolbar focuses the sync button
|
||||
let win = Zotero.getMainWindow();
|
||||
win.document.getElementById("zotero-tb-sync").focus();
|
||||
},
|
||||
onIframeTab: () => {
|
||||
// Tab after the last tabstop will focus the contextPane
|
||||
let win = Zotero.getMainWindow();
|
||||
let focused = win.ZoteroContextPane.focus();
|
||||
// If context pane wasn't focused (e.g. it's collapsed), focus the tab bar
|
||||
if (!focused) {
|
||||
win.Zotero_Tabs.moveFocus("current");
|
||||
}
|
||||
}
|
||||
}, this._iframeWindow, { cloneFunctions: true }));
|
||||
|
||||
|
|
|
@ -245,7 +245,12 @@ var ZoteroPane = new function()
|
|||
ArrowLeft: () => null,
|
||||
Tab: () => {
|
||||
if (Zotero_Tabs.selectedIndex > 0) {
|
||||
ZoteroContextPane.focus();
|
||||
let reader = Zotero.Reader.getByTabID(Zotero_Tabs.selectedID);
|
||||
if (reader) {
|
||||
// Move focus to the reader and focus the toolbar
|
||||
reader.focusFirst();
|
||||
reader.focusToolbar();
|
||||
}
|
||||
return null;
|
||||
}
|
||||
if (collectionsPane.getAttribute("collapsed")) {
|
||||
|
@ -317,9 +322,6 @@ var ZoteroPane = new function()
|
|||
ArrowLeft: () => null,
|
||||
Tab: () => document.getElementById('zotero-tb-collections-search').click(),
|
||||
ShiftTab: () => document.getElementById('zotero-tb-sync')
|
||||
// Enter: () => {
|
||||
// document.getElementById('zotero-tb-collection-add').click();
|
||||
// }
|
||||
},
|
||||
'zotero-collections-search': {
|
||||
Tab: () => document.getElementById('zotero-tb-add'),
|
||||
|
@ -857,16 +859,22 @@ var ZoteroPane = new function()
|
|||
if (Zotero_Tabs.selectedIndex > 0) {
|
||||
if (event.key === 'Escape') {
|
||||
// If focus is on an opened popup, let Escape just close it
|
||||
// Also, do nothing if focus is inside of tabs toolbar
|
||||
if (document.activeElement.open
|
||||
|| document.querySelector("#zotero-tabs-toolbar").contains(document.activeElement)) {
|
||||
if (document.activeElement.open) {
|
||||
return;
|
||||
}
|
||||
// Escape when a reader tab is opened re-focuses the tab in the tab bar
|
||||
// Timeout to let the focused editable-text reset the value
|
||||
setTimeout(() => {
|
||||
Zotero_Tabs.moveFocus("current");
|
||||
});
|
||||
|
||||
if (!document.activeElement.classList.contains('reader')) {
|
||||
let reader = Zotero.Reader.getByTabID(Zotero_Tabs.selectedID);
|
||||
if (reader) {
|
||||
reader.focus();
|
||||
// Keep propagating if current focus is on input or textarea
|
||||
// The Escape event needs to be handled by itemBox, tagBox, etc. to undo edits.
|
||||
if (!["input", "textarea"].includes(document.activeElement.tagName)) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
else if (event.key === 'Tab' && event.shiftKey) {
|
||||
let node = document.activeElement;
|
||||
|
|
2
reader
2
reader
|
@ -1 +1 @@
|
|||
Subproject commit 39e92a143d23ff874789ccf360c4633939cc2784
|
||||
Subproject commit 11001e86a967583bdd7aaa0564b5dd6e5cf202df
|
Loading…
Add table
Add a link
Reference in a new issue