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>

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