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