Add 'title' attribute to iframe for accessibility

Signed-off-by: Darshan-upadhyay1110 <[email protected]>
nextcloud · Jul 15, 2024 · b22cb5a · b22cb5a
1 parent 6b2bb8f
commit b22cb5a
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
@@ -167,7 +167,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)
@@ -227,7 +227,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" />
 
 		<NcButton v-if="isEmbedded && !hasWidgetEditingEnabled" class="toggle-interactive" @click="toggleEdit">
 			{{ t('richdocuments', 'Edit') }}
@@ -211,6 +212,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
 		},