Enable jsx-a11y/click-events-have-key-events eslint rule (#10362)

* enable "jsx-a11y/alt-text" lint rule

* enable "jsx-a11y/label-has-associated-control"

* make Spoilers keyboard accessible

* make invite reason keyboard accessible

* make invite suggestions keyboard accessible

* make avatar upload in space basic settings keyboard accessible

* ignore jsx-a11y/click-events-have-key-events issues in tests

* Update test expectation

---------

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>

src/components/views/elements/InviteReason.tsx

@@ -19,6 +19,7 @@ import React from "react";
 
 import { sanitizedHtmlNode } from "../../../HtmlUtils";
 import { _t } from "../../../languageHandler";
+import AccessibleButton from "./AccessibleButton";
 
 interface IProps {
     reason: string;
@@ -56,9 +57,9 @@ export default class InviteReason extends React.PureComponent<IProps, IState> {
                 <div className="mx_InviteReason_reason">
                     {this.props.htmlReason ? sanitizedHtmlNode(this.props.htmlReason) : this.props.reason}
                 </div>
-                <div className="mx_InviteReason_view" onClick={this.onViewClick}>
+                <AccessibleButton kind="link_inline" className="mx_InviteReason_view" onClick={this.onViewClick}>
                     {_t("View message")}
-                </div>
+                </AccessibleButton>
             </div>
         );
     }

src/components/views/elements/Spoiler.tsx

@@ -50,7 +50,7 @@ export default class Spoiler extends React.Component<IProps, IState> {
         // as such, we pass the this.props.contentHtml instead and then set the raw
         // HTML content. This is secure as the contents have already been parsed previously
         return (
-            <span
+            <button
                 className={"mx_EventTile_spoiler" + (this.state.visible ? " visible" : "")}
                 onClick={this.toggleVisible}
             >
@@ -60,7 +60,7 @@ export default class Spoiler extends React.Component<IProps, IState> {
                     className="mx_EventTile_spoiler_content"
                     dangerouslySetInnerHTML={{ __html: this.props.contentHtml }}
                 />
-            </span>
+            </button>
         );
     }
 }