Add 'title' attribute to iframe for accessibility

Signed-off-by: Darshan-upadhyay1110 <[email protected]>
nextcloud · Jul 15, 2024 · 77539a2 · 77539a2
1 parent 9651ebe
commit 77539a2
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 3 deletions.
diff --git a/src/document.js b/src/document.js
@@ -165,7 +165,7 @@ const documentsMain = {
 				+ '</form>'
 
 			// iframe that contains the Collabora Online Viewer
-			const frame = '<iframe data-cy="coolframe" id="loleafletframe" name="loleafletframe_viewer" allowfullscreen allow="clipboard-read *; clipboard-write *" nonce="' + btoa(getRequestToken()) + '" style="width:100%;height:100%;position:absolute;"/>'
+			const frame = '<iframe data-cy="coolframe" id="loleafletframe" name="loleafletframe_viewer" allowfullscreen allow="clipboard-read *; clipboard-write *" nonce="' + btoa(getRequestToken()) + '" style="width:100%;height:100%;position:absolute;" title="' + loadState('richdocuments', 'productName', 'Nextcloud Office') + '"/>'
 
 			$('#revViewer').append(form)
 			$('#revViewer').append(frame)
@@ -225,7 +225,7 @@ const documentsMain = {
 				+ '</form>'
 
 			// iframe that contains the Collabora Online
-			const frame = '<iframe data-cy="coolframe" id="loleafletframe" name="loleafletframe" nonce="' + btoa(getRequestToken()) + '" scrolling="no" allowfullscreen allow="clipboard-read *; clipboard-write *" style="width:100%;height:100%;position:absolute;" />'
+			const frame = '<iframe data-cy="coolframe" id="loleafletframe" name="loleafletframe" nonce="' + btoa(getRequestToken()) + '" scrolling="no" allowfullscreen allow="clipboard-read *; clipboard-write *" style="width:100%;height:100%;position:absolute;" title="' + loadState('richdocuments', 'productName', 'Nextcloud Office') + '"/>'
 
 			$('#mainContainer').append(form)
 			$('#mainContainer').append(frame)

diff --git a/src/view/Office.vue b/src/view/Office.vue
@@ -81,7 +81,8 @@
 			allow="clipboard-read *; clipboard-write *"
 			class="office-viewer__iframe"
 			:style="{visibility: showIframe ? 'visible' : 'hidden' }"
-			:src="iframeSrc" />
+			:src="iframeSrc"
+			:title="iframeTitle" />
 
 		<ZoteroHint :show.sync="showZotero" @submit="reload" />
 	</div>
@@ -196,6 +197,9 @@ export default {
 		showIframe() {
 			return this.loading >= LOADING_STATE.FRAME_READY || this.debug
 		},
+		iframeTitle() {
+			return loadState('richdocuments', 'productName', 'Nextcloud Office')
+		},
 		showLoadingIndicator() {
 			return this.loading < LOADING_STATE.FRAME_READY
 		},