Made toolbar accessible to keyboard (#2853)

This commit is contained in:
James Eschrich 2023-02-13 23:28:53 -05:00 committed by GitHub
parent 0f9024dc98
commit d866a10a2b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 355 additions and 31 deletions

View file

@ -63,3 +63,7 @@ tab {
background-color: #ececec; background-color: #ececec;
border-top: 1px solid hsla(0, 0%, 0%, 0.2); border-top: 1px solid hsla(0, 0%, 0%, 0.2);
} }
.zotero-tb-button:focus {
border: 1px dotted #999;
}

View file

@ -2344,7 +2344,21 @@
]]> ]]>
</body> </body>
</method> </method>
<method name="focusLastField">
<body><![CDATA[
const tabbableFields = this._dynamicFields.querySelectorAll('*[ztabindex]:not([disabled=true])');
const last = tabbableFields[tabbableFields.length - 1];
if (last.classList.contains('zotero-focusable')) {
last.focus();
}
// Fields need to be clicked
else {
last.click();
}
]]></body>
</method>
<method name="focusField"> <method name="focusField">
<parameter name="fieldName"/> <parameter name="fieldName"/>

View file

@ -330,6 +330,15 @@
]]> ]]>
</body> </body>
</method> </method>
<method name="receiveKeyboardFocus">
<parameter name="direction" />
<body><![CDATA[
this.id("addButton").focus();
// TODO: the relatedbox is not currently keyboard accessible
// so we are ignoring the direction
]]></body>
</method>
</implementation> </implementation>
<content> <content>
<xul:vbox xbl:inherits="flex" class="zotero-box"> <xul:vbox xbl:inherits="flex" class="zotero-box">

View file

