From 90a1c5a2674b89f3e8c12a073e530b0b07cb6c3b Mon Sep 17 00:00:00 2001
From: Jason Robinson <mail@jasonrobinson.me>
Date: Fri, 15 Jan 2021 15:57:14 +0200
Subject: [PATCH] WIP

---
 res/css/views/dialogs/_HostSignupDialog.scss  |  3 ++
 .../views/dialogs/HostSignupDialog.tsx        | 41 ++++++++++++-------
 2 files changed, 29 insertions(+), 15 deletions(-)

diff --git a/res/css/views/dialogs/_HostSignupDialog.scss b/res/css/views/dialogs/_HostSignupDialog.scss
index 316b7bc06c..2ef27614ec 100644
--- a/res/css/views/dialogs/_HostSignupDialog.scss
+++ b/res/css/views/dialogs/_HostSignupDialog.scss
@@ -34,9 +34,12 @@ limitations under the License.
 
         .mx_HostSignupDialog_buttons {
             margin-bottom: 24px;
+            display: flex;
+            justify-content: center;
 
             button {
                 padding: 12px;
+                margin: 0 16px;
             }
         }
     }
diff --git a/src/components/views/dialogs/HostSignupDialog.tsx b/src/components/views/dialogs/HostSignupDialog.tsx
index c2cbe382e8..430fd54b45 100644
--- a/src/components/views/dialogs/HostSignupDialog.tsx
+++ b/src/components/views/dialogs/HostSignupDialog.tsx
@@ -245,25 +245,36 @@ export default class HostSignupDialog extends React.PureComponent<IProps, IState
                                                         {para}
                                                     </p>;
                                                 })}
+                                                {this.config.info.additionalInfoLink &&
+                                                    <p><small>
+                                                        <a href={this.config.info.additionalInfoLink.href}
+                                                            target="_blank" rel="noopener noreferrer"
+                                                            title={this.config.info.additionalInfoLink.text}
+                                                        >
+                                                            {this.config.info.additionalInfoLink.text}
+                                                        </a>
+                                                    </small></p>
+                                                }
                                             </div>
                                         }
-                                        {this.config.info.additionalInfoLink &&
-                                            <p><small>
-                                                <a href={this.config.info.additionalInfoLink.href} target="_blank"
-                                                    rel="noopener noreferrer"
-                                                    title={this.config.info.additionalInfoLink.text}
-                                                >
-                                                    {this.config.info.additionalInfoLink.text}
-                                                </a>
-                                            </small></p>
-                                        }
                                     </div>
                                     <div className="mx_HostSignupDialog_buttons">
-                                        {/*TODO: what about accessibility? the signup flow is possibly not reader optimized*/}
-                                        <button onClick={this.closeDialog}>{this.config.info.cancelText}</button>
-                                        <button onClick={this.onStartClick} className="mx_Dialog_primary">
-                                            {this.config.info.continueText}
-                                        </button>
+                                        <AccessibleButton
+                                            onClick={this.closeDialog}
+                                            aria-label={this.config.info.cancelText}
+                                        >
+                                            <button>
+                                                {this.config.info.cancelText}
+                                            </button>
+                                        </AccessibleButton>
+                                        <AccessibleButton
+                                            onClick={this.onStartClick}
+                                            aria-label={this.config.info.continueText}
+                                        >
+                                            <button className="mx_Dialog_primary">
+                                                {this.config.info.continueText}
+                                            </button>
+                                        </AccessibleButton>
                                     </div>
                                     {this.config.info.footer &&
                                         <div className="mx_HostSignupDialog_text_light">