From 249c5b8d12ab93a348da54bca398973604fafaea Mon Sep 17 00:00:00 2001
From: abaevbog <bogdan@zotero.org>
Date: Fri, 7 Jun 2024 04:25:37 -0500
Subject: [PATCH] vpat 49: refactor note format preference section (#4027)

"Note format" section in "Export" tab is technically a table and is
announced as such by screen readers, which is misleading.
It also opens a menulist when a checkbox is clicked, which is
not an expected behavior and can shift focus.

This refactors the "Note format" section to be a vbox container
with <checkbox>es and labels, which is more correct semantically and
does not confuse screen readers. In addition, when a chekbox is
clicked, dispatch a "change" event instead of unnecessarily open
up a menu.
---
 .../zotero/preferences/preferences_export.jsx |  6 +--
 .../preferences/preferences_export.xhtml      | 48 +++++++------------
 scss/preferences/_export.scss                 | 22 +++++++--
 3 files changed, 37 insertions(+), 39 deletions(-)

diff --git a/chrome/content/zotero/preferences/preferences_export.jsx b/chrome/content/zotero/preferences/preferences_export.jsx
index a76e13aa90..6b193c776c 100644
--- a/chrome/content/zotero/preferences/preferences_export.jsx
+++ b/chrome/content/zotero/preferences/preferences_export.jsx
@@ -258,9 +258,9 @@ Zotero_Preferences.Export = {
 			}
 			item.value = JSON.stringify(format);
 		}
-		// After updating menulist item value we have to wait a bit before doing click(), to avoid anomalies
-		// like an empty row in menulist. 0 in setTimeout is not enough
-		setTimeout(() => menulist.click(), 50);
+		// After updating item's value we have to wait before dispatching event.
+		// menulist.value does not reflect changes immediately item.value is updated.
+		setTimeout(() => menulist.dispatchEvent(new Event("change", { bubbles: true })), 50);
 	},
 	
 	
diff --git a/chrome/content/zotero/preferences/preferences_export.xhtml b/chrome/content/zotero/preferences/preferences_export.xhtml
index 0af96f7924..04bfe144e0 100644
--- a/chrome/content/zotero/preferences/preferences_export.xhtml
+++ b/chrome/content/zotero/preferences/preferences_export.xhtml
@@ -53,38 +53,22 @@
 		
 		<label value="&zotero.preferences.quickCopy.noteFormat;" control="zotero-noteQuickCopy-menu"/>
 		<menulist id="zotero-noteQuickCopy-menu" label="&zotero.general.loading;" native="true"/>
-		
-		<table id="noteQuickCopy-format-options"
-				xmlns="http://www.w3.org/1999/xhtml"
-				xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
-				hidden="hidden">
-			<tbody id="noteQuickCopy-markdown-options">
-				<tr>
-					<th>
-						<xul:label/>
-					</th>
-					<td>
-						<xul:checkbox id="noteQuickCopy-markdown-includeAppLinks"
-								oncommand="Zotero_Preferences.Export.onUpdateNoteExportOptions()"
-								native="true"/>
-					</td>
-				</tr>
-			</tbody>
-
-			<tbody id="noteQuickCopy-html-options">
-				<tr>
-					<th>
-						<xul:label/>
-					</th>
-					<td>
-						<xul:checkbox id="noteQuickCopy-html-includeAppLinks"
-								oncommand="Zotero_Preferences.Export.onUpdateNoteExportOptions()"
-								native="true"/>
-					</td>
-				</tr>
-			</tbody>
-		</table>
-		
+		<box id="noteQuickCopy-wrapper">
+			<vbox id="noteQuickCopy-format-options" hidden="true" align="center">
+				<hbox id="noteQuickCopy-markdown-options" align="center">
+					<label control="noteQuickCopy-markdown-includeAppLinks"></label>
+					<checkbox id="noteQuickCopy-markdown-includeAppLinks"
+						oncommand="Zotero_Preferences.Export.onUpdateNoteExportOptions()"
+						native="true"/>
+				</hbox>
+				<hbox id="noteQuickCopy-html-options" align="center">
+					<label control="noteQuickCopy-html-includeAppLinks"></label>
+					<checkbox id="noteQuickCopy-html-includeAppLinks"
+						oncommand="Zotero_Preferences.Export.onUpdateNoteExportOptions()"
+						native="true"/>
+				</hbox>
+			</vbox>
+		</box>
 		<separator/>
 		
 		<label value="&zotero.preferences.quickCopy.siteEditor.setings;" control="quickCopy-siteSettings"/>
diff --git a/scss/preferences/_export.scss b/scss/preferences/_export.scss
index ee1532c92f..46751df09f 100644
--- a/scss/preferences/_export.scss
+++ b/scss/preferences/_export.scss
@@ -16,8 +16,22 @@
 	min-height: 1.5em; /* Fix collapse on Windows */
 }
 
-#noteQuickCopy-format-options th {
-	font-weight: normal;
-	text-align: end;
-	max-width: 3.6em;
+#noteQuickCopy-wrapper {
+	margin-left: 30px;
+	@media (-moz-platform: windows) {
+		margin-left: 45px;
+	}
+	@media (-moz-platform: linux) {
+		margin-left: 25px;
+	}
+}
+
+#noteQuickCopy-markdown-options > label,
+#noteQuickCopy-html-options > label{
+	margin-inline-end: 8px;
+}
+
+#noteQuickCopy-format-options hbox {
+	justify-content: end;
+	width: 100%;
 }