vpat 45: bibliography dialog instructions and aria

- made the wrapper of the dialog focusable and adde 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-btn" oncommand="Zotero_Bibliography_Dialog.add()" disabled="true" tabindex="0"/>
+				<toolbarbutton id="remove" data-l10n-id="integration-editBibliography-remove-btn" 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

@@ -311,6 +311,17 @@ integration-addEditCitation-window =
     .title = { -app-name } - Add/Edit Citation
 integration-editBibliography-window =
     .title = { -app-name } - Edit Bibliography
+integration-editBibliography-add-btn =
+    .aria-label = { general-add }
+integration-editBibliography-remove-btn =
+    .aria-label = { general-remove }
+integration-editBibliography-editor = 
+    .aria-label = Edit reference
+integration-editBibliography-wrapper =
+    .aria-label = Edit Bibliography Dialog
+    .aria-description = Navigate Collections and Items tables to find additional references and use { general-add } button to include them into the bibliography.
+    You may also select an entry from the list of cited references and use { general-remove } button to exlude it.
+    Use the editor after the references list to edit the exact format in which the reference will be cited.
 integration-quickFormatDialog-window =
     .title = { -app-name } - Quick Format Citation
 

chrome/skin/default/zotero/integration.css

@@ -353,7 +353,7 @@ richlistitem[selected="true"] {
 
 .zotero-simpleEditor-button {
 	background-color: transparent;
-	border: none;
+	border: 1px solid transparent;
 	cursor: pointer;
 	height: 30px;
 	outline: 0;
@@ -361,6 +361,10 @@ richlistitem[selected="true"] {
 	vertical-align: bottom;
 }
 
+.zotero-simpleEditor-button:focus-visible {
+	border: 1px solid #598bec;
+}
+
 .zotero-simpleEditor-button-selected {
 	background-color: #f0f0f0;
 }