From a31af39ca8af8da06462d6d2cc3dd8d20093ca64 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Peter=20V=C3=A1gner?= <pvdeejay@gmail.com>
Date: Tue, 5 Dec 2017 13:52:20 +0100
Subject: [PATCH] Applied aria-describedby to all other dialogs that are using
 BaseDialog. Also added initial focus where it has not been set.

---
 .../views/dialogs/ChatCreateOrReuseDialog.js  | 11 +++++-----
 src/components/views/dialogs/ErrorDialog.js   | 14 +++++--------
 .../views/dialogs/InteractiveAuthDialog.js    |  8 +++++---
 .../views/dialogs/KeyShareDialog.js           |  7 ++++---
 .../dialogs/SessionRestoreErrorDialog.js      | 16 +++++++++++----
 .../views/dialogs/SetEmailDialog.js           |  5 ++++-
 src/components/views/dialogs/SetMxIdDialog.js |  7 ++++---
 .../views/dialogs/UnknownDeviceDialog.js      |  5 +++--
 .../login/InteractiveAuthEntryComponents.js   | 20 +++++++++++++------
 9 files changed, 57 insertions(+), 36 deletions(-)

diff --git a/src/components/views/dialogs/ChatCreateOrReuseDialog.js b/src/components/views/dialogs/ChatCreateOrReuseDialog.js
index e0578f3b53..0623177e1a 100644
--- a/src/components/views/dialogs/ChatCreateOrReuseDialog.js
+++ b/src/components/views/dialogs/ChatCreateOrReuseDialog.js
@@ -127,7 +127,7 @@ export default class ChatCreateOrReuseDialog extends React.Component {
                 </div>
                 <div className={labelClasses}><i>{ _t("Start new chat") }</i></div>
             </AccessibleButton>;
-            content = <div className="mx_Dialog_content">
+            content = <div className="mx_Dialog_content" id='mx_Dialog_content'>
                 { _t('You already have existing direct chats with this user:') }
                 <div className="mx_ChatCreateOrReuseDialog_tiles">
                     { this.state.tiles }
@@ -144,7 +144,7 @@ export default class ChatCreateOrReuseDialog extends React.Component {
             if (this.state.busyProfile) {
                 profile = <Spinner />;
             } else if (this.state.profileError) {
-                profile = <div className="error">
+                profile = <div className="error" role="alert">
                     Unable to load profile information for { this.props.userId }
                 </div>;
             } else {
@@ -160,14 +160,14 @@ export default class ChatCreateOrReuseDialog extends React.Component {
                 </div>;
             }
             content = <div>
-                <div className="mx_Dialog_content">
+                <div className="mx_Dialog_content" id='mx_Dialog_content'>
                     <p>
                         { _t('Click on the button below to start chatting!') }
                     </p>
                     { profile }
                 </div>
                 <div className="mx_Dialog_buttons">
-                    <button className="mx_Dialog_primary" onClick={this.props.onNewDMClick}>
+                    <button className="mx_Dialog_primary" onClick={this.props.onNewDMClick} autoFocus="true">
                         { _t('Start Chatting') }
                     </button>
                 </div>
@@ -179,6 +179,7 @@ export default class ChatCreateOrReuseDialog extends React.Component {
             <BaseDialog className='mx_ChatCreateOrReuseDialog'
                 onFinished={this.props.onFinished.bind(false)}
                 title={title}
+                contentId='mx_Dialog_content'
             >
                 { content }
             </BaseDialog>
@@ -186,7 +187,7 @@ export default class ChatCreateOrReuseDialog extends React.Component {
     }
 }
 
-ChatCreateOrReuseDialog.propTyps = {
+ChatCreateOrReuseDialog.propTypes = {
     userId: React.PropTypes.string.isRequired,
     // Called when clicking outside of the dialog
     onFinished: React.PropTypes.func.isRequired,
diff --git a/src/components/views/dialogs/ErrorDialog.js b/src/components/views/dialogs/ErrorDialog.js
index 97ed47e10f..0910264cef 100644
--- a/src/components/views/dialogs/ErrorDialog.js
+++ b/src/components/views/dialogs/ErrorDialog.js
@@ -51,22 +51,18 @@ export default React.createClass({
         };
     },
 
-    componentDidMount: function() {
-        if (this.props.focus) {
-            this.refs.button.focus();
-        }
-    },
-
     render: function() {
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
         return (
             <BaseDialog className="mx_ErrorDialog" onFinished={this.props.onFinished}
-                    title={this.props.title || _t('Error')}>
-                <div className="mx_Dialog_content">
+                    title={this.props.title || _t('Error')}
+                    contentId='mx_Dialog_content'
+            >
+                <div className="mx_Dialog_content" id='mx_Dialog_content'>
                     { this.props.description || _t('An error has occurred.') }
                 </div>
                 <div className="mx_Dialog_buttons">
-                    <button ref="button" className="mx_Dialog_primary" onClick={this.props.onFinished}>
+                    <button className="mx_Dialog_primary" onClick={this.props.onFinished} autoFocus={this.props.focus}>
                         { this.props.button || _t('OK') }
                     </button>
                 </div>
diff --git a/src/components/views/dialogs/InteractiveAuthDialog.js b/src/components/views/dialogs/InteractiveAuthDialog.js
index 59de7c7f59..d1273849ae 100644
--- a/src/components/views/dialogs/InteractiveAuthDialog.js
+++ b/src/components/views/dialogs/InteractiveAuthDialog.js
@@ -72,11 +72,12 @@ export default React.createClass({
         let content;
         if (this.state.authError) {
             content = (
-                <div>
-                    <div>{ this.state.authError.message || this.state.authError.toString() }</div>
+                <div id='mx_Dialog_content'>
+                    <div role={(this.state.authError.message || this.state.authError.toString()) ? "alert" : ""}>{ this.state.authError.message || this.state.authError.toString() }</div>
                     <br />
                     <AccessibleButton onClick={this._onDismissClick}
                         className="mx_UserSettings_button"
+                        autoFocus="true"
                     >
                         { _t("Dismiss") }
                     </AccessibleButton>
@@ -84,7 +85,7 @@ export default React.createClass({
             );
         } else {
             content = (
-                <div>
+                <div id='mx_Dialog_content'>
                     <InteractiveAuth ref={this._collectInteractiveAuth}
                         matrixClient={this.props.matrixClient}
                         authData={this.props.authData}
@@ -99,6 +100,7 @@ export default React.createClass({
             <BaseDialog className="mx_InteractiveAuthDialog"
                 onFinished={this.props.onFinished}
                 title={this.state.authError ? 'Error' : (this.props.title || _t('Authentication'))}
+                contentId='mx_Dialog_content'
             >
                 { content }
             </BaseDialog>
diff --git a/src/components/views/dialogs/KeyShareDialog.js b/src/components/views/dialogs/KeyShareDialog.js
index 9c8be27c89..821939ff0d 100644
--- a/src/components/views/dialogs/KeyShareDialog.js
+++ b/src/components/views/dialogs/KeyShareDialog.js
@@ -125,11 +125,11 @@ export default React.createClass({
         text = _t(text, {displayName: displayName});
 
         return (
-            <div>
+            <div id='mx_Dialog_content'>
                 <p>{ text }</p>
 
                 <div className="mx_Dialog_buttons">
-                    <button onClick={this._onVerifyClicked}>
+                    <button onClick={this._onVerifyClicked} autoFocus="true">
                         { _t('Start verification') }
                     </button>
                     <button onClick={this._onShareClicked}>
@@ -153,7 +153,7 @@ export default React.createClass({
             content = this._renderContent();
         } else {
             content = (
-                <div>
+                <div id='mx_Dialog_content'>
                     <p>{ _t('Loading device info...') }</p>
                     <Spinner />
                 </div>
@@ -164,6 +164,7 @@ export default React.createClass({
             <BaseDialog className='mx_KeyShareRequestDialog'
                 onFinished={this.props.onFinished}
                 title={_t('Encryption key request')}
+                contentId='mx_Dialog_content'
             >
                 { content }
             </BaseDialog>
diff --git a/src/components/views/dialogs/SessionRestoreErrorDialog.js b/src/components/views/dialogs/SessionRestoreErrorDialog.js
index 75ae0eda17..e68a097e80 100644
--- a/src/components/views/dialogs/SessionRestoreErrorDialog.js
+++ b/src/components/views/dialogs/SessionRestoreErrorDialog.js
@@ -29,6 +29,12 @@ export default React.createClass({
         onFinished: React.PropTypes.func.isRequired,
     },
 
+    componentDidMount: function() {
+        if (this.refs.bugreportLink) {
+            this.refs.bugreportLink.focus();
+        }
+    },
+
     _sendBugReport: function() {
         const BugReportDialog = sdk.getComponent("dialogs.BugReportDialog");
         Modal.createTrackedDialog('Session Restore Error', 'Send Bug Report Dialog', BugReportDialog, {});
@@ -48,7 +54,7 @@ export default React.createClass({
                 { _t(
                     "Otherwise, <a>click here</a> to send a bug report.",
                     {},
-                    { 'a': (sub) => <a onClick={this._sendBugReport} key="bugreport" href='#'>{ sub }</a> },
+                    { 'a': (sub) => <a ref="bugreportLink" onClick={this._sendBugReport} key="bugreport" href='#'>{ sub }</a> },
                 ) }
                 </p>
             );
@@ -56,8 +62,10 @@ export default React.createClass({
 
         return (
             <BaseDialog className="mx_ErrorDialog" onFinished={this.props.onFinished}
-                    title={_t('Unable to restore session')}>
-                <div className="mx_Dialog_content">
+                    title={_t('Unable to restore session')}
+                contentId='mx_Dialog_content'
+            >
+                <div className="mx_Dialog_content" id='mx_Dialog_content'>
                     <p>{ _t("We encountered an error trying to restore your previous session. If " +
                     "you continue, you will need to log in again, and encrypted chat " +
                     "history will be unreadable.") }</p>
@@ -68,7 +76,7 @@ export default React.createClass({
 
                     { bugreport }
                 </div>
-                <div className="mx_Dialog_buttons">
+                <div className="mx_Dialog_buttons" autoFocus={SdkConfig.get().bug_report_endpoint_url ? false : true}>
                     <button className="mx_Dialog_primary" onClick={this._continueClicked}>
                         { _t("Continue anyway") }
                     </button>
diff --git a/src/components/views/dialogs/SetEmailDialog.js b/src/components/views/dialogs/SetEmailDialog.js
index 2dd996953d..5a9569c1b5 100644
--- a/src/components/views/dialogs/SetEmailDialog.js
+++ b/src/components/views/dialogs/SetEmailDialog.js
@@ -41,6 +41,7 @@ export default React.createClass({
     },
 
     componentDidMount: function() {
+        this.refs.emailInputField.focus();
     },
 
     onEmailAddressChanged: function(value) {
@@ -130,6 +131,7 @@ export default React.createClass({
 
         const emailInput = this.state.emailBusy ? <Spinner /> : <EditableText
             className="mx_SetEmailDialog_email_input"
+            ref="emailInputField"
             placeholder={_t("Email address")}
             placeholderClassName="mx_SetEmailDialog_email_input_placeholder"
             blurToCancel={false}
@@ -139,9 +141,10 @@ export default React.createClass({
             <BaseDialog className="mx_SetEmailDialog"
                 onFinished={this.onCancelled}
                 title={this.props.title}
+                contentId='mx_Dialog_content'
             >
                 <div className="mx_Dialog_content">
-                    <p>
+                    <p id='mx_Dialog_content'>
                         { _t('This will allow you to reset your password and receive notifications.') }
                     </p>
                     { emailInput }
diff --git a/src/components/views/dialogs/SetMxIdDialog.js b/src/components/views/dialogs/SetMxIdDialog.js
index 6fc1d77682..5ef04f5be1 100644
--- a/src/components/views/dialogs/SetMxIdDialog.js
+++ b/src/components/views/dialogs/SetMxIdDialog.js
@@ -234,14 +234,14 @@ export default React.createClass({
                 "error": Boolean(this.state.usernameError),
                 "success": usernameAvailable,
             });
-            usernameIndicator = <div className={usernameIndicatorClasses}>
+            usernameIndicator = <div className={usernameIndicatorClasses} role="alert">
                 { usernameAvailable ? _t('Username available') : this.state.usernameError }
             </div>;
         }
 
         let authErrorIndicator = null;
         if (this.state.authError) {
-            authErrorIndicator = <div className="error">
+            authErrorIndicator = <div className="error" role="alert">
                 { this.state.authError }
             </div>;
         }
@@ -253,8 +253,9 @@ export default React.createClass({
             <BaseDialog className="mx_SetMxIdDialog"
                 onFinished={this.props.onFinished}
                 title={_t('To get started, please pick a username!')}
+                contentId='mx_Dialog_content'
             >
-                <div className="mx_Dialog_content">
+                <div className="mx_Dialog_content" id='mx_Dialog_content'>
                     <div className="mx_SetMxIdDialog_input_group">
                         <input type="text" ref="input_value" value={this.state.username}
                             autoFocus={true}
diff --git a/src/components/views/dialogs/UnknownDeviceDialog.js b/src/components/views/dialogs/UnknownDeviceDialog.js
index 34cf544bb7..245dbff361 100644
--- a/src/components/views/dialogs/UnknownDeviceDialog.js
+++ b/src/components/views/dialogs/UnknownDeviceDialog.js
@@ -143,8 +143,9 @@ export default React.createClass({
                             this.props.onFinished();
                 }}
                 title={_t('Room contains unknown devices')}
+                contentId='mx_Dialog_content'
             >
-                <GeminiScrollbar autoshow={false} className="mx_Dialog_content">
+                <GeminiScrollbar autoshow={false} className="mx_Dialog_content" id='mx_Dialog_content'>
                     <h4>
                         { _t('"%(RoomName)s" contains devices that you haven\'t seen before.', {RoomName: this.props.room.name}) }
                     </h4>
@@ -161,7 +162,7 @@ export default React.createClass({
                             }}>
                         { _t("Send anyway") }
                     </button>
-                    <button className="mx_Dialog_primary" autoFocus={true}
+                    <button className="mx_Dialog_primary"
                             onClick={() => {
                                 // XXX: temporary logging to try to diagnose
                                 // https://github.com/vector-im/riot-web/issues/3148
diff --git a/src/components/views/login/InteractiveAuthEntryComponents.js b/src/components/views/login/InteractiveAuthEntryComponents.js
index d0b6c8decb..81b84684fc 100644
--- a/src/components/views/login/InteractiveAuthEntryComponents.js
+++ b/src/components/views/login/InteractiveAuthEntryComponents.js
@@ -130,9 +130,10 @@ export const PasswordAuthEntry = React.createClass({
         return (
             <div>
                 <p>{ _t("To continue, please enter your password.") }</p>
-                <p>{ _t("Password:") }</p>
                 <form onSubmit={this._onSubmit}>
+                    <label htmlFor="passwordField">{ _t("Password:") }</label>
                     <input
+                        name="passwordField"
                         ref="passwordField"
                         className={passwordBoxClass}
                         onChange={this._onPasswordFieldChange}
@@ -142,7 +143,7 @@ export const PasswordAuthEntry = React.createClass({
                         { submitButtonOrSpinner }
                     </div>
                 </form>
-                <div className="error">
+                <div className="error" role={ this.props.errorText ? "alert" : ""}>
                     { this.props.errorText }
                 </div>
             </div>
@@ -184,7 +185,7 @@ export const RecaptchaAuthEntry = React.createClass({
                 <CaptchaForm sitePublicKey={sitePublicKey}
                     onCaptchaResponse={this._onCaptchaResponse}
                 />
-                <div className="error">
+                <div className="error" role={ this.props.errorText ? "alert" : ""}>
                     { this.props.errorText }
                 </div>
             </div>
@@ -384,6 +385,7 @@ export const MsisdnAuthEntry = React.createClass({
                                 className="mx_InteractiveAuthEntryComponents_msisdnEntry"
                                 value={this.state.token}
                                 onChange={this._onTokenChange}
+                                aria-label={ _t("Code")}
                             />
                             <br />
                             <input type="submit" value={_t("Submit")}
@@ -391,7 +393,7 @@ export const MsisdnAuthEntry = React.createClass({
                                 disabled={!enableSubmit}
                             />
                         </form>
-                        <div className="error">
+                        <div className="error" role={this.state.errorText ? "alert" : ""}>
                             { this.state.errorText }
                         </div>
                     </div>
@@ -426,6 +428,12 @@ export const FallbackAuthEntry = React.createClass({
         }
     },
 
+    focus: function() {
+        if (this.refs.fallbackButton) {
+            this.refs.fallbackButton.focus();
+        }
+    },
+
     _onShowFallbackClick: function() {
         const url = this.props.matrixClient.getFallbackAuthUrl(
             this.props.loginType,
@@ -446,8 +454,8 @@ export const FallbackAuthEntry = React.createClass({
     render: function() {
         return (
             <div>
-                <a onClick={this._onShowFallbackClick}>{ _t("Start authentication") }</a>
-                <div className="error">
+                <a ref="fallbackButton" onClick={this._onShowFallbackClick}>{ _t("Start authentication") }</a>
+                <div className="error" role={ this.props.errorText ? "alert" : ""}>
                     { this.props.errorText }
                 </div>
             </div>