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>

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