Merge pull request #3667 from matrix-org/bwindels/toasts-a11y

a11y: adjustments for toasts

src/components/structures/ToastContainer.js

@@ -50,35 +50,34 @@ export default class ToastContainer extends React.Component {
 
     render() {
         const totalCount = this.state.toasts.length;
-        if (totalCount === 0) {
-            return null;
-        }
         const isStacked = totalCount > 1;
+        let toast;
+        if (totalCount !== 0) {
             const topToast = this.state.toasts[0];
             const {title, icon, key, component, props} = topToast;
-
-        const containerClasses = classNames("mx_ToastContainer", {
-            "mx_ToastContainer_stacked": isStacked,
-        });
-
             const toastClasses = classNames("mx_Toast_toast", {
                 "mx_Toast_hasIcon": icon,
                 [`mx_Toast_icon_${icon}`]: icon,
             });
-
             const countIndicator = isStacked ? _t(" (1/%(totalCount)s)", {totalCount}) : null;
 
             const toastProps = Object.assign({}, props, {
                 dismiss: this.dismissTopToast,
                 key,
             });
-
+            toast = (<div className={toastClasses}>
-        return (
-            <div className={containerClasses}>
-                <div className={toastClasses}>
                 <h2>{title}{countIndicator}</h2>
                 <div className="mx_Toast_body">{React.createElement(component, toastProps)}</div>
-                </div>
+            </div>);
+        }
+
+        const containerClasses = classNames("mx_ToastContainer", {
+            "mx_ToastContainer_stacked": isStacked,
+        });
+
+        return (
+            <div className={containerClasses} role="alert">
+                {toast}
             </div>
         );
     }

src/components/views/toasts/VerificationRequestToast.js

@@ -108,7 +108,7 @@ export default class VerificationRequestToast extends React.PureComponent {
         }
         return (<div>
             <div className="mx_Toast_description">{nameLabel}</div>
-            <div className="mx_Toast_buttons">
+            <div className="mx_Toast_buttons" aria-live="off">
                 <FormButton label={_t("Decline (%(counter)s)", {counter: this.state.counter})} kind="danger" onClick={this.cancel} />
                 <FormButton label={_t("Accept")} onClick={this.accept} />
             </div>