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>

cypress/e2e/composer/composer.spec.ts

@@ -173,7 +173,7 @@ describe("Composer", () => {
                     cy.findByRole("textbox").type("this is the spoiler text ");
                     cy.findByRole("button", { name: "Send message" }).click();
                     // Check that a spoiler item has appeared in the timeline and contains the spoiler command text
-                    cy.get("span.mx_EventTile_spoiler").should("exist");
+                    cy.get("button.mx_EventTile_spoiler").should("exist");
                     cy.findByText("this is the spoiler text").should("exist");
                 });
             });

res/css/views/rooms/_EventTile.pcss

@@ -809,6 +809,16 @@ $left-gutter: 64px;
 .mx_EventTile_spoiler {
     cursor: pointer;
 
+    // clear button styles
+    appearance: none;
+    background: none;
+    border: none;
+    padding: 0;
+    margin: 0;
+    font-size: inherit;
+    font-family: inherit;
+    line-height: inherit;
+
     .mx_EventTile_spoiler_reason {
         color: $event-timestamp-color;
         font-size: $font-11px;
@@ -821,6 +831,7 @@ $left-gutter: 64px;
 
     &.visible > .mx_EventTile_spoiler_content {
         filter: none;
+        user-select: auto;
     }
 }
 

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"

test/components/structures/PictureInPictureDragger-test.tsx

@@ -92,6 +92,7 @@ describe("PictureInPictureDragger", () => {
                 <PictureInPictureDragger draggable={true}>
                     {[
                         ({ onStartMoving }) => (
+                            // eslint-disable-next-line jsx-a11y/click-events-have-key-events
                             <div onMouseDown={onStartMoving} onClick={clickSpy}>
                                 Hello
                             </div>

test/components/views/elements/Pill-test.tsx

@@ -60,6 +60,7 @@ describe("<Pill>", () => {
         } as PillProps;
         // wrap Pill with a div to allow testing of event bubbling
         renderResult = render(
+            // eslint-disable-next-line jsx-a11y/click-events-have-key-events
             <div onClick={pillParentClickHandler}>
                 <Pill {...withDefault} />
             </div>,

test/components/views/messages/TextualBody-test.tsx

@@ -293,10 +293,10 @@ describe("<TextualBody />", () => {
             expect(content).toContainHTML(
                 '<span class="mx_EventTile_body markdown-body" dir="auto">' +
                     "Hey <span>" +
-                    '<span class="mx_EventTile_spoiler">' +
+                    '<button class="mx_EventTile_spoiler">' +
                     '<span class="mx_EventTile_spoiler_reason">(movie)</span>&nbsp;' +
                     '<span class="mx_EventTile_spoiler_content"><span>the movie was awesome</span></span>' +
-                    "</span></span></span>",
+                    "</span></button></span>",
             );
         });