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/views/messages/MFileBody.tsx
+++ b/src/components/views/messages/MFileBody.tsx
@ -258,7 +258,9 @@ export default class MFileBody extends React.Component<IProps, IState> {
                              * We'll use it to learn how the download link
                              * would have been styled if it was rendered inline.
                              */ }
-                            { /* eslint-disable-next-line jsx-a11y/anchor-has-content */ }
+                            { /* this violates multiple eslint rules
+                            so ignore it completely */ }
+                            { /* eslint-disable-next-line */ }
                            <a ref={this.dummyLink} />
                        </div>
                        { /*
--- a/src/components/views/messages/MjolnirBody.tsx
+++ b/src/components/views/messages/MjolnirBody.tsx
@ -19,6 +19,7 @@ import { MatrixEvent } from "matrix-js-sdk/src/models/event";

 import { _t } from '../../../languageHandler';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import AccessibleButton from '../elements/AccessibleButton';

 interface IProps {
    mxEvent: MatrixEvent;
@ -40,7 +41,11 @@ export default class MjolnirBody extends React.Component<IProps> {
        return (
            <div className='mx_MjolnirBody'><i>{ _t(
                "You have ignored this user, so their message is hidden. <a>Show anyways.</a>",
-                {}, { a: (sub) => <a href="#" onClick={this.onAllowClick}>{ sub }</a> },
+                {}, {
+                    a: (sub) => <AccessibleButton kind="link_inline" onClick={this.onAllowClick}>
+                        { sub }
+                    </AccessibleButton>,
+                },
            ) }</i></div>
        );
    }
--- a/src/components/views/messages/ReactionsRow.tsx
+++ b/src/components/views/messages/ReactionsRow.tsx
@ -27,6 +27,7 @@ import ContextMenu, { aboveLeftOf, useContextMenu } from "../../structures/Conte
 import ReactionPicker from "../emojipicker/ReactionPicker";
 import ReactionsRowButton from "./ReactionsRowButton";
 import RoomContext from "../../../contexts/RoomContext";
+import AccessibleButton from "../elements/AccessibleButton";

 // The maximum number of reactions to initially show on a message.
 const MAX_ITEMS_WHEN_LIMITED = 8;
@ -201,13 +202,13 @@ export default class ReactionsRow extends React.PureComponent<IProps, IState> {
        let showAllButton;
        if ((items.length > MAX_ITEMS_WHEN_LIMITED + 1) && !showAll) {
            items = items.slice(0, MAX_ITEMS_WHEN_LIMITED);
-            showAllButton = <a
+            showAllButton = <AccessibleButton
+                kind="link_inline"
                className="mx_ReactionsRow_showAll"
-                href="#"
                onClick={this.onShowAllClick}
            >
                { _t("Show all") }
-            </a>;
+            </AccessibleButton>;
        }

        let addReactionButton;
--- a/src/components/views/messages/TextualBody.tsx
+++ b/src/components/views/messages/TextualBody.tsx
@ -45,6 +45,7 @@ import EditMessageComposer from '../rooms/EditMessageComposer';
 import LinkPreviewGroup from '../rooms/LinkPreviewGroup';
 import { IBodyProps } from "./IBodyProps";
 import RoomContext from "../../../contexts/RoomContext";
+import AccessibleButton from '../elements/AccessibleButton';

 const MAX_HIGHLIGHT_LENGTH = 4096;

@ -529,9 +530,9 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
        if (this.props.highlightLink) {
            body = <a href={this.props.highlightLink}>{ body }</a>;
        } else if (content.data && typeof content.data["org.matrix.neb.starter_link"] === "string") {
-            body = <a href="#"
+            body = <AccessibleButton kind="link_inline"
                onClick={this.onStarterLinkClick.bind(this, content.data["org.matrix.neb.starter_link"])}
-            >{ body }</a>;
+            >{ body }</AccessibleButton>;
        }

        let widgets;
--- a/src/components/views/messages/TileErrorBoundary.tsx
+++ b/src/components/views/messages/TileErrorBoundary.tsx
@ -23,6 +23,7 @@ import Modal from '../../../Modal';
 import SdkConfig from "../../../SdkConfig";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import BugReportDialog from '../dialogs/BugReportDialog';
+import AccessibleButton from '../elements/AccessibleButton';

 interface IProps {
    mxEvent: MatrixEvent;
@ -67,9 +68,9 @@ export default class TileErrorBoundary extends React.Component<IProps, IState> {

            let submitLogsButton;
            if (SdkConfig.get().bug_report_endpoint_url) {
-                submitLogsButton = <a onClick={this.onBugReport} href="#">
+                submitLogsButton = <AccessibleButton kind="link_inline" onClick={this.onBugReport}>
                    { _t("Submit logs") }
-                </a>;
+                </AccessibleButton>;
            }

            return (<div className={classNames(classes)}>
--- a/src/components/views/messages/ViewSourceEvent.tsx
+++ b/src/components/views/messages/ViewSourceEvent.tsx
@ -21,6 +21,7 @@ import classNames from 'classnames';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import { _t } from '../../../languageHandler';
+import AccessibleButton from '../elements/AccessibleButton';

 interface IProps {
    mxEvent: MatrixEvent;
@ -76,7 +77,8 @@ export default class ViewSourceEvent extends React.PureComponent<IProps, IState>

        return <span className={classes}>
            { content }
-            <button
+            <AccessibleButton
+                kind='link_inline'
                title={_t('toggle event')}
                className="mx_ViewSourceEvent_toggle"
                onClick={this.onToggle}