diff --git a/chrome/content/zotero/elements/itemBox.js b/chrome/content/zotero/elements/itemBox.js index 35eb4e1f31..36ad39b886 100644 --- a/chrome/content/zotero/elements/itemBox.js +++ b/chrome/content/zotero/elements/itemBox.js @@ -37,6 +37,7 @@ this.hideEmptyFields = false; this.clickByRow = false; this.clickByItem = false; + this.preventFocus = false; this.clickHandler = null; this.blurHandler = null; @@ -1005,10 +1006,12 @@ } td.appendChild(addButton); - for (const domEl of [th, toggleButton, removeButton, addButton]) { - domEl.setAttribute('tabindex', '0'); - domEl.addEventListener('keypress', this.handleKeyPress.bind(this)); - domEl.addEventListener('focusin', this.updateLastFocused.bind(this)); + if (!this.preventFocus) { + for (const domEl of [th, toggleButton, removeButton, addButton]) { + domEl.setAttribute('tabindex', '0'); + domEl.addEventListener('keypress', this.handleKeyPress.bind(this)); + domEl.addEventListener('focusin', this.updateLastFocused.bind(this)); + } } this._creatorCount++; diff --git a/chrome/content/zotero/elements/mergeGroup.js b/chrome/content/zotero/elements/mergeGroup.js index 7532dda3f5..11a4f94054 100644 --- a/chrome/content/zotero/elements/mergeGroup.js +++ b/chrome/content/zotero/elements/mergeGroup.js @@ -51,6 +51,18 @@ this._leftPane = this._id('left-pane'); this._rightPane = this._id('right-pane'); this._mergePane = this._id('merge-pane'); + + // Select pane with left/right arrow key + this.addEventListener('keypress', (event) => { + if (event.key == "ArrowRight" && !this._rightPane.hasAttribute("selected")) { + this.choosePane(this._rightPane); + this.rightPane.groupbox.focus(); + } + else if (event.key == "ArrowLeft" && !this._leftPane.hasAttribute("selected")) { + this.choosePane(this._leftPane); + this._leftPane.groupbox.focus(); + } + }); } get data() { @@ -267,12 +279,12 @@ this.append(document.importNode(this.content, true)); this.parent = document.querySelector('merge-group'); + this.isLeftPane = this.id == 'left-pane'; + this.isRightPane = this.id == 'right-pane'; this.isMergePane = this.id == 'merge-pane'; if (!this.isMergePane) { - this.box.onclick = function () { - this.parent.choosePane(this); - }.bind(this); + this.groupbox.onclick = this.handleClick.bind(this); } } @@ -280,7 +292,7 @@ return this.parent.type; } - get box() { + get groupbox() { return this.querySelector('groupbox'); } @@ -326,7 +338,7 @@ var button = this._class('choose-button'); button.label = Zotero.getString('sync.conflict.chooseThisVersion'); if (this.showButton) { - button.onclick = () => this.parent.choosePane(this); + button.onclick = this.handleClick.bind(this); button.style.visibility = 'visible'; } else { @@ -403,6 +415,17 @@ objbox.setAttribute("flex", "1"); objbox.mode = this.type == 'file' ? 'filemerge' : 'merge'; + // Keyboard accessibility + objbox.preventFocus = true; + if (!this.isMergePane) { + this.groupbox.setAttribute('tabindex', 0); + this.groupbox.addEventListener('keypress', (event) => { + if (event.key == " ") { + this.handleClick(); + } + }); + } + // Store JSON this._data = val; @@ -427,8 +450,8 @@ } } - click() { - this.box.click(); + handleClick() { + this.parent.choosePane(this); } _class(className) { diff --git a/chrome/skin/default/zotero/merge.css b/chrome/skin/default/zotero/merge.css index d179d659bc..be9abde211 100644 --- a/chrome/skin/default/zotero/merge.css +++ b/chrome/skin/default/zotero/merge.css @@ -93,7 +93,9 @@ merge-group:not([mergetype="note"]) #right-pane:active attachment-box #title { } #left-pane:hover:not([selected=true]) h2, -#right-pane:hover:not([selected=true]) h2 { +#left-pane groupbox:focus:not([selected=true]) h2, +#right-pane:hover:not([selected=true]) h2, +#right-pane groupbox:focus:not([selected=true]) h2 { text-decoration: underline; }