A11y - fix anchors-as-buttons (#7444)

* add link_inline accessiblebutton variant * valid anchors in SecurityRoomSettingsTab Signed-off-by: Kerry Archibald <kerrya@element.io> * new room intro link button Signed-off-by: Kerry Archibald <kerrya@element.io> * replace anchor with button in rerequest encryption keys message Signed-off-by: Kerry Archibald <kerrya@element.io> * inline button in UrlPreviewSettings Signed-off-by: Kerry Archibald <kerrya@element.io> * ButtonResetDefault mixin Signed-off-by: Kerry Archibald <kerrya@element.io> * inline link buttons in TextForEvent Signed-off-by: Kerry Archibald <kerrya@element.io> * fix anchors in InviteDialog Signed-off-by: Kerry Archibald <kerrya@element.io> * fix anchors in DevToolsDialog Signed-off-by: Kerry Archibald <kerrya@element.io> * fix anchors in login/registration/reset pword flows Signed-off-by: Kerry Archibald <kerrya@element.io> * fix types after fixing anchors in devtools Signed-off-by: Kerry Archibald <kerrya@element.io> * fix anchors in MemberEventListSummary Signed-off-by: Kerry Archibald <kerrya@element.io> * fix anchors in ReactionsRow and RoomUpgrade Signed-off-by: Kerry Archibald <kerrya@element.io> * fix anchors in ReplyChain Signed-off-by: Kerry Archibald <kerrya@element.io> * fix more anchors Signed-off-by: Kerry Archibald <kerrya@element.io> * fix anchors in auth comps * stylelint fixes Signed-off-by: Kerry Archibald <kerrya@element.io> * remove ignore of jsx-a11y rule that is not added yet Signed-off-by: Kerry Archibald <kerrya@element.io> * devtools style important explainer Signed-off-by: Kerry Archibald <kerrya@element.io> * translate button alt in devtools dialog Signed-off-by: Kerry Archibald <kerrya@element.io> * AccessibleButton is reactionsrow Signed-off-by: Kerry Archibald <kerrya@element.io> * fix viewsourcevent button placement, use AccessibleButton Signed-off-by: Kerry Archibald <kerrya@element.io> * use AccessibleButton in EventTile Signed-off-by: Kerry Archibald <kerrya@element.io> * unignore jsx-a11y/anchor-is-valid Signed-off-by: Kerry Archibald <kerrya@element.io> * fix lint issue in test jsx Signed-off-by: Kerry Archibald <kerrya@element.io> * update coment Signed-off-by: Kerry Archibald <kerrya@element.io>
2022-01-07 10:40:53 +01:00 · 2022-01-07 10:40:53 +01:00 · fed53a268b
commit fed53a268b
parent 2b9eed5357
39 changed files with 251 additions and 109 deletions
--- a/src/components/structures/MatrixChat.tsx
+++ b/src/components/structures/MatrixChat.tsx
@ -2162,9 +2162,9 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                    <div className="mx_MatrixChat_splash">
                        { errorBox }
                        <Spinner />
-                        <a href="#" className="mx_MatrixChat_splashButtons" onClick={this.onLogoutClick}>
+                        <AccessibleButton kind='link_inline' className="mx_MatrixChat_splashButtons" onClick={this.onLogoutClick}>
                            { _t('Logout') }
-                        </a>
+                        </AccessibleButton>
                    </div>
                );
            }
--- a/src/components/structures/auth/ForgotPassword.tsx
+++ b/src/components/structures/auth/ForgotPassword.tsx
@ -38,6 +38,7 @@ import ErrorDialog from "../../views/dialogs/ErrorDialog";
 import AuthHeader from "../../views/auth/AuthHeader";
 import AuthBody from "../../views/auth/AuthBody";
 import PassphraseConfirmField from "../../views/auth/PassphraseConfirmField";
