vpat 15: more detailed labels for itemPane (#4050)

- added dynamic tooltip whose label is set only when it appears.
It allows us to have a visible tooltip without screen readers
announcing it
- fetch the pane name string and pass it as an argument to
fluent to set the appropriate label on expand/collapse buttons
- tooltiptext is set dynamically on expand/collapse buttons to
avoid having screen readers read both the label and the tooltip text
that are almost identical

chrome/content/zotero/elements/collapsibleSection.js

@@ -157,6 +157,8 @@
 			let twisty = document.createXULElement('toolbarbutton');
 			twisty.className = 'twisty';
 			twisty.setAttribute("tabindex", "0");
+			twisty.setAttribute("tooltip", "dynamic-tooltip");
+			twisty.setAttribute("data-l10n-attrs", "dynamic-tooltiptext");
 			this._head.append(twisty);
 			
 			this._buildExtraButtons();
@@ -173,6 +175,11 @@
 			if (this.hasAttribute('data-l10n-id') && !this.hasAttribute('data-l10n-args')) {
 				this.setAttribute('data-l10n-args', JSON.stringify({ count: 0 }));
 			}
+			// Fetch the localized value of the current pane which is used to set aria-properties
+			document.l10n.formatValue(`pane-${this.dataset.pane}`)
+				.then((res) => {
+					this._paneName = res;
+				});
 		}
 		
 		_buildContextMenu() {
@@ -409,8 +416,9 @@
 			this._head.setAttribute("aria-label", this.label);
 			this._title.textContent = this.label;
 			this._summary.textContent = this.summary;
-			this._head.querySelector('.twisty').hidden = this._disableCollapsing;
-			this._head.querySelector('.twisty').setAttribute('data-l10n-id', `section-button-${this.open ? "collapse" : "expand"}`);
+			let twisty = this._head.querySelector('.twisty');
+			twisty.hidden = this._disableCollapsing;
+			document.l10n.setAttributes(twisty, `section-button-${this.open ? "collapse" : "expand"}`, { section: this._paneName || "" });
 		}
 	}
 	customElements.define("collapsible-section", CollapsibleSection);

chrome/content/zotero/zoteroPane.js

@@ -6322,6 +6322,18 @@ var ZoteroPane = new function()
 		}
 	};
 	
+	// Set the label of the dynamic tooltip. Can be used when we cannot set .tooltiptext
+	// property, e.g. if we don't want the tooltip to be announced by screenreaders.
+	this.setDynamicTooltip = function (event) {
+		let tooltip = event.target;
+		let triggerNode = tooltip.triggerNode;
+		if (!triggerNode || !triggerNode.getAttribute("dynamic-tooltiptext")) {
+			event.preventDefault();
+			return;
+		}
+		tooltip.setAttribute("label", triggerNode.getAttribute("dynamic-tooltiptext"));
+	};
+
 	/**
 	 * Opens the about dialog
 	 */

chrome/content/zotero/zoteroPane.xhtml

@@ -889,6 +889,7 @@
 		</hbox>
 	</hbox>
 	
+	<tooltip id="dynamic-tooltip" onpopupshowing="ZoteroPane.setDynamicTooltip(event)"></tooltip>
 	<!-- Global popupset for all context menus -->
 	<popupset>
 		<!-- Library -->

chrome/locale/en-US/zotero/zotero.ftl

@@ -459,9 +459,11 @@ section-button-remove =
 section-button-add =
     .tooltiptext = { general-add }
 section-button-expand =
-    .tooltiptext = Expand section
+    .dynamic-tooltiptext = Expand section
+    .label = Expand { $section } section
 section-button-collapse =
-    .tooltiptext = Collapse section
+    .dynamic-tooltiptext = Collapse section
+    .label = Collapse { $section } section
 annotations-count =
     { $count ->
         [one] { $count } Annotation