From c0c3d93019fdfb6cb96f3a11e6edbdfd6aa5addf Mon Sep 17 00:00:00 2001
From: Bogdan Abaev <bogdan@zotero.org>
Date: Fri, 19 Jul 2024 13:44:01 -0700
Subject: [PATCH] vpat 45: bibliography dialog instructions and aria (#4413)

- made the wrapper of the dialog focusable and added aria-description
  so that when the dialog opens it announces how to use the dialog
- added aria-labels to buttons, references list, and editor
- make sure that the references list always selects an item when
  focused without clicking
- added a border to focused buttons from simple editor to make it visually
  clear when they received focus
---
 .../zotero/integration/editBibliographyDialog.js   |  7 +++++++
 .../integration/editBibliographyDialog.xhtml       | 13 +++++++------
 chrome/locale/en-US/zotero/zotero.ftl              | 14 ++++++++++++++
 chrome/skin/default/zotero/integration.css         |  6 +++++-
 4 files changed, 33 insertions(+), 7 deletions(-)

diff --git a/chrome/content/zotero/integration/editBibliographyDialog.js b/chrome/content/zotero/integration/editBibliographyDialog.js
index f51c98fc38..5d0ced90ae 100644
--- a/chrome/content/zotero/integration/editBibliographyDialog.js
+++ b/chrome/content/zotero/integration/editBibliographyDialog.js
@@ -118,6 +118,13 @@ var Zotero_Bibliography_Dialog = new function () {
 		_updatePreview();
 	}
 	
+	// When reference list is focused and nothing is selected, select the first item
+	this.listItemFocused = function () {
+		if (!_itemList.selectedItems.length) {
+			_itemList.selectedIndex = 0;
+		}
+	};
+
 	/**
 	 * Called when an item in the reference list is clicked
 	 */
diff --git a/chrome/content/zotero/integration/editBibliographyDialog.xhtml b/chrome/content/zotero/integration/editBibliographyDialog.xhtml
index 524576a119..5f9ba73af0 100644
--- a/chrome/content/zotero/integration/editBibliographyDialog.xhtml
+++ b/chrome/content/zotero/integration/editBibliographyDialog.xhtml
@@ -58,7 +58,7 @@
 		Services.scriptloader.loadSubScript("chrome://zotero/content/integration/editBibliographyDialog.js", this);
 	</script>
 	
-	<vbox id="zotero-select-items-container" flex="1">
+	<vbox id="zotero-select-items-container" flex="1" tabindex="0"  data-l10n-id="integration-editBibliography-wrapper" data-l10n-attrs="aria-description">
 		<hbox flex="1">
 			<vbox align="stretch" flex="1">
 				<hbox align="center" pack="end">
@@ -75,18 +75,19 @@
 			</vbox>
 					
 			<vbox align="center" pack="center" id="citation-buttons">
-				<toolbarbutton id="add" oncommand="Zotero_Bibliography_Dialog.add()" disabled="true"/>
-				<toolbarbutton id="remove" oncommand="Zotero_Bibliography_Dialog.remove()" disabled="true"/>
+				<toolbarbutton id="add" data-l10n-id="integration-editBibliography-add-button" oncommand="Zotero_Bibliography_Dialog.add()" disabled="true" tabindex="0"/>
+				<toolbarbutton id="remove" data-l10n-id="integration-editBibliography-remove-button" oncommand="Zotero_Bibliography_Dialog.remove()" disabled="true" tabindex="0"/>
 			</vbox>
 			<vbox>
-				<label value="&zotero.integration.references.label;"/>
+				<label value="&zotero.integration.references.label;" control="item-list"/>
 				<richlistbox id="item-list" flex="1" align="stretch" seltype="multiple"
 							 style="width: 250px;" onselect="Zotero_Bibliography_Dialog.listItemSelected();"
-							 onchanged="Zotero_Bibliography_Dialog.textChanged()"/>
+							 onchanged="Zotero_Bibliography_Dialog.textChanged()"
+							 onfocus="Zotero_Bibliography_Dialog.listItemFocused()"/>
 			</vbox>
 		</hbox>
 		
-		<iframe id="editor" src="simpleEditor.html" flex="1" type="content" remote="false" maychangeremoteness="false"/>
+		<iframe id="editor" src="simpleEditor.html" flex="1" type="content" remote="false" maychangeremoteness="false" data-l10n-id="integration-editBibliography-editor"/>
 		<description id="zotero-editor-warning" style="margin: 9px 1px 0">&zotero.citation.editorWarning.label;</description>
 	</vbox>
 </dialog>
diff --git a/chrome/locale/en-US/zotero/zotero.ftl b/chrome/locale/en-US/zotero/zotero.ftl
index 711c135aa6..74f6ff7938 100644
--- a/chrome/locale/en-US/zotero/zotero.ftl
+++ b/chrome/locale/en-US/zotero/zotero.ftl
@@ -327,6 +327,20 @@ integration-addEditCitation-window =
     .title = { -app-name } - Add/Edit Citation
 integration-editBibliography-window =
     .title = { -app-name } - Edit Bibliography
+integration-editBibliography-add-button =
+    .aria-label = { general-add }
+integration-editBibliography-remove-button =
+    .aria-label = { general-remove }
+integration-editBibliography-editor = 
+    .aria-label = Edit reference
+-integration-editBibliography-include-uncited = To include an uncited item in your bibliography, select it from the items list and press { general-add }.
+-integration-editBibliography-exclude-cited = You can also exclude a cited item by selecting it from the list of references and pressing { general-remove }.
+-integration-editBibliography-edit-reference = To change how a reference is formatted, use the text editor.
+integration-editBibliography-wrapper =
+    .aria-label = Edit Bibliography dialog
+    .aria-description = { -integration-editBibliography-include-uncited }
+    { -integration-editBibliography-exclude-cited }
+    { -integration-editBibliography-edit-reference }
 integration-quickFormatDialog-window =
     .title = { -app-name } - Quick Format Citation
 
diff --git a/chrome/skin/default/zotero/integration.css b/chrome/skin/default/zotero/integration.css
index be8f8228ee..af300d2371 100644
--- a/chrome/skin/default/zotero/integration.css
+++ b/chrome/skin/default/zotero/integration.css
@@ -358,7 +358,7 @@ richlistitem[selected="true"] {
 
 .zotero-simpleEditor-button {
 	background-color: transparent;
-	border: none;
+	border: 1px solid transparent;
 	cursor: pointer;
 	height: 30px;
 	outline: 0;
@@ -366,6 +366,10 @@ richlistitem[selected="true"] {
 	vertical-align: bottom;
 }
 
+.zotero-simpleEditor-button:focus-visible {
+	border: 1px solid #598bec;
+}
+
 .zotero-simpleEditor-button-selected {
 	background-color: #f0f0f0;
 }