From 6282eef3cc917255d060677ca94287896f3d4068 Mon Sep 17 00:00:00 2001
From: Bogdan Abaev <bogdan@zotero.org>
Date: Tue, 23 Apr 2024 15:59:04 -0400
Subject: [PATCH] vpat 40/41: style editor aria fixes (#4022)

- linked all labels to their respective inputs so they are announced by
screen readers
- added aria-labels for the actual editor and preview iframes
- locator type and locator input are assigned aria-labels
- added visible labels to citation style and language menus,
since vpat 40 specifically asks for visible labels
---
 chrome/content/zotero/tools/csledit.xhtml | 18 +++++++++++++-----
 chrome/locale/en-US/zotero/zotero.ftl     | 17 +++++++++++++++--
 2 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/chrome/content/zotero/tools/csledit.xhtml b/chrome/content/zotero/tools/csledit.xhtml
index 739624023f..e9e1fb765f 100644
--- a/chrome/content/zotero/tools/csledit.xhtml
+++ b/chrome/content/zotero/tools/csledit.xhtml
@@ -41,19 +41,24 @@
 	<script src="chrome://zotero/content/include.js"/>
 	<script src="csledit.js"/>
 	
+	<linkset>
+		<html:link rel="localization" href="zotero.ftl"/>
+	</linkset>
+
 	<vbox flex="1">
 		<vbox class="csl-edit-toolbars">
 			<hbox class="csl-edit-toolbar">
 				<button id="preview-refresh-button" label="&zotero.general.refresh;" oncommand="Zotero_CSL_Editor.refresh()"/>
 				<button id="zotero-csl-save" label="&zotero.general.saveAs;" oncommand="Zotero_CSL_Editor.save()"/>
 				<html:div class="divider" />
-				<menulist id="zotero-csl-page-type" oncommand="Zotero_CSL_Editor.refresh()" native="true" />
+				<menulist id="zotero-csl-page-type" oncommand="Zotero_CSL_Editor.refresh()" native="true" data-l10n-id="styleEditor-locatorType"/>
 				<label value=":" />
-				<html:input size="5" id="preview-pages" oninput="Zotero_CSL_Editor.refreshDebounced()"/>
+				<label id="locator-input" data-l10n-id="styleEditor-locatorInput" hidden="true"/>
+				<html:input size="5" id="preview-pages" oninput="Zotero_CSL_Editor.refreshDebounced()" aria-labelledby="zotero-csl-page-type locator-input"/>
 				<html:div class="divider" />
 				<checkbox oncommand="Zotero_CSL_Editor.refresh()" id="preview-suppress-author" label="&zotero.citation.suppressAuthor.label;" native="true" />
 				<html:div class="divider" />
-				<label value="&styles.editor.citePosition;" />
+				<label value="&styles.editor.citePosition;" control="zotero-ref-position"/>
 				<menulist id="zotero-ref-position" oncommand="Zotero_CSL_Editor.refresh()" native="true">
 					<menupopup>
 						<menuitem label="first" value="0"/>
@@ -65,16 +70,19 @@
 				</menulist>
 			</hbox>
 			<hbox class="csl-edit-toolbar">
+				<label data-l10n-id="styleEditor-citationStyle" control="zotero-csl-list"/>
 				<menulist id="zotero-csl-list" oncommand="Zotero_CSL_Editor.onStyleSelected(this.value)" native="true"/>
+				<html:div class="divider" />
+				<label data-l10n-id="styleEditor-locale" control="locale-menu"/>
 				<menulist id="locale-menu" oncommand="Zotero.Prefs.set('export.lastLocale', this.value); Zotero_CSL_Editor.refresh()" native="true" />
 			</hbox>
 		</vbox>
 		<iframe id="zotero-csl-editor-iframe" src="chrome://scaffold/content/monaco/monaco.html" flex="1"
-			onmousedown="this.focus()"/>
+			onmousedown="this.focus()" data-l10n-id="styleEditor-editor"/>
 		<splitter id="csledit-splitter" collapse="before" persist="state" orient="vertical">
 			<grippy/>
 		</splitter>
-		<iframe id="zotero-csl-preview-box" flex="1" overflow="auto" type="content"/>
+		<iframe id="zotero-csl-preview-box" flex="1" overflow="auto" type="content" data-l10n-id="styleEditor-preview"/>
 	</vbox>
 	
 	<keyset>
diff --git a/chrome/locale/en-US/zotero/zotero.ftl b/chrome/locale/en-US/zotero/zotero.ftl
index dec32bcf3c..d7960a4bbf 100644
--- a/chrome/locale/en-US/zotero/zotero.ftl
+++ b/chrome/locale/en-US/zotero/zotero.ftl
@@ -16,6 +16,9 @@ general-tag = Tag
 general-done = Done
 general-view-troubleshooting-instructions = View Troubleshooting Instructions
 
+citation-style-label = Citation Style:
+language-label = Language:
+
 menu-file-show-in-finder =
     .label = Show in Finder
 menu-file-show-file =
@@ -276,8 +279,8 @@ runJS-run-async = Run as async function
 
 bibliography-window =
     .title = { -app-name } - Create Citation/Bibliography
-bibliography-style-label = Citation Style:
-bibliography-locale-label = Language:
+bibliography-style-label = { citation-style-label }
+bibliography-locale-label = { language-label }
 bibliography-displayAs-label = Display citations as:
 bibliography-advancedOptions-label = Advanced Options
 bibliography-outputMode-label = Output Mode:
@@ -311,6 +314,16 @@ integration-editBibliography-window =
 integration-quickFormatDialog-window =
     .title = { -app-name } - Quick Format Citation
 
+styleEditor-locatorType =
+    .aria-label = Locator type
+styleEditor-locatorInput = Locator input
+styleEditor-citationStyle = { citation-style-label }
+styleEditor-locale = { language-label }
+styleEditor-editor = 
+    .aria-label = Style editor
+styleEditor-preview = 
+    .aria-label = Preview
+
 integration-prefs-displayAs-label = Display Citations As:
 integration-prefs-footnotes = 
     .label = Footnotes