From a81701d7e7d5209fa9c657e97ece8c97db9b9690 Mon Sep 17 00:00:00 2001
From: abaevbog <bogdan@zotero.org>
Date: Wed, 5 Jun 2024 23:54:54 -0500
Subject: [PATCH] vpat 51: add aria labels to advanced search (#3987)

In addition, make toolbarbuttons explicitly focusable
and make them clickable on space/Enter.
---
 .../content/zotero/elements/zoteroSearch.js   | 28 ++++++++++++++-----
 chrome/locale/en-US/zotero/zotero.ftl         | 14 ++++++++++
 2 files changed, 35 insertions(+), 7 deletions(-)

diff --git a/chrome/content/zotero/elements/zoteroSearch.js b/chrome/content/zotero/elements/zoteroSearch.js
index 6c6e21cf80..ff1a708ead 100644
--- a/chrome/content/zotero/elements/zoteroSearch.js
+++ b/chrome/content/zotero/elements/zoteroSearch.js
@@ -40,15 +40,15 @@
 			<vbox xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
 					id="search-box" flex="1" onkeypress="this.closest('zoterosearch').handleKeyPress(event)">
 				<hbox align="center">
-					<label value="&zotero.search.searchInLibrary;" control="libraryMenu"/>
-					<menulist id="libraryMenu" oncommand="this.closest('zoterosearch').updateLibrary();" native="true">
+					<label id="libraryMenu-label" value="&zotero.search.searchInLibrary;" control="libraryMenu"/>
+					<menulist id="libraryMenu" aria-labelledby="libraryMenu-label" oncommand="this.closest('zoterosearch').updateLibrary();" native="true">
 						<menupopup/>
 					</menulist>
 				</hbox>
 				<groupbox>
 					<caption align="center">
-						<label value="&zotero.search.joinMode.prefix;"/>
-						<menulist id="joinModeMenu" oncommand="this.closest('zoterosearch').updateJoinMode();" native="true">
+						<label id="joinModeMenu-label" value="&zotero.search.joinMode.prefix;"/>
+						<menulist id="joinModeMenu" aria-labelledby="joinModeMenu-label" oncommand="this.closest('zoterosearch').updateJoinMode();" native="true">
 							<menupopup>
 								<menuitem label="&zotero.search.joinMode.any;" value="any"/>
 								<menuitem label="&zotero.search.joinMode.all;" value="all" selected="true"/>
@@ -203,6 +203,11 @@
 		}
 
 		handleKeyPress(event) {
+			// Space/Enter on toolbarbutton will click it
+			if (event.target.tagName == "toolbarbutton" && [" ", "Enter"].includes(event.key)) {
+				event.target.click();
+				return;
+			}
 			switch (event.keyCode) {
 				case event.DOM_VK_RETURN:
 					this.active = true;
@@ -239,8 +244,8 @@
 					<menupopup/>
 				</menulist>
 				<zoterosearchagefield id="value-date-age" class="value-date-age" hidden="true"/>
-				<toolbarbutton id="remove" class="zotero-clicky zotero-clicky-minus" value="-" onclick="this.closest('zoterosearchcondition').onRemoveClicked(event)"/>
-				<toolbarbutton id="add" class="zotero-clicky zotero-clicky-plus" value="+" onclick="this.closest('zoterosearchcondition').onAddClicked(event)"/>
+				<toolbarbutton id="remove" tabindex="0" data-l10n-id="advanced-search-remove-btn" class="zotero-clicky zotero-clicky-minus" value="-" onclick="this.closest('zoterosearchcondition').onRemoveClicked(event)"/>
+				<toolbarbutton id="add" tabindex="0" data-l10n-id="advanced-search-add-btn" class="zotero-clicky zotero-clicky-plus" value="+" onclick="this.closest('zoterosearchcondition').onAddClicked(event)"/>
 			</html:div>
 		`, ['chrome://zotero/locale/zotero.dtd', 'chrome://zotero/locale/searchbox.dtd']);
 
@@ -541,6 +546,13 @@
 				this.querySelector('#valuemenu').hidden = true;
 				this.querySelector('#value-date-age').hidden = true;
 			}
+			var conditionsMenu = this.querySelector('#conditionsmenu');
+			document.l10n.setAttributes(conditionsMenu, 'advanced-search-conditions-menu', { label: conditionsMenu.label });
+			document.l10n.setAttributes(operatorsList, 'advanced-search-operators-menu', { label: operatorsList.label });
+			var valueMenu = this.querySelector("#valuemenu");
+			if (!valueMenu.hidden) {
+				document.l10n.setAttributes(valueMenu, 'advanced-search-condition-input', { label: valueMenu.label });
+			}
 		}
 
 		createValueMenu(rows) {
@@ -778,7 +790,9 @@
 					autocompletesearch="zotero"
 					autocompletepopup="search-autocomplete-popup"
 					timeout="250"
-					type="search"/>
+					type="search"
+					data-l10n-id="advanced-search-condition-input"
+					/>
 				
 				<xul:toolbarbutton
 						id="textbox-button"
diff --git a/chrome/locale/en-US/zotero/zotero.ftl b/chrome/locale/en-US/zotero/zotero.ftl
index 4b7cecdd4e..9a922d2564 100644
--- a/chrome/locale/en-US/zotero/zotero.ftl
+++ b/chrome/locale/en-US/zotero/zotero.ftl
@@ -529,3 +529,17 @@ first-run-guidance-quickFormat = Type a title, author, and/or year to search for
     You can also add a page number directly by including it with your search terms or typing it after the bubble and pressing { return-or-enter }.
 
 first-run-guidance-authorMenu = { -app-name } lets you specify editors and translators too. You can turn an author into an editor or translator by selecting from this menu.
+
+advanced-search-remove-btn =
+    .tooltiptext = { general-remove }
+advanced-search-add-btn =
+    .tooltiptext = { general-add }
+advanced-search-conditions-menu =
+    .aria-label = Search condition
+    .label = { $label }
+advanced-search-operators-menu =
+    .aria-label = Operator
+    .label = { $label }
+advanced-search-condition-input =
+    .aria-label = Value
+    .label = { $label }