diff --git a/chrome/content/zotero/elements/collapsibleSection.js b/chrome/content/zotero/elements/collapsibleSection.js
index e41d881105..8fb86911c9 100644
--- a/chrome/content/zotero/elements/collapsibleSection.js
+++ b/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);
diff --git a/chrome/content/zotero/zoteroPane.js b/chrome/content/zotero/zoteroPane.js
index 8782fa0f78..7b2fc4701d 100644
--- a/chrome/content/zotero/zoteroPane.js
+++ b/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
*/
diff --git a/chrome/content/zotero/zoteroPane.xhtml b/chrome/content/zotero/zoteroPane.xhtml
index 5b6ae891c5..a044892c02 100644
--- a/chrome/content/zotero/zoteroPane.xhtml
+++ b/chrome/content/zotero/zoteroPane.xhtml
@@ -889,6 +889,7 @@
+
diff --git a/chrome/locale/en-US/zotero/zotero.ftl b/chrome/locale/en-US/zotero/zotero.ftl
index 1927b01b8d..de4f6459a2 100644
--- a/chrome/locale/en-US/zotero/zotero.ftl
+++ b/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