Add 'title' attribute to iframe for accessibility

Signed-off-by: Darshan-upadhyay1110 <darshan.upadhyay@collabora.com>
nextcloud · Jul 15, 2024 · f209915 · f209915
1 parent 5849f9d
commit f209915
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 3 deletions.
diff --git a/src/document.js b/src/document.js
@@ -11,6 +11,7 @@ import Config from './services/config.tsx'
 import { getUIDefaults, generateCSSVarTokens, getCollaboraTheme } from './helpers/coolParameters.js'
 import { enableScrollLock } from './helpers/safariFixer.js'
 import PostMessageService from './services/postMessage.tsx'
+import { getCapabilities } from './services/capabilities.ts'
 import {
 	callMobileMessage,
 	isDirectEditing,
@@ -171,7 +172,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="' + getCapabilities().productName + '"/>'
 
 			$('#revViewer').append(form)
 			$('#revViewer').append(frame)
@@ -231,7 +232,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="' + getCapabilities().productName + '"/>'
 
 			$('#mainContainer').append(form)
 			$('#mainContainer').append(frame)

diff --git a/src/view/Office.vue b/src/view/Office.vue
@@ -64,7 +64,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') }}
@@ -194,6 +195,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
 		},