ItemTree annotations: miscellaneous fixes (#5232)

- disable context menu on collapsible-sections of annotations in `itemPane`
- fix `arrowRight`/`arrowLeft` being able to expand/collapse annotation sections when they are focused
- set proper aria-label and aria-description on annotation cards
- fix misaligned annotation icons

Fixes: #5231
Fixes: #5234
Fixes: #5240

chrome/content/zotero/elements/annotationRow.js

@@ -126,7 +126,13 @@
 			this.style.setProperty('--annotation-color', this._annotation.annotationColor);
 			// A11y - make focusable + add screen reader's labels
 			this.setAttribute("tabindex", 0);
-			this.setAttribute("aria-label", this.annotation.getDisplayTitle());
+			let annotationTypeStr = Zotero.getString(`pdfReader.${this.annotation.annotationType}Annotation`);
+			let a11yLabel = this._annotation.annotationText ? `${Zotero.getString('pdfReader.annotationText')}: ${this._annotation.annotationText}.` : annotationTypeStr;
+			let ariaComment = this._annotation.annotationComment ? `${Zotero.getString('pdfReader.annotationComment')}: ${this._annotation.annotationComment}.` : '';
+			let ariaTags = tags.length ? `${Zotero.getString('itemFields.tags')}: ${tags.map(tag => tag.tag).join(', ')}.` : '';
+			let a11yDescription = `${ariaComment} ${ariaTags}`;
+			this.setAttribute("aria-label", a11yLabel);
+			this.setAttribute("aria-description", a11yDescription);
 		}
 	}
 

chrome/content/zotero/elements/collapsibleSection.js

@@ -379,6 +379,10 @@
 			return !!this.closest('merge-pane, scaffold-item-preview, annotation-items-pane');
 		}
 
+		get _disableContextMenu() {
+			return !this._getSidenav() || !!this.closest('annotation-items-pane');
+		}
+
 		_handleClick = (event) => {
 			if (this._disableCollapsing) return;
 			if (event.target.closest('.section-custom-button, menupopup')) return;
@@ -410,7 +414,7 @@
 			}
 			// Space/Enter toggle section open/closed.
 			// ArrowLeft/ArrowRight on actual header will close/open (depending on locale direction)
-			if (["ArrowLeft", "ArrowRight", " ", "Enter"].includes(event.key)) {
+			if (["ArrowLeft", "ArrowRight", " ", "Enter"].includes(event.key) && !this._disableCollapsing) {
 				stopEvent();
 				this.open = ([" ", "Enter"].includes(event.key)) ? !this.open : (event.key == Zotero.arrowNextKey);
 				event.target.focus();
@@ -439,7 +443,7 @@
 		};
 		
 		_handleContextMenu = (event) => {
-			if (!this._getSidenav() || event.target.closest('.section-custom-button')) return;
+			if (this._disableContextMenu || event.target.closest('.section-custom-button')) return;
 			event.preventDefault();
 			this._contextMenu?.openPopupAtScreen(event.screenX, event.screenY, true);
 		};

scss/components/_item-tree.scss

@@ -247,7 +247,7 @@
 				}
 			}
 			&.tight .cell {
-				padding: 0 2px;
+				padding: 0 2px 0 0;
 			}
 		}
 		
@@ -426,4 +426,4 @@ $-coloredIcons: (
 			}
 		}
 	}
-}
+}