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/dialogs/InviteDialog.tsx

@@ -274,7 +274,7 @@ class DMRoomTile extends React.PureComponent<IDMRoomTileProps> {
             : this.highlightName(userIdentifier || this.props.member.userId);
 
         return (
-            <div className="mx_InviteDialog_tile mx_InviteDialog_tile--room" onClick={this.onClick}>
+            <AccessibleButton className="mx_InviteDialog_tile mx_InviteDialog_tile--room" onClick={this.onClick}>
                 {stackedAvatar}
                 <span className="mx_InviteDialog_tile_nameStack">
                     <div className="mx_InviteDialog_tile_nameStack_name">
@@ -283,7 +283,7 @@ class DMRoomTile extends React.PureComponent<IDMRoomTileProps> {
                     <div className="mx_InviteDialog_tile_nameStack_userId">{caption}</div>
                 </span>
                 {timestamp}
-            </div>
+            </AccessibleButton>
         );
     }
 }

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>
         );
     }
 }

src/components/views/spaces/SpaceBasicSettings.tsx

@@ -76,7 +76,11 @@ export const SpaceAvatar: React.FC<Pick<IProps, "avatarUrl" | "avatarDisabled" |
         } else {
             avatarSection = (
                 <React.Fragment>
-                    <div className="mx_SpaceBasicSettings_avatar" onClick={() => avatarUploadRef.current?.click()} />
+                    <AccessibleButton
+                        className="mx_SpaceBasicSettings_avatar"
+                        onClick={() => avatarUploadRef.current?.click()}
+                        alt=""
+                    />
                     <AccessibleButton
                         onClick={() => avatarUploadRef.current?.click()}
                         kind="link"