mirrors/zotero
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Made toolbar accessible to keyboard (#2853)

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

4
chrome/content/zotero-platform/unix/overlay.css
View file

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

16
chrome/content/zotero/bindings/itembox.xml
View file

@ -2344,7 +2344,21 @@
]]>
</body>
</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">
<parameter name="fieldName"/>

9
chrome/content/zotero/bindings/relatedbox.xml
View file

@ -330,6 +330,15 @@
]]>
</body>
</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>
<content>
<xul:vbox xbl:inherits="flex" class="zotero-box">

2
chrome/content/zotero/components/itemPane/tagsBox.jsx
View file

@ -415,7 +415,7 @@ const TagsBox = React.forwardRef((props, ref) => {
<div className="tags-box" ref={rootRef} onClick={blurOpenField}>
<div className="tags-box-header">
<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 className="tags-box-list-container">
<ul className="tags-box-list">

24
chrome/content/zotero/lookup.js
View file

@ -28,6 +28,7 @@
* @namespace
*/
var Zotero_Lookup = new function () {
this._button = null;
/**
* Performs a lookup by DOI, PMID, or ISBN on the given textBox value
* and adds any items it can.
@ -134,6 +135,10 @@ var Zotero_Lookup = new function () {
this.showPanel = function (button) {
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);
}
@ -201,6 +206,25 @@ var Zotero_Lookup = new function () {
}
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) {

32
chrome/content/zotero/xpcom/sync/syncRunner.js
View file

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

253
chrome/content/zotero/zoteroPane.js
View file

@ -55,6 +55,9 @@ var ZoteroPane = new function()
this.clearItemsPaneMessage = clearItemsPaneMessage;
this.viewSelectedAttachment = viewSelectedAttachment;
this.reportErrors = reportErrors;
const modifierIsNotShift = ev => ev.getModifierState("Meta") || ev.getModifierState("Alt") ||
ev.getModifierState("Control") || ev.getModifierState("OS");
this.document = document;
@ -136,8 +139,256 @@ var ZoteroPane = new function()
// continue loading pane
_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
* mode

45
chrome/content/zotero/zoteroPane.xul
View file

@ -95,10 +95,10 @@
onkeypress="ZoteroPane_Local.handleKeyPress(event)"
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">
<toolbarbutton 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-collection-add" class="zotero-tb-button" tooltiptext="&zotero.toolbar.newCollection.label;" command="cmd_zotero_newCollection"/>
<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">
<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;">
@ -114,7 +114,7 @@
</hbox>
<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; }">
<menupopup onpopupshowing="ZoteroPane_Local.updateNewItemTypes()">
<menuseparator/>
@ -127,13 +127,13 @@
</menupopup>
</toolbarbutton>
<toolbarbutton 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)"/>
<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)" />
<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>
<description>&zotero.lookup.description;</description>
<label control="zotero-lookup-textbox">&zotero.lookup.description;</label>
<vbox id="zotero-lookup-singleLine">
<stack>
<progressmeter id="zotero-lookup-progress" mode="determined"/>
@ -155,14 +155,14 @@
</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.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; }">
<menupopup onpopupshowing="ZoteroPane_Local.updateNoteButtonMenu()">
<menuitem label="&zotero.toolbar.note.standalone;" command="cmd_zotero_newStandaloneNote"/>
<menuitem label="&zotero.toolbar.note.child;" command="cmd_zotero_newChildNote"/>
</menupopup>
</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; }">
<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);"/>
@ -171,29 +171,31 @@
</menupopup>
</toolbarbutton>
<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"/>
<image id="zotero-tb-search-spinner" class="zotero-spinner-14" style="display: none"/>
<textbox id="zotero-tb-search" type="search" timeout="250"
onkeypress="ZoteroPane_Local.handleSearchKeypress(this, event)"
oninput="ZoteroPane_Local.handleSearchInput(this, event)"
oncommand="ZoteroPane_Local.search()"/>
oncommand="ZoteroPane_Local.search()" />
</hbox>
<hbox id="zotero-item-toolbar" flex="1" align="center" tooltip="html-tooltip">
<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()"/>
</toolbarbutton>
</hbox>
<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;"
oncommand="this.hidden = true; Zotero.Sync.Runner.stop()"
hidden="true"/>
<hbox id="zotero-tb-sync-progress-box" hidden="true" align="center">
<!-- 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"
oncommand="Zotero.Sync.Runner.stop()"/>
<progressmeter id="zotero-tb-sync-progress" mode="determined"
@ -211,16 +213,21 @@
<hbox id="zotero-pq-buttons">
</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
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()">
<tooltip
id="zotero-tb-sync-tooltip"

1
chrome/skin/default/zotero/overlay.css
View file

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