Improve screen reader accessibility of auth pages (#31236)

* Improve screen reader accessibility of auth pages

Using a combination of auto-focus + aria-live to ensure content is read as the states progress

For https://element-io.atlassian.net/browse/PSB-971

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update snapshot

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update snapshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Fix double landmark

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update screenshot

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

src/components/views/auth/AuthBody.tsx

@@ -14,5 +14,5 @@ interface Props {
 }
 
 export default function AuthBody({ flex, className, children }: PropsWithChildren<Props>): JSX.Element {
-    return <main className={classNames("mx_AuthBody", className, { mx_AuthBody_flex: flex })}>{children}</main>;
+    return <div className={classNames("mx_AuthBody", className, { mx_AuthBody_flex: flex })}>{children}</div>;
 }

src/components/views/auth/AuthPage.tsx

@@ -89,9 +89,14 @@ export default class AuthPage extends React.PureComponent<React.PropsWithChildre
             <div className="mx_AuthPage" style={pageStyle}>
                 <div className={modalClasses} style={modalStyle}>
                     {modalBlur}
-                    <div className="mx_AuthPage_modalContent" style={modalContentStyle}>
+                    <main
+                        className="mx_AuthPage_modalContent"
+                        style={modalContentStyle}
+                        tabIndex={-1}
+                        aria-live="polite"
+                    >
                         {this.props.children}
-                    </div>
+                    </main>
                 </div>
                 <AuthFooter />
             </div>

src/components/views/auth/Welcome.tsx

@@ -26,6 +26,7 @@ export default class Welcome extends React.PureComponent<EmptyObject> {
         }
 
         const replaceMap: Record<string, string> = {
+            "$brand": SdkConfig.get("brand"),
             "$riot:ssoUrl": "#/start_sso",
             "$riot:casUrl": "#/start_cas",
             "$matrixLogo": MATRIX_LOGO_HTML,