From e0d498e33804dcc9cf189ccf96ff628786e7d656 Mon Sep 17 00:00:00 2001 From: Kerry Date: Wed, 9 Aug 2023 18:27:31 +1200 Subject: [PATCH] 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 | 2 +- res/css/views/rooms/_EventTile.pcss | 11 +++++++++++ src/components/views/dialogs/InviteDialog.tsx | 4 ++-- src/components/views/elements/InviteReason.tsx | 5 +++-- src/components/views/elements/Spoiler.tsx | 4 ++-- src/components/views/spaces/SpaceBasicSettings.tsx | 6 +++++- .../structures/PictureInPictureDragger-test.tsx | 1 + test/components/views/elements/Pill-test.tsx | 1 + test/components/views/messages/TextualBody-test.tsx | 4 ++-- 9 files changed, 28 insertions(+), 10 deletions(-) diff --git a/cypress/e2e/composer/composer.spec.ts b/cypress/e2e/composer/composer.spec.ts index 7e4d2cf986..85e258a127 100644 --- a/cypress/e2e/composer/composer.spec.ts +++ b/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"); }); }); diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss index a8c146a32a..7d68dc98d9 100644 --- a/res/css/views/rooms/_EventTile.pcss +++ b/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; } } diff --git a/src/components/views/dialogs/InviteDialog.tsx b/src/components/views/dialogs/InviteDialog.tsx index ceedfd5c81..67818a308a 100644 --- a/src/components/views/dialogs/InviteDialog.tsx +++ b/src/components/views/dialogs/InviteDialog.tsx @@ -274,7 +274,7 @@ class DMRoomTile extends React.PureComponent { : this.highlightName(userIdentifier || this.props.member.userId); return ( -
+ {stackedAvatar}
@@ -283,7 +283,7 @@ class DMRoomTile extends React.PureComponent {
{caption}
{timestamp} -
+ ); } } diff --git a/src/components/views/elements/InviteReason.tsx b/src/components/views/elements/InviteReason.tsx index 78b332b353..a893a71983 100644 --- a/src/components/views/elements/InviteReason.tsx +++ b/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 {
{this.props.htmlReason ? sanitizedHtmlNode(this.props.htmlReason) : this.props.reason}
-
+ {_t("View message")} -
+
); } diff --git a/src/components/views/elements/Spoiler.tsx b/src/components/views/elements/Spoiler.tsx index 5cc28bd7d4..e013237a88 100644 --- a/src/components/views/elements/Spoiler.tsx +++ b/src/components/views/elements/Spoiler.tsx @@ -50,7 +50,7 @@ export default class Spoiler extends React.Component { // 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 ( - @@ -60,7 +60,7 @@ export default class Spoiler extends React.Component { className="mx_EventTile_spoiler_content" dangerouslySetInnerHTML={{ __html: this.props.contentHtml }} /> - + ); } } diff --git a/src/components/views/spaces/SpaceBasicSettings.tsx b/src/components/views/spaces/SpaceBasicSettings.tsx index 30c05c8ddd..4b51cfa7a8 100644 --- a/src/components/views/spaces/SpaceBasicSettings.tsx +++ b/src/components/views/spaces/SpaceBasicSettings.tsx @@ -76,7 +76,11 @@ export const SpaceAvatar: React.FC -
avatarUploadRef.current?.click()} /> + avatarUploadRef.current?.click()} + alt="" + /> avatarUploadRef.current?.click()} kind="link" diff --git a/test/components/structures/PictureInPictureDragger-test.tsx b/test/components/structures/PictureInPictureDragger-test.tsx index 9f42615287..a5b840b925 100644 --- a/test/components/structures/PictureInPictureDragger-test.tsx +++ b/test/components/structures/PictureInPictureDragger-test.tsx @@ -92,6 +92,7 @@ describe("PictureInPictureDragger", () => { {[ ({ onStartMoving }) => ( + // eslint-disable-next-line jsx-a11y/click-events-have-key-events
Hello
diff --git a/test/components/views/elements/Pill-test.tsx b/test/components/views/elements/Pill-test.tsx index fcd417d61e..b4ffb1ea2e 100644 --- a/test/components/views/elements/Pill-test.tsx +++ b/test/components/views/elements/Pill-test.tsx @@ -60,6 +60,7 @@ describe("", () => { } 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
, diff --git a/test/components/views/messages/TextualBody-test.tsx b/test/components/views/messages/TextualBody-test.tsx index 4641881626..0f74ed6033 100644 --- a/test/components/views/messages/TextualBody-test.tsx +++ b/test/components/views/messages/TextualBody-test.tsx @@ -293,10 +293,10 @@ describe("", () => { expect(content).toContainHTML( '' + "Hey " + - '' + + '", ); });