From 26e1570dd6b038b81e7fa9d62ff8d8d942fcf611 Mon Sep 17 00:00:00 2001
From: Kerry <kerrya@element.io>
Date: Mon, 24 Jan 2022 15:07:54 +0100
Subject: [PATCH] a11y - fix iframes without title (#7614)

* iframe title in AppTile

Signed-off-by: Kerry Archibald <kerrya@element.io>

* iframe title in hostSignupDialog

Signed-off-by: Kerry Archibald <kerrya@element.io>

* iframe title in MFileBody

* iframe titles in modal widget and int man

Signed-off-by: Kerry Archibald <kerrya@element.io>

* enable jsx-a11y/iframe-has-title rule

Signed-off-by: Kerry Archibald <kerrya@element.io>
---
 .eslintrc.js                                         | 1 -
 src/components/views/dialogs/HostSignupDialog.tsx    | 6 ++++++
 src/components/views/dialogs/ModalWidgetDialog.tsx   | 1 +
 src/components/views/elements/AppTile.tsx            | 5 +++++
 src/components/views/messages/MFileBody.tsx          | 2 ++
 src/components/views/settings/IntegrationManager.tsx | 2 +-
 src/i18n/strings/en_EN.json                          | 4 ++--
 7 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 37379f1304..2fb1cc943d 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -45,7 +45,6 @@ module.exports = {
         "jsx-a11y/alt-text": "off",
         "jsx-a11y/aria-activedescendant-has-tabindex": "off",
         "jsx-a11y/click-events-have-key-events": "off",
-        "jsx-a11y/iframe-has-title": "off",
         "jsx-a11y/interactive-supports-focus": "off",
         "jsx-a11y/label-has-associated-control": "off",
         "jsx-a11y/media-has-caption": "off",
diff --git a/src/components/views/dialogs/HostSignupDialog.tsx b/src/components/views/dialogs/HostSignupDialog.tsx
index b749c7483b..0158640493 100644
--- a/src/components/views/dialogs/HostSignupDialog.tsx
+++ b/src/components/views/dialogs/HostSignupDialog.tsx
@@ -281,6 +281,12 @@ export default class HostSignupDialog extends React.PureComponent<IProps, IState
                             }
                             { !this.state.error &&
                                 <iframe
+                                    title={_t(
+                                        "Upgrade to %(hostSignupBrand)s",
+                                        {
+                                            hostSignupBrand: this.config.brand,
+                                        },
+                                    )}
                                     src={this.config.url}
                                     ref={this.iframeRef}
                                     sandbox="allow-forms allow-scripts allow-same-origin allow-popups"
diff --git a/src/components/views/dialogs/ModalWidgetDialog.tsx b/src/components/views/dialogs/ModalWidgetDialog.tsx
index 057dff5d53..d96a642404 100644
--- a/src/components/views/dialogs/ModalWidgetDialog.tsx
+++ b/src/components/views/dialogs/ModalWidgetDialog.tsx
@@ -198,6 +198,7 @@ export default class ModalWidgetDialog extends React.PureComponent<IProps, IStat
             </div>
             <div>
                 <iframe
+                    title={this.widget.name}
                     ref={this.appFrame}
                     sandbox="allow-forms allow-scripts allow-same-origin"
                     src={widgetUrl}
diff --git a/src/components/views/elements/AppTile.tsx b/src/components/views/elements/AppTile.tsx
index 6cf55d1eff..a24fa6477a 100644
--- a/src/components/views/elements/AppTile.tsx
+++ b/src/components/views/elements/AppTile.tsx
@@ -46,6 +46,7 @@ import { IApp } from "../../../stores/WidgetStore";
 import { WidgetLayoutStore, Container } from "../../../stores/widgets/WidgetLayoutStore";
 import { OwnProfileStore } from '../../../stores/OwnProfileStore';
 import { UPDATE_EVENT } from '../../../stores/AsyncStore';
+import WidgetUtils from '../../../utils/WidgetUtils';
 
 interface IProps {
     app: IApp;
@@ -471,6 +472,9 @@ export default class AppTile extends React.Component<IProps, IState> {
                 <Spinner message={_t("Loading...")} />
             </div>
         );
+
+        const widgetTitle = WidgetUtils.getWidgetName(this.props.app);
+
         if (this.sgWidget === null) {
             appTileBody = (
                 <div className={appTileBodyClass} style={appTileBodyStyles}>
@@ -509,6 +513,7 @@ export default class AppTile extends React.Component<IProps, IState> {
                     <div className={appTileBodyClass + (this.state.loading ? 'mx_AppLoading' : '')} style={appTileBodyStyles}>
                         { this.state.loading && loadingElement }
                         <iframe
+                            title={widgetTitle}
                             allow={iframeFeatures}
                             ref={this.iframeRefChange}
                             src={this.sgWidget.embedUrl}
diff --git a/src/components/views/messages/MFileBody.tsx b/src/components/views/messages/MFileBody.tsx
index 66fd7eb842..3df84b5101 100644
--- a/src/components/views/messages/MFileBody.tsx
+++ b/src/components/views/messages/MFileBody.tsx
@@ -272,6 +272,8 @@ export default class MFileBody extends React.Component<IProps, IState> {
                             be suitable to just remove this bit of code.
                          */ }
                         <iframe
+                            aria-hidden
+                            title={presentableTextForFile(this.content, _t("Attachment"), true, true)}
                             src={url}
                             onLoad={() => this.downloadFile(this.fileName, this.linkText)}
                             ref={this.iframe}
diff --git a/src/components/views/settings/IntegrationManager.tsx b/src/components/views/settings/IntegrationManager.tsx
index f30b3f2961..e11e3bd9b8 100644
--- a/src/components/views/settings/IntegrationManager.tsx
+++ b/src/components/views/settings/IntegrationManager.tsx
@@ -101,6 +101,6 @@ export default class IntegrationManager extends React.Component<IProps, IState>
             );
         }
 
-        return <iframe src={this.props.url} onError={this.onError} />;
+        return <iframe title={_t("Integration manager")} src={this.props.url} onError={this.onError} />;
     }
 }
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 38b3a8453e..0583d7e096 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -1256,6 +1256,7 @@
     "Connecting to integration manager...": "Connecting to integration manager...",
     "Cannot connect to integration manager": "Cannot connect to integration manager",
     "The integration manager is offline or it cannot reach your homeserver.": "The integration manager is offline or it cannot reach your homeserver.",
+    "Integration manager": "Integration manager",
     "Private (invite only)": "Private (invite only)",
     "Only invited people can join.": "Only invited people can join.",
     "Anyone can find and join.": "Anyone can find and join.",
@@ -2580,6 +2581,7 @@
     "%(hostSignupBrand)s Setup": "%(hostSignupBrand)s Setup",
     "Maximise dialog": "Maximise dialog",
     "Minimise dialog": "Minimise dialog",
+    "Upgrade to %(hostSignupBrand)s": "Upgrade to %(hostSignupBrand)s",
     "Verify this user to mark them as trusted. Trusting users gives you extra peace of mind when using end-to-end encrypted messages.": "Verify this user to mark them as trusted. Trusting users gives you extra peace of mind when using end-to-end encrypted messages.",
     "Verifying this user will mark their session as trusted, and also mark your session as trusted to them.": "Verifying this user will mark their session as trusted, and also mark your session as trusted to them.",
     "Verify this device to mark it as trusted. Trusting this device gives you and other users extra peace of mind when using end-to-end encrypted messages.": "Verify this device to mark it as trusted. Trusting this device gives you and other users extra peace of mind when using end-to-end encrypted messages.",
@@ -2782,7 +2784,6 @@
     "Missing session data": "Missing session data",
     "Some session data, including encrypted message keys, is missing. Sign out and sign in to fix this, restoring keys from backup.": "Some session data, including encrypted message keys, is missing. Sign out and sign in to fix this, restoring keys from backup.",
     "Your browser likely removed this data when running low on disk space.": "Your browser likely removed this data when running low on disk space.",
-    "Integration manager": "Integration manager",
     "Find others by phone or email": "Find others by phone or email",
     "Be found by phone or email": "Be found by phone or email",
     "Use bots, bridges, widgets and sticker packs": "Use bots, bridges, widgets and sticker packs",
@@ -3012,7 +3013,6 @@
     "Send a Direct Message": "Send a Direct Message",
     "Explore Public Rooms": "Explore Public Rooms",
     "Create a Group Chat": "Create a Group Chat",
-    "Upgrade to %(hostSignupBrand)s": "Upgrade to %(hostSignupBrand)s",
     "Open dial pad": "Open dial pad",
     "Public community": "Public community",
     "Private community": "Private community",