From 91bc1a3e2dfc70f6995c39c6f7399fd641a22268 Mon Sep 17 00:00:00 2001
From: abaevbog <bogdan@zotero.org>
Date: Fri, 12 Apr 2024 04:53:35 -0400
Subject: [PATCH] vpat 6: aria labels for buttons in item/context panes (#3957)

Added aria labels and button roles for buttons in the
item/Collection pane. This includes buttons in the header
as well as rows from notes, related, collections, and
attachments section that act as buttons. Also added
missing aria-labelledby for mini-itembox rows below
attachment preview to have filename, dateModified
and etc. properly labelled.

This also covers most of vpat 16.

This does not affect how tags/header/itemBox entries are announced.
There is a separate issue with NVDA and JAWS sometimes struggling
with announcing text inside of `editable-text` component,
so this will be handled separately.
---
 .../content/zotero/elements/attachmentBox.js  | 10 ++++-----
 .../zotero/elements/attachmentPreviewBox.js   |  2 +-
 .../content/zotero/elements/attachmentRow.js  |  6 +++--
 .../content/zotero/elements/attachmentsBox.js |  2 +-
 .../zotero/elements/collapsibleSection.js     |  3 +++
 .../elements/librariesCollectionsBox.js       |  5 ++++-
 chrome/content/zotero/elements/notesBox.js    |  3 +++
 chrome/content/zotero/elements/relatedBox.js  |  3 +++
 chrome/locale/en-US/zotero/zotero.ftl         | 22 +++++++++++++++++++
 9 files changed, 46 insertions(+), 10 deletions(-)

diff --git a/chrome/content/zotero/elements/attachmentBox.js b/chrome/content/zotero/elements/attachmentBox.js
index 8ecf27fd8e..819240c5ff 100644
--- a/chrome/content/zotero/elements/attachmentBox.js
+++ b/chrome/content/zotero/elements/attachmentBox.js
@@ -32,7 +32,7 @@
 		content = MozXULElement.parseXULToFragment(`
 			<collapsible-section data-l10n-id="section-attachment-info" data-pane="attachment-info">
 				<html:div class="body">
-					<attachment-preview id="attachment-preview" tabindex="0"/>
+					<attachment-preview id="attachment-preview" tabindex="0" data-l10n-id="attachment-preview"/>
 					<html:div style="display: grid;">
 						<label id="url" is="zotero-text-link" crop="end" tabindex="0"
 							ondragstart="let dt = event.dataTransfer; dt.setData('text/x-moz-url', this.value); dt.setData('text/uri-list', this.value); dt.setData('text/plain', this.value);"/>
@@ -40,19 +40,19 @@
 					<html:div class="metadata-table">
 						<html:div id="fileNameRow" class="meta-row">
 							<html:div class="meta-label"><html:label id="fileName-label" class="key" data-l10n-id="attachment-info-filename"/></html:div>
-							<html:div class="meta-data"><editable-text id="fileName" nowrap="true" tight="true"/></html:div>
+							<html:div class="meta-data"><editable-text id="fileName" aria-labelledby="fileName-label" nowrap="true" tight="true"/></html:div>
 						</html:div>
 						<html:div id="accessedRow" class="meta-row">
 							<html:div class="meta-label"><html:label id="accessed-label" class="key" data-l10n-id="attachment-info-accessed"/></html:div>
-							<html:div class="meta-data"><editable-text id="accessed" nowrap="true" tight="true" readonly="true"/></html:div>
+							<html:div class="meta-data"><editable-text id="accessed" aria-labelledby="accessed-label" nowrap="true" tight="true" readonly="true"/></html:div>
 						</html:div>
 						<html:div id="pagesRow" class="meta-row">
 							<html:div class="meta-label"><html:label id="pages-label" class="key" data-l10n-id="attachment-info-pages"/></html:div>
-							<html:div class="meta-data"><editable-text id="pages" nowrap="true" tight="true" readonly="true"/></html:div>
+							<html:div class="meta-data"><editable-text id="pages" aria-labelledby="pages-label" nowrap="true" tight="true" readonly="true"/></html:div>
 						</html:div>
 						<html:div id="dateModifiedRow" class="meta-row" hidden="true" >
 							<html:div class="meta-label"><html:label id="dateModified-label" class="key" data-l10n-id="attachment-info-modified"/></html:div>
-							<html:div class="meta-data"><editable-text id="dateModified" nowrap="true" tight="true" readonly="true"/></html:div>
+							<html:div class="meta-data"><editable-text id="dateModified" aria-labelledby="dateModified-label" nowrap="true" tight="true" readonly="true"/></html:div>
 						</html:div>
 						<html:div id="indexStatusRow" class="meta-row">
 							<html:div class="meta-label"><html:label id="index-status-label" class="key" data-l10n-id="attachment-info-index"/></html:div>
diff --git a/chrome/content/zotero/elements/attachmentPreviewBox.js b/chrome/content/zotero/elements/attachmentPreviewBox.js
index 14a1b371af..1606f3fa6e 100644
--- a/chrome/content/zotero/elements/attachmentPreviewBox.js
+++ b/chrome/content/zotero/elements/attachmentPreviewBox.js
@@ -29,7 +29,7 @@
 		content = MozXULElement.parseXULToFragment(`
 			<collapsible-section data-l10n-id="section-attachment-preview" data-pane="attachment-preview">
 				<html:div class="body">
-					<attachment-preview id="attachment-preview"/>
+					<attachment-preview id="attachment-preview" data-l10n-id="attachment-preview"/>
 					<html:span id="preview-placeholder" data-l10n-id="attachment-preview-placeholder"></html:span>
 				</html:div>
 			</collapsible-section>
diff --git a/chrome/content/zotero/elements/attachmentRow.js b/chrome/content/zotero/elements/attachmentRow.js
index 4cc0bd3419..95459eb953 100644
--- a/chrome/content/zotero/elements/attachmentRow.js
+++ b/chrome/content/zotero/elements/attachmentRow.js
@@ -31,11 +31,11 @@ import { getCSSItemTypeIcon } from 'components/icons';
 	class AttachmentRow extends XULElementBase {
 		content = MozXULElement.parseXULToFragment(`
 			<html:div class="head">
-				<html:div class="clicky-item attachment-btn keyboard-clickable" tabindex="0">
+				<html:div class="clicky-item attachment-btn keyboard-clickable" tabindex="0" role="button">
 					<html:span class="icon"/>
 					<html:div class="label"/>
 				</html:div>
-				<html:div class="clicky-item annotation-btn">
+				<html:div class="clicky-item annotation-btn keyboard-clickable" tabindex="0" role="button" data-l10n-id="section-button-annotations" data-l10n-attrs="tooltiptext,aria-label" >
 					<html:span class="icon"/>
 					<html:span class="label"/>
 				</html:div>
@@ -112,8 +112,10 @@ import { getCSSItemTypeIcon } from 'components/icons';
 			if (!this.initialized) return;
 			
 			this._attachmentButton.querySelector(".icon").replaceWith(getCSSItemTypeIcon(this._attachment.getItemTypeIconName()));
+			this._attachmentButton.setAttribute("aria-label", this._attachment.getField('title'));
 			this._attachmentButton.querySelector(".label").textContent = this._attachment.getField('title');
 			let annotationCount = this.attachment.isFileAttachment() ? this.attachment.getAnnotations().length : 0;
+			this._annotationButton.setAttribute('data-l10n-args', JSON.stringify({ count: annotationCount }));
 			this._annotationButton.hidden = annotationCount == 0;
 			this._annotationButton.querySelector(".label").textContent = annotationCount;
 		}
diff --git a/chrome/content/zotero/elements/attachmentsBox.js b/chrome/content/zotero/elements/attachmentsBox.js
index 8c2d5694aa..94e5c6ddca 100644
--- a/chrome/content/zotero/elements/attachmentsBox.js
+++ b/chrome/content/zotero/elements/attachmentsBox.js
@@ -30,7 +30,7 @@
 		content = MozXULElement.parseXULToFragment(`
 			<collapsible-section data-l10n-id="section-attachments" data-pane="attachments" extra-buttons="add">
 				<html:div class="body">
-					<attachment-preview tabindex="0"/>
+					<attachment-preview tabindex="0" data-l10n-id="attachment-preview"/>
 					<html:div class="attachments-container"></html:div>
 				</html:div>
 			</collapsible-section>
diff --git a/chrome/content/zotero/elements/collapsibleSection.js b/chrome/content/zotero/elements/collapsibleSection.js
index cff97949a9..14e76e5814 100644
--- a/chrome/content/zotero/elements/collapsibleSection.js
+++ b/chrome/content/zotero/elements/collapsibleSection.js
@@ -258,6 +258,7 @@
 				if (!buttonType) continue;
 				let button = document.createXULElement('toolbarbutton');
 				button.classList.add(buttonType, 'section-custom-button');
+				button.setAttribute("data-l10n-id", `section-button-${buttonType}`);
 				button.setAttribute("tabindex", "0");
 				button.addEventListener('command', (event) => {
 					this.dispatchEvent(new CustomEvent(buttonType, {
@@ -417,9 +418,11 @@
 			}
 			
 			this._head.setAttribute('aria-expanded', this.open);
+			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"}`);
 		}
 	}
 	customElements.define("collapsible-section", CollapsibleSection);
diff --git a/chrome/content/zotero/elements/librariesCollectionsBox.js b/chrome/content/zotero/elements/librariesCollectionsBox.js
index 7f6eda27bf..f9b3d46752 100644
--- a/chrome/content/zotero/elements/librariesCollectionsBox.js
+++ b/chrome/content/zotero/elements/librariesCollectionsBox.js
@@ -91,8 +91,10 @@ import { getCSSIcon } from 'components/icons';
 			row.classList.toggle('context', isContext);
 			
 			let box = document.createElement('div');
-			box.className = 'box keyboard_clickable';
+			box.className = 'box keyboard-clickable';
 			box.setAttribute("tabindex", "0");
+			box.setAttribute('aria-label', obj.name);
+			box.setAttribute('role', "button");
 			
 			let iconName;
 			if (obj instanceof Zotero.Group) {
@@ -118,6 +120,7 @@ import { getCSSIcon } from 'components/icons';
 				let remove = document.createXULElement('toolbarbutton');
 				remove.className = 'zotero-clicky zotero-clicky-minus';
 				remove.setAttribute("tabindex", "0");
+				remove.setAttribute("data-l10n-id", 'section-button-remove');
 				remove.addEventListener('command', () => {
 					if (Services.prompt.confirm(
 						window,
diff --git a/chrome/content/zotero/elements/notesBox.js b/chrome/content/zotero/elements/notesBox.js
index 531265876d..c2db96afb6 100644
--- a/chrome/content/zotero/elements/notesBox.js
+++ b/chrome/content/zotero/elements/notesBox.js
@@ -103,6 +103,8 @@ import { getCSSItemTypeIcon } from 'components/icons';
 				box.addEventListener('click', () => this._handleShowItem(id));
 				box.className = 'box keyboard-clickable';
 				box.setAttribute("tabindex", 0);
+				box.setAttribute("aria-label", label.textContent);
+				box.setAttribute("role", "button");
 				box.append(icon, label);
 
 				row.append(box);
@@ -112,6 +114,7 @@ import { getCSSItemTypeIcon } from 'components/icons';
 					remove.addEventListener('command', () => this._handleRemove(id));
 					remove.className = 'zotero-clicky zotero-clicky-minus';
 					remove.setAttribute("tabindex", "0");
+					remove.setAttribute("data-l10n-id", 'section-button-remove');
 					row.append(remove);
 				}
 
diff --git a/chrome/content/zotero/elements/relatedBox.js b/chrome/content/zotero/elements/relatedBox.js
index 641803b7b6..7929f09540 100644
--- a/chrome/content/zotero/elements/relatedBox.js
+++ b/chrome/content/zotero/elements/relatedBox.js
@@ -111,6 +111,8 @@ import { getCSSItemTypeIcon } from 'components/icons';
 					let box = document.createElement('div');
 					box.addEventListener('click', () => this._handleShowItem(id));
 					box.setAttribute("tabindex", "0");
+					box.setAttribute("role", "button");
+					box.setAttribute("aria-label", label.textContent);
 					box.className = 'box keyboard-clickable';
 					box.appendChild(icon);
 					box.appendChild(label);
@@ -120,6 +122,7 @@ import { getCSSItemTypeIcon } from 'components/icons';
 						let remove = document.createXULElement("toolbarbutton");
 						remove.addEventListener('command', () => this._handleRemove(id));
 						remove.className = 'zotero-clicky zotero-clicky-minus';
+						remove.setAttribute("data-l10n-id", 'section-button-remove');
 						remove.setAttribute("tabindex", "0");
 						row.append(remove);
 					}
diff --git a/chrome/locale/en-US/zotero/zotero.ftl b/chrome/locale/en-US/zotero/zotero.ftl
index 67354477d3..6e2dea0d09 100644
--- a/chrome/locale/en-US/zotero/zotero.ftl
+++ b/chrome/locale/en-US/zotero/zotero.ftl
@@ -5,6 +5,9 @@ return-or-enter =
         *[other] Enter
     }
 
+general-remove = Remove
+general-add = Add
+
 menu-print =
     .label = { general-print }
 
@@ -371,6 +374,25 @@ section-related =
 section-attachment-info =
     .label = { pane-attachment-info }
 
+section-button-remove =
+    .tooltiptext = { general-remove }
+section-button-add =
+    .tooltiptext = { general-add }
+section-button-expand =
+    .tooltiptext = Expand section
+section-button-collapse =
+    .tooltiptext = Collapse section
+annotations-count =
+    { $count ->
+        [one] { $count } Annotation
+       *[other] { $count } Annotations
+    }
+section-button-annotations =
+    .title = { annotations-count }
+    .aria-label = { annotations-count }
+attachment-preview =
+    .aria-label = { pane-attachment-preview }
+
 sidenav-info =
     .tooltiptext = { pane-info }
 sidenav-abstract =