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

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
 	 */

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>

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
 

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;
 }