+import AccessibleButton from '../../views/elements/AccessibleButton';

 enum Phase {
    // Show the forgot password inputs
@ -338,9 +339,9 @@ export default class ForgotPassword extends React.Component<IProps, IState> {
                    value={_t('Send Reset Email')}
                />
            </form>
-            <a className="mx_AuthBody_changeFlow" onClick={this.onLoginClick} href="#">
+            <AccessibleButton kind='link_inline' className="mx_AuthBody_changeFlow" onClick={this.onLoginClick}>
                { _t('Sign in instead') }
-            </a>
+            </AccessibleButton>
        </div>;
    }

--- a/src/components/structures/auth/Login.tsx
+++ b/src/components/structures/auth/Login.tsx
@ -38,6 +38,7 @@ import ServerPicker from "../../views/elements/ServerPicker";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import AuthBody from "../../views/auth/AuthBody";
 import AuthHeader from "../../views/auth/AuthHeader";
+import AccessibleButton from '../../views/elements/AccessibleButton';

 // These are used in several places, and come from the js-sdk's autodiscovery
 // stuff. We define them here so that they'll be picked up by i18n.
@ -588,7 +589,10 @@ export default class LoginComponent extends React.PureComponent<IProps, IState>
            footer = (
                <span className="mx_AuthBody_changeFlow">
                    { _t("New? <a>Create account</a>", {}, {
-                        a: sub => <a onClick={this.onTryRegisterClick} href="#">{ sub }</a>,
+                        a: sub =>
+                            <AccessibleButton kind='link_inline' onClick={this.onTryRegisterClick}>
+                                { sub }
+                            </AccessibleButton>,
                    }) }
                </span>
            );
--- a/src/components/structures/auth/Registration.tsx
+++ b/src/components/structures/auth/Registration.tsx
@ -538,16 +538,20 @@ export default class Registration extends React.Component<IProps, IState> {

        const signIn = <span className="mx_AuthBody_changeFlow">
            { _t("Already have an account? <a>Sign in here</a>", {}, {
-                a: sub => <a onClick={this.onLoginClick} href="#">{ sub }</a>,
+                a: sub => <AccessibleButton kind='link_inline' onClick={this.onLoginClick}>{ sub }</AccessibleButton>,
            }) }
        </span>;

        // Only show the 'go back' button if you're not looking at the form
        let goBack;
        if (this.state.doingUIAuth) {
-            goBack = <a className="mx_AuthBody_changeFlow" onClick={this.onGoToFormClicked} href="#">
+            goBack = <AccessibleButton
+                kind='link_inline'
+                className="mx_AuthBody_changeFlow"
+                onClick={this.onGoToFormClicked}
+            >
                { _t('Go back') }
-            </a>;
+            </AccessibleButton>;
        }

        let body;
--- a/src/components/structures/auth/SetupEncryptionBody.tsx
+++ b/src/components/structures/auth/SetupEncryptionBody.tsx
@ -121,7 +121,7 @@ export default class SetupEncryptionBody extends React.Component<IProps, IState>
        store.returnAfterSkip();
    };

-    private onResetClick = (ev: React.MouseEvent<HTMLAnchorElement>) => {
+    private onResetClick = (ev: React.MouseEvent<HTMLButtonElement>) => {
        ev.preventDefault();
        const store = SetupEncryptionStore.sharedInstance();
        store.reset();
@ -214,10 +214,9 @@ export default class SetupEncryptionBody extends React.Component<IProps, IState>
                        </div>
                        <div className="mx_SetupEncryptionBody_reset">
                            { _t("Forgotten or lost all recovery methods? <a>Reset all</a>", null, {
-                                a: (sub) => <a
-                                    href=""
+                                a: (sub) => <button
                                    onClick={this.onResetClick}
-                                    className="mx_SetupEncryptionBody_reset_link">{ sub }</a>,
+                                    className="mx_SetupEncryptionBody_reset_link">{ sub }</button>,
                            }) }
                        </div>
                    </div>