From 97c10f9cce8134e863d97a7dec7d215e47605c0b Mon Sep 17 00:00:00 2001
From: Darshan-upadhyay1110 <darshan.upadhyay@collabora.com>
Date: Fri, 5 Jul 2024 18:57:58 +0530
Subject: [PATCH] Add 'title' attribute to iframe for accessibility

Signed-off-by: Darshan-upadhyay1110 <darshan.upadhyay@collabora.com>
---
 src/document.js     | 5 +++--
 src/view/Office.vue | 6 +++++-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/document.js b/src/document.js
index 69a127878f..3db1332eee 100644
--- a/src/document.js
+++ b/src/document.js
@@ -7,6 +7,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,
@@ -165,7 +166,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)
@@ -225,7 +226,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
index 69652335bc..41aae9d471 100644
--- 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
 		},