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

@@ -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",

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"

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}

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}

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}

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} />;
     }
 }

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",