use simpler reader.ftl, construct announcements on the fly (#145)

Per zotero/zotero#4752 (comment), reader.ftl is simplified in zotero/zotero#4756. This adds necessary logic to the reader to fetch necessary localized components and piece them together into an announcement. Also, added zotero.ftl as the localization link, since without it general strings, such as option-or-alt, are not defined.
zotero · Oct 15, 2024 · 756ff21 · 756ff21
1 parent d298f21
commit 756ff21
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 4 deletions.
diff --git a/index.reader.html b/index.reader.html
@@ -9,6 +9,7 @@
 	<script src="resource://zotero/react-dom.js"></script>
 	<script src="resource://zotero/react-intl.js"></script>
 	<script src="resource://zotero/prop-types.js"></script>
+	<link rel="localization" href="zotero.ftl"/>
 	<link rel="localization" href="reader.ftl"/>
 	<% } %>
 </head>

diff --git a/src/common/reader.js b/src/common/reader.js
@@ -275,7 +275,8 @@ class Reader {
 								setTimeout(async () => {
 									// Temporary until web library supports fluent
 									if (!document.l10n) return;
-									let msg = await document.l10n.formatValue('pdfReader-a11yAnnotationCreated', { type : annotation.type } );
+									let annotationType = await document.l10n.formatValue(`pdfReader-${annotation.type}Annotation`);
+									let msg = await document.l10n.formatValue('pdfReader-a11yAnnotationCreated', { type : annotationType } );
 									this.setA11yMessage(msg);
 								}, 100);
 								if (select) {
@@ -793,7 +794,8 @@ class Reader {
 			setTimeout(async () => {
 				// Temporary until web library supports fluent
 				if (!document.l10n) return;
-				let msg = await document.l10n.formatValue('pdfReader-a11yAnnotationCreated', { type : annotation.type } );
+				let annotationType = await document.l10n.formatValue(`pdfReader-${annotation.type}Annotation`);
+				let msg = await document.l10n.formatValue('pdfReader-a11yAnnotationCreated', { type : annotationType } );
 				this.setA11yMessage(msg);
 			}, 100);
 			if (select) {
@@ -1224,8 +1226,22 @@ class Reader {
 					setTimeout(async () => {
 						// Temporary until web library supports fluent
 						if (!document.l10n) return;
-						let popupVisible = document.querySelector('.annotation-popup') ? "yes" : "no";
-						let a11yAnnouncement = await document.l10n.formatValue('pdfReader-a11yAnnotationSelected', { type: annotation.type, popupVisible });
+						let annotationType =  await document.l10n.formatValue(`pdfReader-${annotation.type}Annotation`);
+						let a11yAnnouncement = await document.l10n.formatValue('pdfReader-a11yAnnotationSelected', { type: annotationType });
+						// Announce if there is a popup.
+						if (document.querySelector('.annotation-popup')) {
+							a11yAnnouncement += ' ' + await document.l10n.formatValue('pdfReader-a11yAnnotationPopupAppeared');
+						}
+						// Announce available keyboard interface options for this annotation type
+						if (['highlight', 'underline'].includes(annotation.type)) {
+							a11yAnnouncement += ' ' + await document.l10n.formatValue('pdfReader-a11yEditTextAnnotation');
+						}
+						else if (['note', 'text', 'image'].includes(annotation.type)) {
+							a11yAnnouncement += ' ' + await document.l10n.formatValue('pdfReader-a11yMoveAnnotation');
+							if (['text', 'image'].includes(annotation.type)) {
+								a11yAnnouncement += ' ' + await document.l10n.formatValue('pdfReader-a11yResizeAnnotation');
+							}
+						}
 						// only announce if the content view is focused. E.g. if comment in
 						// sidebar has focus, say nothing as it will not be relevant
 						if (document.activeElement.nodeName === 'IFRAME') {