Add 'title' attribute to iframe for accessibility

Signed-off-by: Darshan-upadhyay1110 <darshan.upadhyay@collabora.com>
nextcloud · Jul 9, 2024 · 4f66904 · 4f66904
1 parent f020d39
commit 4f66904
Show file tree

Hide file tree

Showing 2 changed files with 5 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="t('richdocuments', '{productName}', { productName })"/>
 
 		<NcButton v-if="isEmbedded && !hasWidgetEditingEnabled" class="toggle-interactive" @click="toggleEdit">
 			{{ t('richdocuments', 'Edit') }}