@ -415,7 +415,7 @@ const TagsBox = React.forwardRef((props, ref) => {
<div className="tags-box" ref={rootRef} onClick={blurOpenField}> <div className="tags-box" ref={rootRef} onClick={blurOpenField}>
<div className="tags-box-header"> <div className="tags-box-header">
<div className="tags-box-count">{renderCount()}</div> <div className="tags-box-count">{renderCount()}</div>
{ props.editable && <div><button onClick={handleAddTag}>Add</button></div> } { props.editable && <div><button onClick={handleAddTag} id="tags-box-add-button">Add</button></div> }
</div> </div>
<div className="tags-box-list-container"> <div className="tags-box-list-container">
<ul className="tags-box-list"> <ul className="tags-box-list">

View file

@ -28,6 +28,7 @@
* @namespace * @namespace
*/ */
var Zotero_Lookup = new function () { var Zotero_Lookup = new function () {
this._button = null;
/** /**
* Performs a lookup by DOI, PMID, or ISBN on the given textBox value * Performs a lookup by DOI, PMID, or ISBN on the given textBox value
* and adds any items it can. * and adds any items it can.
@ -134,6 +135,10 @@ var Zotero_Lookup = new function () {
this.showPanel = function (button) { this.showPanel = function (button) {
var panel = document.getElementById('zotero-lookup-panel'); var panel = document.getElementById('zotero-lookup-panel');
this._button = button;
if (!button) {
button = document.getElementById("zotero-tb-lookup");
}
panel.openPopup(button, "after_start", 16, -2, false, false); panel.openPopup(button, "after_start", 16, -2, false, false);
} }
@ -201,6 +206,25 @@ var Zotero_Lookup = new function () {
} }
return true; return true;
} }
this.onFocusOut = function(event) {
/*
if the lookup popup was triggered by the lookup button,
we want to return there on focus out. So we check
(1) that we came from a button and (2) that
event.relatedTarget === null, i.e. that the user hasn't used
the mouse or keyboard to select something, and focus is leaving
the popup because the popup was hidden/dismissed.
*/
if (this._button && event.relatedTarget === null) {
event.preventDefault();
event.stopPropagation();
this._button.focus();
this._button = null;
} else {
this._button = null;
}
}
this.onInput = function (event, textbox) { this.onInput = function (event, textbox) {

View file

@ -1501,7 +1501,7 @@ Zotero.Sync.Runner_Module = function (options = {}) {
panel.removeChild(panel.firstChild); panel.removeChild(panel.firstChild);
} }
for (let e of errors) { for (let [index, e] of errors.entries()) {
var box = doc.createElement('vbox'); var box = doc.createElement('vbox');
var label = doc.createElement('label'); var label = doc.createElement('label');
if (e.libraryID !== undefined) { if (e.libraryID !== undefined) {
@ -1526,6 +1526,7 @@ Zotero.Sync.Runner_Module = function (options = {}) {
let header = doc.createElement('description'); let header = doc.createElement('description');
header.className = 'error-header'; header.className = 'error-header';
header.textContent = e.dialogHeader; header.textContent = e.dialogHeader;
header.setAttribute("control", `zotero-sync-error-panel-button-${index}`);
content.appendChild(header); content.appendChild(header);
} }
@ -1544,6 +1545,7 @@ Zotero.Sync.Runner_Module = function (options = {}) {
var desc = doc.createElement('description'); var desc = doc.createElement('description');
desc.textContent = msg; desc.textContent = msg;
desc.setAttribute("control", `zotero-sync-error-panel-button-${index}`);
// Make the text selectable // Make the text selectable
desc.setAttribute('style', '-moz-user-select: text; cursor: text'); desc.setAttribute('style', '-moz-user-select: text; cursor: text');
content.appendChild(desc); content.appendChild(desc);
@ -1565,13 +1567,26 @@ Zotero.Sync.Runner_Module = function (options = {}) {
var buttonText = e.dialogButtonText; var buttonText = e.dialogButtonText;
var buttonCallback = e.dialogButtonCallback; var buttonCallback = e.dialogButtonCallback;
} }
function addEventHandlers(button, cb) {
button.addEventListener("click", () => {
cb();
panel.hidePopup();
});
button.addEventListener("keydown", (event) => {
if (event.key !== ' ' && event.key !== 'Enter') return;
cb();
panel.hidePopup();
});
}
let button = doc.createElement('button'); let button = doc.createElement('button');
button.setAttribute("id", `zotero-sync-error-panel-button-${index}`);
button.setAttribute('label', buttonText); button.setAttribute('label', buttonText);
button.onclick = function () { addEventHandlers(button, buttonCallback);
buttonCallback();
panel.hidePopup();
};
buttons.appendChild(button); buttons.appendChild(button);
// Second button // Second button
@ -1581,10 +1596,9 @@ Zotero.Sync.Runner_Module = function (options = {}) {
let button2 = doc.createElement('button'); let button2 = doc.createElement('button');
button2.setAttribute('label', buttonText); button2.setAttribute('label', buttonText);
button2.onclick = () => { button2.setAttribute("id", `zotero-sync-error-panel-button-${index}`);
buttonCallback(); button.removeAttribute("id");
panel.hidePopup(); addEventHandlers(button2, buttonCallback);
};
buttons.insertBefore(button2, button); buttons.insertBefore(button2, button);
} }
} }

View file

@ -55,6 +55,9 @@ var ZoteroPane = new function()
this.clearItemsPaneMessage = clearItemsPaneMessage; this.clearItemsPaneMessage = clearItemsPaneMessage;
this.viewSelectedAttachment = viewSelectedAttachment; this.viewSelectedAttachment = viewSelectedAttachment;
this.reportErrors = reportErrors; this.reportErrors = reportErrors;
const modifierIsNotShift = ev => ev.getModifierState("Meta") || ev.getModifierState("Alt") ||
ev.getModifierState("Control") || ev.getModifierState("OS");
this.document = document; this.document = document;
@ -136,8 +139,256 @@ var ZoteroPane = new function()
// continue loading pane // continue loading pane
_loadPane(); _loadPane();
setUpToolbar();
}; };
function setUpToolbar() {
// if the hidden property is ever set on a grandparent or more distant
// ancestor this will need to be updated
const isVisible = (b) => !b.hidden && !b.parentElement.hidden;
const isTbButton = (node) => node && node.tagName === "toolbarbutton";
function nextVisible(id, field = "after") {
let b = document.getElementById(id);
while (!isVisible(b)) {
const mapData = focusMap.get(b.id);
b = document.getElementById(mapData[field]);
}
return b;
}
/* constants */
const toolbar = this.document.getElementById("zotero-toolbar");
// assumes no toolbarbuttons are dynamically added, just hidden
// or revealed. If this changes, the observer will have to monitor
// changes to the childList for each hbox in the toolbar which might
// have dynamic children
const buttons = toolbar.getElementsByTagName("toolbarbutton");
const focusMap = new Map();
const zones = [
{
get start() { return document.getElementById("zotero-tb-collection-add"); },
focusBefore() {
// If no item is selected, focus items list.
const pane = document.getElementById("zotero-item-pane-content");
if (pane.selectedIndex === "0") {
document.getElementById("item-tree-main-default").focus();
}
else {
const tabBox = document.getElementById("zotero-view-tabbox");
if (tabBox.selectedIndex === 0) {
const itembox = document.getElementById("zotero-editpane-item-box");
itembox.focusLastField();
}
else if (tabBox.selectedIndex === 1) {
const notes = document.getElementById("zotero-editpane-notes");
const nodes = notes.querySelectorAll("button");
const node = nodes[nodes.length - 1];
node.focus();
// TODO: the notes are currently inaccessible to the keyboard
}
else if (tabBox.selectedIndex === 2) {
const tagContainer = document.getElementById("tags-box-container");
const tags = tagContainer.querySelectorAll("#tags-box-add-button,.zotero-clicky");
const last = tags[tags.length - 1];
if (last.id === "tags-box-add-button") {
last.focus();
}
else {
last.click();
}
}
else if (tabBox.selectedIndex === 3) {
const related = tabBox.querySelector("relatedbox");
related.receiveKeyboardFocus("end");
}
else {
throw new Error("The selectedIndex should always be between 1 and 4");
}
}
},
focusAfter() {
document.getElementById("zotero-tb-search-menu-button").focus();
}
},
{
get start() { return document.getElementById("zotero-tb-locate"); },
focusBefore() {
document.getElementById("zotero-tb-search").focus();
},
focusAfter() {
document.getElementById("collection-tree").focus();
}
}
];
/*
observe buttons and containers for changes in the "hidden"
attribute
*/
const observer = new MutationObserver((mutations, _) => {
for (const mutation of mutations) {
if (mutation.target.hidden
&& (document.activeElement === mutation.target
|| mutation.target.contains(document.activeElement))
) {
const next = nextVisible(document.activeElement.id, "before");
next.focus();
}
}
});
/*
build a chain which connects all the <toolbarbutton>s,
except for zotero-tb-locate and zotero-tb-advanced-search
which is where the chain breaks
*/
let prev = null;
let _zone = zones[0];
for (const button of buttons) {
focusMap.set(button.id, {
before: prev,
after: null,
zone: _zone
});
/* observe each button for changes to "hidden" */
observer.observe(button, {
attributes: true,
attributeFilter: ["hidden"]
});
if (focusMap.has(prev)) {
focusMap.get(prev).after = button.id;
}
prev = button.id;
// break the chain at zotero-tb-advanced-search
if (button.id === "zotero-tb-advanced-search") {
_zone = zones[1];
prev = null;
}
}
/* this container sets "hidden" to hide its children, so we have to observe it too */
observer.observe(document.getElementById("zotero-tb-sync-progress-box"), {
attributes: true,
attributeFilter: ["hidden"]
});
// lookupButton and syncErrorButton show popup panels, and so need special treatment
const lookupButton = document.getElementById("zotero-tb-lookup");
const syncErrorButton = document.getElementById("zotero-tb-sync-error");
/* buttons at the start of zones need tabindex=0 */
for (const zone of zones) {
zone.start.setAttribute("tabindex", "0");
}
toolbar.addEventListener("keydown", (event) => {
// manually move focus when Shift+Tabbing from the search-menu-button
if (event.key === 'Tab' && event.shiftKey
&& !modifierIsNotShift(event)
&& event.originalTarget
&& event.originalTarget.id == "zotero-tb-search-menu-button") {
event.preventDefault();
event.stopPropagation();
zones[0].start.focus();
return;
}
// only handle events on a <toolbarbutton>
if (!isTbButton(event.target)) return;
const mapData = focusMap.get(event.target.id);
if (!Zotero.rtl && event.key === 'ArrowRight'
|| Zotero.rtl && event.key === 'ArrowLeft') {
event.preventDefault();
event.stopPropagation();
if (mapData.after) {
nextVisible(mapData.after, "after").focus();
}
return;
}
if (!Zotero.rtl && event.key === 'ArrowLeft'
|| Zotero.rtl && event.key === 'ArrowRight') {
event.preventDefault();
event.stopPropagation();
if (mapData.before) {
nextVisible(mapData.before, "before").focus();
}
return;
}
/* manually trigger on space and enter */
if (event.key === ' ' || event.key === 'Enter') {
if (event.target.disabled) return;
if (event.target === lookupButton) {
event.preventDefault();
event.stopPropagation();
Zotero_Lookup.showPanel(event.target);
}
else if (event.target === syncErrorButton) {
event.preventDefault();
event.stopPropagation();
syncErrorButton.dispatchEvent(new MouseEvent("click", {
target: event.target
}));
}
else if (event.target.getAttribute('type') === 'menu') {
event.preventDefault();
event.stopPropagation();
const popup = event.target.querySelector("menupopup");
if (popup !== null && !event.target.disabled) {
popup.showPopup();
}
}
}
/* activate menus and popups on ArrowDown and ArrowUp, otherwise prepare for a focus change */
else if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
if (event.target === lookupButton && !event.target.disabled) {
event.preventDefault();
event.stopPropagation();
Zotero_Lookup.showPanel(event.target);
}
else if (event.target.getAttribute('type') === 'menu' && !event.target.disabled) {
event.preventDefault();
event.stopPropagation();
const popup = event.target.querySelector("menupopup");
if (popup !== null && !event.target.disabled) {
popup.showPopup();
}
}
/* prepare for a focus change */
else if (event.key === 'ArrowDown') {
event.preventDefault();
event.stopPropagation();
mapData.zone.focusBefore();
}
else if (event.key === 'ArrowUp') {
event.preventDefault();
event.stopPropagation();
mapData.zone.focusAfter();
}
}
else if (event.key === 'Tab' && !modifierIsNotShift(event)) {
event.preventDefault();
event.stopPropagation();
if (event.shiftKey) {
mapData.zone.focusBefore();
}
else {
mapData.zone.focusAfter();
}
}
});
}
/** /**
* Called on window load or when pane has been reloaded after switching into or out of connector * Called on window load or when pane has been reloaded after switching into or out of connector
* mode * mode

View file

@ -95,10 +95,10 @@
onkeypress="ZoteroPane_Local.handleKeyPress(event)" onkeypress="ZoteroPane_Local.handleKeyPress(event)"
chromedir="&locale.dir;"> chromedir="&locale.dir;">
<toolbar id="zotero-toolbar" class="toolbar toolbar-primary"> <toolbar id="zotero-toolbar" class="toolbar toolbar-primary" tabindex="-1">
<hbox id="zotero-collections-toolbar" align="center"> <hbox id="zotero-collections-toolbar" align="center">
<toolbarbutton id="zotero-tb-collection-add" class="zotero-tb-button" tooltiptext="&zotero.toolbar.newCollection.label;" command="cmd_zotero_newCollection"/> <toolbarbutton tabindex="-1" id="zotero-tb-collection-add" class="zotero-tb-button" tooltiptext="&zotero.toolbar.newCollection.label;" command="cmd_zotero_newCollection"/>
<toolbarbutton id="zotero-tb-library-add-menu" class="zotero-tb-button" tooltiptext="&zotero.toolbar.newLibrary.label;" type="menu"> <toolbarbutton tabindex="-1" id="zotero-tb-library-add-menu" class="zotero-tb-button" tooltiptext="&zotero.toolbar.newLibrary.label;" type="menu">
<menupopup id="zotero-tb-library-add-popup"> <menupopup id="zotero-tb-library-add-popup">
<menuitem id="zotero-tb-group-add" label="&zotero.toolbar.newGroup;" oncommand="ZoteroPane_Local.newGroup()"/> <menuitem id="zotero-tb-group-add" label="&zotero.toolbar.newGroup;" oncommand="ZoteroPane_Local.newGroup()"/>
<menu id="zotero-tb-feed-add-menu" label="&zotero.toolbar.feeds.new;"> <menu id="zotero-tb-feed-add-menu" label="&zotero.toolbar.feeds.new;">
@ -114,7 +114,7 @@
</hbox> </hbox>
<hbox id="zotero-items-toolbar" align="center"> <hbox id="zotero-items-toolbar" align="center">
<toolbarbutton id="zotero-tb-add" class="zotero-tb-button" tooltiptext="&zotero.toolbar.newItem.label;" type="menu" <toolbarbutton tabindex="-1" id="zotero-tb-add" class="zotero-tb-button" tooltiptext="&zotero.toolbar.newItem.label;" type="menu"
onmousedown="if (this.disabled) { event.preventDefault(); return; }"> onmousedown="if (this.disabled) { event.preventDefault(); return; }">
<menupopup onpopupshowing="ZoteroPane_Local.updateNewItemTypes()"> <menupopup onpopupshowing="ZoteroPane_Local.updateNewItemTypes()">
<menuseparator/> <menuseparator/>
@ -127,13 +127,13 @@
</menupopup> </menupopup>
</toolbarbutton> </toolbarbutton>
<toolbarbutton id="zotero-tb-lookup" class="zotero-tb-button" tooltiptext="&zotero.toolbar.lookup.label;" type="panel" <toolbarbutton tabindex="-1" id="zotero-tb-lookup" class="zotero-tb-button" tooltiptext="&zotero.toolbar.lookup.label;" type="panel"
onmousedown="if (this.disabled) { event.preventDefault(); return; } Zotero_Lookup.showPanel(this)"/> onmousedown="if (this.disabled) { event.preventDefault(); return; } Zotero_Lookup.showPanel(this)" />
<panel id="zotero-lookup-panel" type="arrow" onpopupshown="Zotero_Lookup.onShowing(event)" <panel id="zotero-lookup-panel" type="arrow" onpopupshown="Zotero_Lookup.onShowing(event)"
onpopuphidden="Zotero_Lookup.onHidden(event)"> onpopuphidden="Zotero_Lookup.onHidden(event)" onfocusout="Zotero_Lookup.onFocusOut(event)">
<vbox> <vbox>
<description>&zotero.lookup.description;</description> <label control="zotero-lookup-textbox">&zotero.lookup.description;</label>
<vbox id="zotero-lookup-singleLine"> <vbox id="zotero-lookup-singleLine">
<stack> <stack>
<progressmeter id="zotero-lookup-progress" mode="determined"/> <progressmeter id="zotero-lookup-progress" mode="determined"/>
@ -155,14 +155,14 @@
</panel> </panel>
<!--<toolbarbutton id="zotero-tb-note-add" class="zotero-tb-button" tooltiptext="&zotero.toolbar.note.standalone;" oncommand="ZoteroPane_Local.newNote(event.shiftKey);"/>--> <!--<toolbarbutton id="zotero-tb-note-add" class="zotero-tb-button" tooltiptext="&zotero.toolbar.note.standalone;" oncommand="ZoteroPane_Local.newNote(event.shiftKey);"/>-->
<toolbarbutton id="zotero-tb-note-add" class="zotero-tb-button" tooltiptext="&zotero.toolbar.newNote;" type="menu" <toolbarbutton tabindex="-1" id="zotero-tb-note-add" class="zotero-tb-button" tooltiptext="&zotero.toolbar.newNote;" type="menu"
onmousedown="if (this.disabled) { event.preventDefault(); return; }"> onmousedown="if (this.disabled) { event.preventDefault(); return; }">
<menupopup onpopupshowing="ZoteroPane_Local.updateNoteButtonMenu()"> <menupopup onpopupshowing="ZoteroPane_Local.updateNoteButtonMenu()">
<menuitem label="&zotero.toolbar.note.standalone;" command="cmd_zotero_newStandaloneNote"/> <menuitem label="&zotero.toolbar.note.standalone;" command="cmd_zotero_newStandaloneNote"/>
<menuitem label="&zotero.toolbar.note.child;" command="cmd_zotero_newChildNote"/> <menuitem label="&zotero.toolbar.note.child;" command="cmd_zotero_newChildNote"/>
</menupopup> </menupopup>
</toolbarbutton> </toolbarbutton>
<toolbarbutton id="zotero-tb-attachment-add" class="zotero-tb-button" tooltiptext="&zotero.items.menu.attach;" type="menu" <toolbarbutton tabindex="-1" id="zotero-tb-attachment-add" class="zotero-tb-button" tooltiptext="&zotero.items.menu.attach;" type="menu"
onmousedown="if (this.disabled) { event.preventDefault(); return; }"> onmousedown="if (this.disabled) { event.preventDefault(); return; }">
<menupopup onpopupshowing="ZoteroPane_Local.updateAttachmentButtonMenu(this)"> <menupopup onpopupshowing="ZoteroPane_Local.updateAttachmentButtonMenu(this)">
<menuitem class="menuitem-iconic zotero-menuitem-attachments-web-link" label="&zotero.items.menu.attach.link.uri;" oncommand="var itemID = ZoteroPane_Local.getSelectedItems()[0].id; ZoteroPane_Local.addAttachmentFromURI(true, itemID);"/> <menuitem class="menuitem-iconic zotero-menuitem-attachments-web-link" label="&zotero.items.menu.attach.link.uri;" oncommand="var itemID = ZoteroPane_Local.getSelectedItems()[0].id; ZoteroPane_Local.addAttachmentFromURI(true, itemID);"/>
@ -171,29 +171,31 @@
</menupopup> </menupopup>
</toolbarbutton> </toolbarbutton>
<toolbarseparator/> <toolbarseparator/>
<toolbarbutton id="zotero-tb-advanced-search" class="zotero-tb-button" tooltiptext="&zotero.toolbar.advancedSearch;" command="cmd_zotero_advancedSearch"/> <toolbarbutton tabindex="-1" id="zotero-tb-advanced-search" class="zotero-tb-button" tooltiptext="&zotero.toolbar.advancedSearch;" command="cmd_zotero_advancedSearch"/>
<spacer flex="1"/> <spacer flex="1"/>
<image id="zotero-tb-search-spinner" class="zotero-spinner-14" style="display: none"/> <image id="zotero-tb-search-spinner" class="zotero-spinner-14" style="display: none"/>
<textbox id="zotero-tb-search" type="search" timeout="250" <textbox id="zotero-tb-search" type="search" timeout="250"
onkeypress="ZoteroPane_Local.handleSearchKeypress(this, event)" onkeypress="ZoteroPane_Local.handleSearchKeypress(this, event)"
oninput="ZoteroPane_Local.handleSearchInput(this, event)" oninput="ZoteroPane_Local.handleSearchInput(this, event)"
oncommand="ZoteroPane_Local.search()"/> oncommand="ZoteroPane_Local.search()" />
</hbox> </hbox>
<hbox id="zotero-item-toolbar" flex="1" align="center" tooltip="html-tooltip"> <hbox id="zotero-item-toolbar" flex="1" align="center" tooltip="html-tooltip">
<hbox align="center" pack="start" flex="1"> <hbox align="center" pack="start" flex="1">
<toolbarbutton id="zotero-tb-locate" class="zotero-tb-button" tooltiptext="&zotero.toolbar.openURL.label;" type="menu"> <toolbarbutton tabindex="-1" id="zotero-tb-locate" class="zotero-tb-button" tooltiptext="&zotero.toolbar.openURL.label;" type="menu">
<menupopup id="zotero-tb-locate-menu" onpopupshowing="Zotero_LocateMenu.buildLocateMenu()"/> <menupopup id="zotero-tb-locate-menu" onpopupshowing="Zotero_LocateMenu.buildLocateMenu()"/>
</toolbarbutton> </toolbarbutton>
</hbox> </hbox>
<hbox align="center" pack="end"> <hbox align="center" pack="end">
<toolbarbutton id="zotero-tb-sync-stop" <toolbarbutton tabindex="-1" id="zotero-tb-sync-stop"
style="-moz-user-focus: normal;"
tooltiptext="&zotero.sync.stop;" tooltiptext="&zotero.sync.stop;"
oncommand="this.hidden = true; Zotero.Sync.Runner.stop()" oncommand="this.hidden = true; Zotero.Sync.Runner.stop()"
hidden="true"/> hidden="true"/>
<hbox id="zotero-tb-sync-progress-box" hidden="true" align="center"> <hbox id="zotero-tb-sync-progress-box" hidden="true" align="center">
<!-- TODO: localize --> <!-- TODO: localize -->
<toolbarbutton id="zotero-tb-sync-storage-cancel" <toolbarbutton tabindex="-1" id="zotero-tb-sync-storage-cancel"
style="-moz-user-focus: normal;"
tooltiptext="Stop sync" tooltiptext="Stop sync"
oncommand="Zotero.Sync.Runner.stop()"/> oncommand="Zotero.Sync.Runner.stop()"/>
<progressmeter id="zotero-tb-sync-progress" mode="determined" <progressmeter id="zotero-tb-sync-progress" mode="determined"
@ -211,16 +213,21 @@
<hbox id="zotero-pq-buttons"> <hbox id="zotero-pq-buttons">
</hbox> </hbox>
<toolbarbutton id="zotero-tb-sync-error" hidden="true"/> <!-- TODO needs label for screenreaders -->
<toolbarbutton tabindex="-1" id="zotero-tb-sync-error" hidden="true" style="-moz-user-focus: normal;" />
<!-- <!--
We put this here, but it can be used wherever We put this here, but it can be used wherever
Zotero.Sync.Runner.updateErrorPanel() puts it Zotero.Sync.Runner.updateErrorPanel() puts it
--> -->
<panel id="zotero-sync-error-panel" type="arrow"/> <panel id="zotero-sync-error-panel" type="arrow" onpopupshown="
const buttons = this.getElementsByTagName('button');
if (buttons[0]) {
buttons[0].focus();
}" />
<toolbarbutton id="zotero-tb-sync" class="zotero-tb-button" tooltip="_child" <toolbarbutton tabindex="-1" id="zotero-tb-sync" class="zotero-tb-button" tooltip="_child"
oncommand="ZoteroPane.sync()"> oncommand="ZoteroPane.sync()">
<tooltip <tooltip
id="zotero-tb-sync-tooltip" id="zotero-tb-sync-tooltip"

View file

@ -216,6 +216,7 @@
} }
.zotero-tb-button { .zotero-tb-button {
-moz-user-focus: normal;
padding-left: 5px; padding-left: 5px;
padding-right: 5px; padding-right: 5px;
margin-right: 2px; margin-right: 2px;