From 143ad6d7f2044ae7faa9fccf5b9d7d3e5c295b52 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Wed, 27 Jul 2022 13:10:13 +0100 Subject: [PATCH 01/29] Spike AXE A11Y testing in Cypress --- cypress/e2e/14-timeline/timeline.spec.ts | 5 +++++ cypress/support/e2e.ts | 1 + cypress/tsconfig.json | 6 +++++- package.json | 2 ++ yarn.lock | 10 ++++++++++ 5 files changed, 23 insertions(+), 1 deletion(-) diff --git a/cypress/e2e/14-timeline/timeline.spec.ts b/cypress/e2e/14-timeline/timeline.spec.ts index 238cfc8b0ae..4446532f4d9 100644 --- a/cypress/e2e/14-timeline/timeline.spec.ts +++ b/cypress/e2e/14-timeline/timeline.spec.ts @@ -146,6 +146,10 @@ describe("Timeline", () => { }); describe("message displaying", () => { + beforeEach(() => { + cy.injectAxe(); + }); + it("should create and configure a room on IRC layout", () => { cy.visit("/#/room/" + roomId); cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.IRC); @@ -178,6 +182,7 @@ describe("Timeline", () => { const percyCSS = ".mx_RoomView_body .mx_EventTile_info .mx_MessageTimestamp " + "{ visibility: hidden !important; }"; cy.percySnapshot("Event line with inline start margin on IRC layout", { percyCSS }); + cy.checkA11y(); }); it("should click top left of view source event toggle", () => { diff --git a/cypress/support/e2e.ts b/cypress/support/e2e.ts index faff9a83637..229528e5cdb 100644 --- a/cypress/support/e2e.ts +++ b/cypress/support/e2e.ts @@ -18,6 +18,7 @@ limitations under the License. import "@percy/cypress"; import "cypress-real-events"; +import "cypress-axe"; import "./performance"; import "./synapse"; diff --git a/cypress/tsconfig.json b/cypress/tsconfig.json index bf92664f35b..2bd6ab5eba9 100644 --- a/cypress/tsconfig.json +++ b/cypress/tsconfig.json @@ -7,7 +7,11 @@ "dom", "dom.iterable" ], - "types": ["cypress", "@percy/cypress"], + "types": [ + "cypress", + "cypress-axe", + "@percy/cypress" + ], "resolveJsonModule": true, "esModuleInterop": true, "moduleResolution": "node", diff --git a/package.json b/package.json index 0fcdb04dac0..3b51bd5f801 100644 --- a/package.json +++ b/package.json @@ -168,10 +168,12 @@ "@typescript-eslint/parser": "^5.6.0", "@wojtekmaj/enzyme-adapter-react-17": "^0.6.1", "allchange": "^1.0.6", + "axe-core": "^4.4.3", "babel-jest": "^26.6.3", "blob-polyfill": "^6.0.20211015", "chokidar": "^3.5.1", "cypress": "^10.3.0", + "cypress-axe": "^1.0.0", "cypress-real-events": "^1.7.1", "enzyme": "^3.11.0", "enzyme-to-json": "^3.6.2", diff --git a/yarn.lock b/yarn.lock index a41ac45be9c..b96d1a6d49d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2714,6 +2714,11 @@ axe-core@^4.4.2: resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.4.2.tgz#dcf7fb6dea866166c3eab33d68208afe4d5f670c" integrity sha512-LVAaGp/wkkgYJcjmHsoKx4juT1aQvJyPcW09MLCjVTh3V2cc6PnyempiLMNH5iMdfIX/zdbjUx2KDjMLCTdPeA== +axe-core@^4.4.3: + version "4.4.3" + resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.4.3.tgz#11c74d23d5013c0fa5d183796729bc3482bd2f6f" + integrity sha512-32+ub6kkdhhWick/UjvEwRchgoetXqTK14INLqbGm5U2TzBkBNF3nQtLYm8ovxSkQWArjEQvftCKryjZaATu3w== + axobject-query@^2.2.0: version "2.2.0" resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.2.0.tgz#943d47e10c0b704aa42275e20edf3722648989be" @@ -3539,6 +3544,11 @@ csstype@^3.0.2: resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.0.tgz#4ddcac3718d787cf9df0d1b7d15033925c8f29f2" integrity sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA== +cypress-axe@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/cypress-axe/-/cypress-axe-1.0.0.tgz#ab4e9486eaa3bb956a90a1ae40d52df42827b4f0" + integrity sha512-QBlNMAd5eZoyhG8RGGR/pLtpHGkvgWXm2tkP68scJ+AjYiNNOlJihxoEwH93RT+rWOLrefw4iWwEx8kpEcrvJA== + cypress-real-events@^1.7.1: version "1.7.1" resolved "https://registry.yarnpkg.com/cypress-real-events/-/cypress-real-events-1.7.1.tgz#8f430d67c29ea4f05b9c5b0311780120cbc9b935" From 7347ac01c72d983d4a07356c3c3a3a7e5f326c96 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Thu, 28 Jul 2022 12:12:36 +0100 Subject: [PATCH 02/29] Fix NewRoomIntro breaking html/aria list rules --- src/components/views/rooms/NewRoomIntro.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/components/views/rooms/NewRoomIntro.tsx b/src/components/views/rooms/NewRoomIntro.tsx index 7cd43aded0f..6dd25b6bca6 100644 --- a/src/components/views/rooms/NewRoomIntro.tsx +++ b/src/components/views/rooms/NewRoomIntro.tsx @@ -219,8 +219,7 @@ const NewRoomIntro = () => { { subText } { subButton } ); - return
- + return
  • { !hasExpectedEncryptionSettings(cli, room) && ( { ) } { body } -
    • ; + ; }; export default NewRoomIntro; From 0d1dc82f9a68a7b63081e2a092baf6956faaed82 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Thu, 28 Jul 2022 12:12:52 +0100 Subject: [PATCH 03/29] Fix HeaderButtons breaking aria role semantics rules --- src/components/views/right_panel/HeaderButtons.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/right_panel/HeaderButtons.tsx b/src/components/views/right_panel/HeaderButtons.tsx index 9af2c2e01cb..db923fcc0e3 100644 --- a/src/components/views/right_panel/HeaderButtons.tsx +++ b/src/components/views/right_panel/HeaderButtons.tsx @@ -95,7 +95,7 @@ export default abstract class HeaderButtons

    extends React.Component + return

    { this.renderButtons() }
    ; } From c00548c6f4b3fa6c8ca23d287a82521886309b9d Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Thu, 28 Jul 2022 12:13:03 +0100 Subject: [PATCH 04/29] missing type --- src/components/views/rooms/BasicMessageComposer.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/rooms/BasicMessageComposer.tsx b/src/components/views/rooms/BasicMessageComposer.tsx index fd3f5eed3dc..7509099d7bb 100644 --- a/src/components/views/rooms/BasicMessageComposer.tsx +++ b/src/components/views/rooms/BasicMessageComposer.tsx @@ -760,7 +760,7 @@ export default class BasicMessageEditor extends React.Component const { completionIndex } = this.state; const hasAutocomplete = Boolean(this.state.autoComplete); - let activeDescendant; + let activeDescendant: string; if (hasAutocomplete && completionIndex >= 0) { activeDescendant = generateCompletionDomId(completionIndex); } From b4b516caaf89852efb299d9a44b92d249c561caa Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Thu, 28 Jul 2022 12:13:24 +0100 Subject: [PATCH 05/29] Switch left panel from aside to nav and include space panel --- src/components/structures/LeftPanel.tsx | 4 ++-- src/components/structures/LoggedInView.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/structures/LeftPanel.tsx b/src/components/structures/LeftPanel.tsx index ab8620a26df..94f1b9e0eee 100644 --- a/src/components/structures/LeftPanel.tsx +++ b/src/components/structures/LeftPanel.tsx @@ -382,7 +382,7 @@ export default class LeftPanel extends React.Component { return (
    -
    - + ); } diff --git a/src/components/structures/LoggedInView.tsx b/src/components/structures/LoggedInView.tsx index 87869b65511..f2d9fe20acb 100644 --- a/src/components/structures/LoggedInView.tsx +++ b/src/components/structures/LoggedInView.tsx @@ -674,7 +674,7 @@ class LoggedInView extends React.Component {
    -
    +
    -
    +
    From 1cc238bbf9d687a342efa45773cd68fd93246bbd Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Thu, 28 Jul 2022 12:14:45 +0100 Subject: [PATCH 06/29] Give the page a main heading of the room name when viewing a room --- src/components/views/rooms/RoomHeader.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/views/rooms/RoomHeader.tsx b/src/components/views/rooms/RoomHeader.tsx index 81ed22e35bb..9f1a5d3edc3 100644 --- a/src/components/views/rooms/RoomHeader.tsx +++ b/src/components/views/rooms/RoomHeader.tsx @@ -230,7 +230,9 @@ export default class RoomHeader extends React.Component { const roomName = { (name) => { const roomName = name || oobName; - return
    { roomName }
    ; + return
    + { roomName } +
    ; } }     ; From a1f4ec0fc8cf89587641ca382fe39e83e2a021a2 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Thu, 28 Jul 2022 12:28:32 +0100 Subject: [PATCH 07/29] Use header landmark on RoomHeader --- src/components/views/rooms/RoomHeader.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/views/rooms/RoomHeader.tsx b/src/components/views/rooms/RoomHeader.tsx index 9f1a5d3edc3..1410b2cf757 100644 --- a/src/components/views/rooms/RoomHeader.tsx +++ b/src/components/views/rooms/RoomHeader.tsx @@ -313,7 +313,7 @@ export default class RoomHeader extends React.Component { ) : null; return ( -
    +
    { roomAvatar }
    { e2eIcon }
    @@ -324,7 +324,7 @@ export default class RoomHeader extends React.Component { { buttons }
    -
    + ); } } From 55532c9499b55f5b7a4a43eeb4ad2fa83fb6e22a Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Thu, 28 Jul 2022 12:30:27 +0100 Subject: [PATCH 08/29] Improve aria attributes on composer when autocomplete is closed --- src/components/views/rooms/BasicMessageComposer.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/views/rooms/BasicMessageComposer.tsx b/src/components/views/rooms/BasicMessageComposer.tsx index 7509099d7bb..b75e81aaed8 100644 --- a/src/components/views/rooms/BasicMessageComposer.tsx +++ b/src/components/views/rooms/BasicMessageComposer.tsx @@ -784,8 +784,8 @@ export default class BasicMessageEditor extends React.Component aria-multiline="true" aria-autocomplete="list" aria-haspopup="listbox" - aria-expanded={hasAutocomplete} - aria-owns="mx_Autocomplete" + aria-expanded={hasAutocomplete ? true : undefined} + aria-owns={hasAutocomplete ? "mx_Autocomplete" : undefined} aria-activedescendant={activeDescendant} dir="auto" aria-disabled={this.props.disabled} From 7dea9b010a6a44a7fd08800c38ba9926fc64ea73 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Thu, 28 Jul 2022 12:48:52 +0100 Subject: [PATCH 09/29] Fix aria-owns on RoomHeader --- src/components/views/rooms/RoomHeader.tsx | 22 +++++++++++++++++----- 1 file changed, 17 insertions(+), 5 deletions(-) diff --git a/src/components/views/rooms/RoomHeader.tsx b/src/components/views/rooms/RoomHeader.tsx index 1410b2cf757..22a0a8043a5 100644 --- a/src/components/views/rooms/RoomHeader.tsx +++ b/src/components/views/rooms/RoomHeader.tsx @@ -45,6 +45,8 @@ import { NotificationStateEvents } from '../../../stores/notifications/Notificat import RoomContext from "../../../contexts/RoomContext"; import RoomLiveShareWarning from '../beacon/RoomLiveShareWarning'; import { BetaPill } from "../beta/BetaCard"; +import RightPanelStore from "../../../stores/right-panel/RightPanelStore"; +import { UPDATE_EVENT } from "../../../stores/AsyncStore"; export interface ISearchInfo { searchTerm: string; @@ -71,6 +73,7 @@ interface IProps { interface IState { contextMenuPosition?: DOMRect; + rightPanelOpen: boolean; } export default class RoomHeader extends React.Component { @@ -89,23 +92,29 @@ export default class RoomHeader extends React.Component { super(props, context); const notiStore = RoomNotificationStateStore.instance.getRoomState(props.room); notiStore.on(NotificationStateEvents.Update, this.onNotificationUpdate); - this.state = {}; + this.state = { + rightPanelOpen: RightPanelStore.instance.isOpen, + }; } public componentDidMount() { const cli = MatrixClientPeg.get(); cli.on(RoomStateEvent.Events, this.onRoomStateEvents); + RightPanelStore.instance.on(UPDATE_EVENT, this.onRightPanelStoreUpdate); } public componentWillUnmount() { const cli = MatrixClientPeg.get(); - if (cli) { - cli.removeListener(RoomStateEvent.Events, this.onRoomStateEvents); - } + cli?.removeListener(RoomStateEvent.Events, this.onRoomStateEvents); const notiStore = RoomNotificationStateStore.instance.getRoomState(this.props.room); notiStore.removeListener(NotificationStateEvents.Update, this.onNotificationUpdate); + RightPanelStore.instance.off(UPDATE_EVENT, this.onRightPanelStoreUpdate); } + private onRightPanelStoreUpdate = () => { + this.setState({ rightPanelOpen: RightPanelStore.instance.isOpen }); + }; + private onRoomStateEvents = (event: MatrixEvent) => { if (!this.props.room || event.getRoomId() !== this.props.room.roomId) { return; @@ -314,7 +323,10 @@ export default class RoomHeader extends React.Component { return (
    -
    +
    { roomAvatar }
    { e2eIcon }
    { name } From 20737ab3f0c6cc26841a0faf57e3b17bddc4b8a8 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Thu, 28 Jul 2022 12:51:32 +0100 Subject: [PATCH 10/29] Give Spinner an aria role --- src/components/views/elements/Spinner.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/views/elements/Spinner.tsx b/src/components/views/elements/Spinner.tsx index ac3ba51fdd9..410d1b69cb4 100644 --- a/src/components/views/elements/Spinner.tsx +++ b/src/components/views/elements/Spinner.tsx @@ -39,6 +39,7 @@ export default class Spinner extends React.PureComponent { className="mx_Spinner_icon" style={{ width: w, height: h }} aria-label={_t("Loading...")} + role="progressbar" />
    ); From 415cb0b4a627fb1b660aa23c556f14e92e5283d2 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Thu, 28 Jul 2022 12:51:46 +0100 Subject: [PATCH 11/29] Give server picker help button an aria label --- src/components/views/elements/ServerPicker.tsx | 7 ++++++- src/i18n/strings/en_EN.json | 1 + 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/src/components/views/elements/ServerPicker.tsx b/src/components/views/elements/ServerPicker.tsx index 4cc60ebf027..94567004533 100644 --- a/src/components/views/elements/ServerPicker.tsx +++ b/src/components/views/elements/ServerPicker.tsx @@ -86,7 +86,12 @@ const ServerPicker = ({ title, dialogTitle, serverConfig, onServerConfigChange } return

    { title || _t("Homeserver") }

    - { !disableCustomUrls ? : null } + { !disableCustomUrls ? ( + ): null } { serverName } diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 4070b8ffe19..4c5ef5fa137 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -2377,6 +2377,7 @@ "You can use the custom server options to sign into other Matrix servers by specifying a different homeserver URL. This allows you to use %(brand)s with an existing Matrix account on a different homeserver.": "You can use the custom server options to sign into other Matrix servers by specifying a different homeserver URL. This allows you to use %(brand)s with an existing Matrix account on a different homeserver.", "Join millions for free on the largest public server": "Join millions for free on the largest public server", "Homeserver": "Homeserver", + "Help": "Help", "Continue with %(provider)s": "Continue with %(provider)s", "Sign in with single sign-on": "Sign in with single sign-on", "And %(count)s more...|other": "And %(count)s more...", From 324b89920a771a0b496d84a5797ce5b8f66b455e Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Thu, 28 Jul 2022 13:28:58 +0100 Subject: [PATCH 12/29] Improve auth aria attributes and semantics --- res/css/views/auth/_AuthBody.pcss | 4 ++-- res/css/views/dialogs/_ServerPickerDialog.pcss | 4 ++-- src/components/structures/auth/header/AuthHeaderDisplay.tsx | 2 +- src/components/views/auth/AuthBody.tsx | 4 ++-- src/components/views/auth/AuthFooter.tsx | 4 ++-- src/components/views/auth/AuthHeaderLogo.tsx | 4 ++-- src/components/views/dialogs/ServerPickerDialog.tsx | 3 ++- src/components/views/elements/ServerPicker.tsx | 2 +- 8 files changed, 14 insertions(+), 13 deletions(-) diff --git a/res/css/views/auth/_AuthBody.pcss b/res/css/views/auth/_AuthBody.pcss index 81c3dda6e78..a8a48711a45 100644 --- a/res/css/views/auth/_AuthBody.pcss +++ b/res/css/views/auth/_AuthBody.pcss @@ -29,9 +29,9 @@ limitations under the License. flex-direction: column; } - h2 { + h1, h2 { font-size: $font-24px; - font-weight: 600; + font-weight: $font-semi-bold; margin-top: 8px; color: $authpage-primary-color; } diff --git a/res/css/views/dialogs/_ServerPickerDialog.pcss b/res/css/views/dialogs/_ServerPickerDialog.pcss index 4dde7cf8007..4d246512539 100644 --- a/res/css/views/dialogs/_ServerPickerDialog.pcss +++ b/res/css/views/dialogs/_ServerPickerDialog.pcss @@ -35,11 +35,11 @@ limitations under the License. } } - > h4 { + > h2 { font-size: $font-15px; font-weight: $font-semi-bold; color: $secondary-content; - margin-left: 8px; + margin: 16px 0 16px 8px; } > a { diff --git a/src/components/structures/auth/header/AuthHeaderDisplay.tsx b/src/components/structures/auth/header/AuthHeaderDisplay.tsx index fd5b65a1ebd..58ef17dae4d 100644 --- a/src/components/structures/auth/header/AuthHeaderDisplay.tsx +++ b/src/components/structures/auth/header/AuthHeaderDisplay.tsx @@ -33,7 +33,7 @@ export function AuthHeaderDisplay({ title, icon, serverPicker, children }: Props return ( { current?.icon ?? icon } -

    { current?.title ?? title }

    +

    { current?.title ?? title }

    { children } { current?.hideServerPicker !== true && serverPicker }     diff --git a/src/components/views/auth/AuthBody.tsx b/src/components/views/auth/AuthBody.tsx index cacab416f64..654f48dacb1 100644 --- a/src/components/views/auth/AuthBody.tsx +++ b/src/components/views/auth/AuthBody.tsx @@ -22,7 +22,7 @@ interface Props { } export default function AuthBody({ flex, children }: PropsWithChildren) { - return
    + return
    { children } -
    ; + ; } diff --git a/src/components/views/auth/AuthFooter.tsx b/src/components/views/auth/AuthFooter.tsx index 46e389cb467..a3435e53f34 100644 --- a/src/components/views/auth/AuthFooter.tsx +++ b/src/components/views/auth/AuthFooter.tsx @@ -23,9 +23,9 @@ import { _t } from '../../../languageHandler'; export default class AuthFooter extends React.Component { public render(): React.ReactNode { return ( - + ); } } diff --git a/src/components/views/auth/AuthHeaderLogo.tsx b/src/components/views/auth/AuthHeaderLogo.tsx index 72a2df7b831..753c7888ac3 100644 --- a/src/components/views/auth/AuthHeaderLogo.tsx +++ b/src/components/views/auth/AuthHeaderLogo.tsx @@ -18,8 +18,8 @@ import React from 'react'; export default class AuthHeaderLogo extends React.PureComponent { public render(): React.ReactNode { - return
    + return
    ; + ; } } diff --git a/src/components/views/dialogs/ServerPickerDialog.tsx b/src/components/views/dialogs/ServerPickerDialog.tsx index 1d4cc4ae818..c64cb9de08f 100644 --- a/src/components/views/dialogs/ServerPickerDialog.tsx +++ b/src/components/views/dialogs/ServerPickerDialog.tsx @@ -206,6 +206,7 @@ export default class ServerPickerDialog extends React.PureComponent -

    { _t("Learn more") }

    +

    { _t("Learn more") }

    { _t("About homeservers") } diff --git a/src/components/views/elements/ServerPicker.tsx b/src/components/views/elements/ServerPicker.tsx index 94567004533..dbf39be3312 100644 --- a/src/components/views/elements/ServerPicker.tsx +++ b/src/components/views/elements/ServerPicker.tsx @@ -85,7 +85,7 @@ const ServerPicker = ({ title, dialogTitle, serverConfig, onServerConfigChange } } return
    -

    { title || _t("Homeserver") }

    +

    { title || _t("Homeserver") }

    { !disableCustomUrls ? ( Date: Thu, 28 Jul 2022 13:34:05 +0100 Subject: [PATCH 13/29] Improve heading semantics in use case selection screen --- res/css/views/elements/_UseCaseSelection.pcss | 2 +- src/components/views/elements/UseCaseSelection.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/res/css/views/elements/_UseCaseSelection.pcss b/res/css/views/elements/_UseCaseSelection.pcss index 8f6f3d6e8b8..3daf15772f3 100644 --- a/res/css/views/elements/_UseCaseSelection.pcss +++ b/res/css/views/elements/_UseCaseSelection.pcss @@ -45,7 +45,7 @@ limitations under the License. text-align: center; } - h4 { + h3 { margin: 0; font-weight: 400; font-size: $font-16px; diff --git a/src/components/views/elements/UseCaseSelection.tsx b/src/components/views/elements/UseCaseSelection.tsx index 4e8a1e83428..f7d09a18900 100644 --- a/src/components/views/elements/UseCaseSelection.tsx +++ b/src/components/views/elements/UseCaseSelection.tsx @@ -57,7 +57,7 @@ export function UseCaseSelection({ onFinished }: Props) {

    { _t("Who will you chat to the most?") }

    -

    { _t("We'll help you get connected.") }

    +

    { _t("We'll help you get connected.") }

    Date: Thu, 28 Jul 2022 13:39:41 +0100 Subject: [PATCH 14/29] Fix autocomplete attribute to be valid --- src/components/views/auth/PasswordLogin.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/auth/PasswordLogin.tsx b/src/components/views/auth/PasswordLogin.tsx index 3f63f2a86ce..f6b4e199dcd 100644 --- a/src/components/views/auth/PasswordLogin.tsx +++ b/src/components/views/auth/PasswordLogin.tsx @@ -422,7 +422,7 @@ export default class PasswordLogin extends React.PureComponent { Date: Thu, 28 Jul 2022 13:41:03 +0100 Subject: [PATCH 15/29] Fix heading semantics on login page --- src/components/structures/auth/Login.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/structures/auth/Login.tsx b/src/components/structures/auth/Login.tsx index 1a102e97b4d..c00aa909d22 100644 --- a/src/components/structures/auth/Login.tsx +++ b/src/components/structures/auth/Login.tsx @@ -600,10 +600,10 @@ export default class LoginComponent extends React.PureComponent -

    +

    { _t('Sign in') } { loader } -

    + { errorTextSection } { serverDeadSection } Date: Thu, 28 Jul 2022 13:41:23 +0100 Subject: [PATCH 16/29] Improve Cypress axe testing --- cypress/plugins/axe.ts | 35 +++++++++++++++++++++++ cypress/plugins/index.ts | 2 ++ cypress/support/axe.ts | 61 ++++++++++++++++++++++++++++++++++++++++ cypress/support/e2e.ts | 2 +- 4 files changed, 99 insertions(+), 1 deletion(-) create mode 100644 cypress/plugins/axe.ts create mode 100644 cypress/support/axe.ts diff --git a/cypress/plugins/axe.ts b/cypress/plugins/axe.ts new file mode 100644 index 00000000000..a923af3bc5a --- /dev/null +++ b/cypress/plugins/axe.ts @@ -0,0 +1,35 @@ +/* +Copyright 2022 The Matrix.org Foundation C.I.C. + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +/// + +import PluginEvents = Cypress.PluginEvents; +import PluginConfigOptions = Cypress.PluginConfigOptions; + +export function axe(on: PluginEvents, config: PluginConfigOptions) { + on("task", { + log(message: string) { + console.log(message); + + return null; + }, + table(message: string) { + console.table(message); + + return null; + }, + }); +} diff --git a/cypress/plugins/index.ts b/cypress/plugins/index.ts index bc62efb03f9..daa062aa04f 100644 --- a/cypress/plugins/index.ts +++ b/cypress/plugins/index.ts @@ -21,6 +21,7 @@ import PluginConfigOptions = Cypress.PluginConfigOptions; import { performance } from "./performance"; import { synapseDocker } from "./synapsedocker"; import { webserver } from "./webserver"; +import { axe } from "./axe"; /** * @type {Cypress.PluginConfig} @@ -29,4 +30,5 @@ export default function(on: PluginEvents, config: PluginConfigOptions) { performance(on, config); synapseDocker(on, config); webserver(on, config); + axe(on, config); } diff --git a/cypress/support/axe.ts b/cypress/support/axe.ts new file mode 100644 index 00000000000..1aa7226619d --- /dev/null +++ b/cypress/support/axe.ts @@ -0,0 +1,61 @@ +/* +Copyright 2022 The Matrix.org Foundation C.I.C. + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +/// + +import "cypress-axe"; +import * as axe from "axe-core"; +import { Options } from "cypress-axe"; + +import Chainable = Cypress.Chainable; + +function terminalLog(violations: axe.Result[]): void { + cy.task( + 'log', + `${violations.length} accessibility violation${ + violations.length === 1 ? '' : 's' + } ${violations.length === 1 ? 'was' : 'were'} detected`, + ); + + // pluck specific keys to keep the table readable + const violationData = violations.map(({ id, impact, description, nodes }) => ({ + id, + impact, + description, + nodes: nodes.length, + })); + + cy.task('table', violationData); +} + +Cypress.Commands.overwrite("checkA11y", ( + originalFn: Chainable["checkA11y"], + context?: string | Node | axe.ContextObject | undefined, + options: Options = {}, + violationCallback?: ((violations: axe.Result[]) => void) | undefined, + skipFailures?: boolean, +): void => { + return originalFn(context, { + ...options, + rules: { + // Disable contrast checking for now as we have too many issues with it + 'color-contrast': { + enabled: false, + }, + ...options.rules, + }, + }, violationCallback ?? terminalLog, skipFailures); +}); diff --git a/cypress/support/e2e.ts b/cypress/support/e2e.ts index 229528e5cdb..8dbcc97753a 100644 --- a/cypress/support/e2e.ts +++ b/cypress/support/e2e.ts @@ -18,7 +18,6 @@ limitations under the License. import "@percy/cypress"; import "cypress-real-events"; -import "cypress-axe"; import "./performance"; import "./synapse"; @@ -37,3 +36,4 @@ import "./iframes"; import "./timeline"; import "./network"; import "./composer"; +import "./axe"; From 2e3b9bbdb09601ff4e108d5c911b9d5e8ef9a1f7 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Thu, 28 Jul 2022 13:41:40 +0100 Subject: [PATCH 17/29] Add axe tests --- cypress/e2e/1-register/register.spec.ts | 9 +++++++++ cypress/e2e/2-login/login.spec.ts | 3 +++ 2 files changed, 12 insertions(+) diff --git a/cypress/e2e/1-register/register.spec.ts b/cypress/e2e/1-register/register.spec.ts index 2bbc23e0c55..5e9cfd3e5fb 100644 --- a/cypress/e2e/1-register/register.spec.ts +++ b/cypress/e2e/1-register/register.spec.ts @@ -33,9 +33,12 @@ describe("Registration", () => { }); it("registers an account and lands on the home screen", () => { + cy.injectAxe(); + cy.get(".mx_ServerPicker_change", { timeout: 15000 }).click(); cy.get(".mx_ServerPickerDialog_continue").should("be.visible"); cy.percySnapshot("Server Picker"); + cy.checkA11y(); cy.get(".mx_ServerPickerDialog_otherHomeserver").type(synapse.baseUrl); cy.get(".mx_ServerPickerDialog_continue").click(); @@ -46,6 +49,7 @@ describe("Registration", () => { // Hide the server text as it contains the randomly allocated Synapse port const percyCSS = ".mx_ServerPicker_server { visibility: hidden !important; }"; cy.percySnapshot("Registration", { percyCSS }); + cy.checkA11y(); cy.get("#mx_RegistrationForm_username").type("alice"); cy.get("#mx_RegistrationForm_password").type("totally a great password"); @@ -55,16 +59,21 @@ describe("Registration", () => { cy.get(".mx_RegistrationEmailPromptDialog").should("be.visible"); cy.percySnapshot("Registration email prompt", { percyCSS }); + cy.checkA11y(); cy.get(".mx_RegistrationEmailPromptDialog button.mx_Dialog_primary").click(); cy.stopMeasuring("create-account"); cy.get(".mx_InteractiveAuthEntryComponents_termsPolicy").should("be.visible"); cy.percySnapshot("Registration terms prompt", { percyCSS }); + cy.checkA11y(); cy.get(".mx_InteractiveAuthEntryComponents_termsPolicy input").click(); cy.startMeasuring("from-submit-to-home"); cy.get(".mx_InteractiveAuthEntryComponents_termsSubmit").click(); + cy.get(".mx_UseCaseSelection_skip").should("exist"); + cy.percySnapshot("Use-case selection screen"); + cy.checkA11y(); cy.get(".mx_UseCaseSelection_skip .mx_AccessibleButton").click(); cy.url().should('contain', '/#/home'); diff --git a/cypress/e2e/2-login/login.spec.ts b/cypress/e2e/2-login/login.spec.ts index 85d2866e498..ea3a5239f09 100644 --- a/cypress/e2e/2-login/login.spec.ts +++ b/cypress/e2e/2-login/login.spec.ts @@ -41,8 +41,11 @@ describe("Login", () => { }); it("logs in with an existing account and lands on the home screen", () => { + cy.injectAxe(); + cy.get("#mx_LoginForm_username", { timeout: 15000 }).should("be.visible"); cy.percySnapshot("Login"); + cy.checkA11y(); cy.get(".mx_ServerPicker_change").click(); cy.get(".mx_ServerPickerDialog_otherHomeserver").type(synapse.baseUrl); From 0c4526fabb0030c6ed9a3e378fba7875b221aa58 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Thu, 28 Jul 2022 13:41:50 +0100 Subject: [PATCH 18/29] Stop synapse after the timeline tests --- cypress/e2e/14-timeline/timeline.spec.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/cypress/e2e/14-timeline/timeline.spec.ts b/cypress/e2e/14-timeline/timeline.spec.ts index 4446532f4d9..9cd550ed7bc 100644 --- a/cypress/e2e/14-timeline/timeline.spec.ts +++ b/cypress/e2e/14-timeline/timeline.spec.ts @@ -84,6 +84,10 @@ describe("Timeline", () => { }); }); + afterEach(() => { + cy.stopSynapse(synapse); + }); + describe("useOnlyCurrentProfiles", () => { beforeEach(() => { cy.uploadContent(OLD_AVATAR).then((url) => { From d8d5eacf6478a1092790c62512fb41396f548271 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Thu, 28 Jul 2022 13:42:41 +0100 Subject: [PATCH 19/29] Await spinners to fade before percy snapshotting timeline tests --- cypress/e2e/14-timeline/timeline.spec.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/cypress/e2e/14-timeline/timeline.spec.ts b/cypress/e2e/14-timeline/timeline.spec.ts index 9cd550ed7bc..9af078dd110 100644 --- a/cypress/e2e/14-timeline/timeline.spec.ts +++ b/cypress/e2e/14-timeline/timeline.spec.ts @@ -159,6 +159,7 @@ describe("Timeline", () => { cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.IRC); cy.contains(".mx_RoomView_body .mx_GenericEventListSummary[data-layout=irc] " + ".mx_GenericEventListSummary_summary", "created and configured the room."); + cy.get(".mx_Spinner").should("not.exist"); cy.percySnapshot("Configured room on IRC layout"); }); @@ -182,6 +183,7 @@ describe("Timeline", () => { .should('have.css', "margin-inline-start", "104px") .should('have.css', "inset-inline-start", "0px"); + cy.get(".mx_Spinner").should("not.exist"); // Exclude timestamp from snapshot const percyCSS = ".mx_RoomView_body .mx_EventTile_info .mx_MessageTimestamp " + "{ visibility: hidden !important; }"; From 1ff21a1b112aa7bd1fdff3c8dedeff8763aa8c74 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Thu, 28 Jul 2022 13:48:13 +0100 Subject: [PATCH 20/29] Improve naming of plugin --- cypress/plugins/index.ts | 4 ++-- cypress/plugins/{axe.ts => log.ts} | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) rename cypress/plugins/{axe.ts => log.ts} (93%) diff --git a/cypress/plugins/index.ts b/cypress/plugins/index.ts index b641f0e5e24..44dd93b829b 100644 --- a/cypress/plugins/index.ts +++ b/cypress/plugins/index.ts @@ -22,7 +22,7 @@ import { performance } from "./performance"; import { synapseDocker } from "./synapsedocker"; import { webserver } from "./webserver"; import { docker } from "./docker"; -import { axe } from "./axe"; +import { log } from "./log"; /** * @type {Cypress.PluginConfig} @@ -32,5 +32,5 @@ export default function(on: PluginEvents, config: PluginConfigOptions) { performance(on, config); synapseDocker(on, config); webserver(on, config); - axe(on, config); + log(on, config); } diff --git a/cypress/plugins/axe.ts b/cypress/plugins/log.ts similarity index 93% rename from cypress/plugins/axe.ts rename to cypress/plugins/log.ts index a923af3bc5a..4b16c9b8cdb 100644 --- a/cypress/plugins/axe.ts +++ b/cypress/plugins/log.ts @@ -19,7 +19,7 @@ limitations under the License. import PluginEvents = Cypress.PluginEvents; import PluginConfigOptions = Cypress.PluginConfigOptions; -export function axe(on: PluginEvents, config: PluginConfigOptions) { +export function log(on: PluginEvents, config: PluginConfigOptions) { on("task", { log(message: string) { console.log(message); From 78f85816def03bf67426615bdb921182a8266696 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Thu, 28 Jul 2022 13:57:48 +0100 Subject: [PATCH 21/29] Update snapshots --- .../views/settings/__snapshots__/FontScalingPanel-test.tsx.snap | 1 + test/modules/__snapshots__/ModuleComponents-test.tsx.snap | 1 + 2 files changed, 2 insertions(+) diff --git a/test/components/views/settings/__snapshots__/FontScalingPanel-test.tsx.snap b/test/components/views/settings/__snapshots__/FontScalingPanel-test.tsx.snap index ebf75295278..0859be41f77 100644 --- a/test/components/views/settings/__snapshots__/FontScalingPanel-test.tsx.snap +++ b/test/components/views/settings/__snapshots__/FontScalingPanel-test.tsx.snap @@ -31,6 +31,7 @@ exports[`FontScalingPanel renders the font scaling UI 1`] = `
    Date: Thu, 28 Jul 2022 14:43:00 +0100 Subject: [PATCH 22/29] Fix accidental heading change --- res/css/views/auth/_AuthBody.pcss | 8 ++++---- res/css/views/elements/_ServerPicker.pcss | 2 +- .../structures/auth/CompleteSecurity.tsx | 4 ++-- src/components/structures/auth/ForgotPassword.tsx | 2 +- src/components/structures/auth/Registration.tsx | 14 +++++++------- src/components/structures/auth/SoftLogout.tsx | 12 ++++++------ 6 files changed, 21 insertions(+), 21 deletions(-) diff --git a/res/css/views/auth/_AuthBody.pcss b/res/css/views/auth/_AuthBody.pcss index cdd7f6674b0..bd139a2eacb 100644 --- a/res/css/views/auth/_AuthBody.pcss +++ b/res/css/views/auth/_AuthBody.pcss @@ -29,20 +29,20 @@ limitations under the License. flex-direction: column; } - h1, h2 { + h1 { font-size: $font-24px; font-weight: $font-semi-bold; margin-top: 8px; color: $authpage-primary-color; } - h3 { + h2 { font-size: $font-14px; - font-weight: 600; + font-weight: $font-semi-bold; color: $authpage-secondary-color; } - h3.mx_AuthBody_centered { + h2.mx_AuthBody_centered { text-align: center; } diff --git a/res/css/views/elements/_ServerPicker.pcss b/res/css/views/elements/_ServerPicker.pcss index ce9f031c503..f1e5e087684 100644 --- a/res/css/views/elements/_ServerPicker.pcss +++ b/res/css/views/elements/_ServerPicker.pcss @@ -24,7 +24,7 @@ limitations under the License. font-size: $font-14px; line-height: $font-20px; - > h3 { + > h2 { font-weight: $font-semi-bold; margin: 0 0 20px; grid-column: 1; diff --git a/src/components/structures/auth/CompleteSecurity.tsx b/src/components/structures/auth/CompleteSecurity.tsx index c187e2d7891..b31e259344a 100644 --- a/src/components/structures/auth/CompleteSecurity.tsx +++ b/src/components/structures/auth/CompleteSecurity.tsx @@ -100,11 +100,11 @@ export default class CompleteSecurity extends React.Component { return ( -

    +

    { icon } { title } { skipButton } -

    +
    diff --git a/src/components/structures/auth/ForgotPassword.tsx b/src/components/structures/auth/ForgotPassword.tsx index 0766dcd09c7..83a8e3e5651 100644 --- a/src/components/structures/auth/ForgotPassword.tsx +++ b/src/components/structures/auth/ForgotPassword.tsx @@ -437,7 +437,7 @@ export default class ForgotPassword extends React.Component { -

    { _t('Set a new password') }

    +

    { _t('Set a new password') }

    { resetPasswordJsx }     diff --git a/src/components/structures/auth/Registration.tsx b/src/components/structures/auth/Registration.tsx index 42b64c8ac31..b5770110f66 100644 --- a/src/components/structures/auth/Registration.tsx +++ b/src/components/structures/auth/Registration.tsx @@ -507,9 +507,9 @@ export default class Registration extends React.Component { // when there is only a single (or 0) providers we show a wide button with `Continue with X` text if (providers.length > 1) { // i18n: ssoButtons is a placeholder to help translators understand context - continueWithSection =

    + continueWithSection =

    { _t("Continue with %(ssoButtons)s", { ssoButtons: "" }).trim() } -

    ; + ; } // i18n: ssoButtons & usernamePassword are placeholders to help translators understand context @@ -521,7 +521,7 @@ export default class Registration extends React.Component { loginType={this.state.ssoFlow.type === "m.login.sso" ? "sso" : "cas"} fragmentAfterLogin={this.props.fragmentAfterLogin} /> -

    +

    { _t( "%(ssoButtons)s Or %(usernamePassword)s", { @@ -529,7 +529,7 @@ export default class Registration extends React.Component { usernamePassword: "", }, ).trim() } -

    + ; } @@ -617,7 +617,7 @@ export default class Registration extends React.Component { } else { // regardless of whether we're the client that started the registration or not, we should // try our credentials anyway - regDoneText =

    { _t( + regDoneText =

    { _t( "Log in to your new account.", {}, { a: (sub) => { }} >{ sub }, }, - ) }

    ; + ) }; } body =
    -

    { _t("Registration Successful") }

    +

    { _t("Registration Successful") }

    { regDoneText }
    ; } else { diff --git a/src/components/structures/auth/SoftLogout.tsx b/src/components/structures/auth/SoftLogout.tsx index a8a1f30c032..64dcdce6453 100644 --- a/src/components/structures/auth/SoftLogout.tsx +++ b/src/components/structures/auth/SoftLogout.tsx @@ -298,7 +298,7 @@ export default class SoftLogout extends React.Component { return <>

    { introText }

    { this.renderSsoForm(null) } -

    +

    { _t( "%(ssoButtons)s Or %(usernamePassword)s", { @@ -306,7 +306,7 @@ export default class SoftLogout extends React.Component { usernamePassword: "", }, ).trim() } -

    + { this.renderPasswordForm(null) } ; } @@ -327,16 +327,16 @@ export default class SoftLogout extends React.Component { -

    +

    { _t("You're signed out") } -

    + -

    { _t("Sign in") }

    +

    { _t("Sign in") }

    { this.renderSignInSection() }
    -

    { _t("Clear personal data") }

    +

    { _t("Clear personal data") }

    { _t( "Warning: Your personal data (including encryption keys) is still stored " + From 69d527ecd2df5e2ef4a4c4a46f4267dc8ae655a6 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Thu, 28 Jul 2022 15:13:31 +0100 Subject: [PATCH 23/29] Fix double synapse stoppage --- cypress/e2e/14-timeline/timeline.spec.ts | 4 ---- 1 file changed, 4 deletions(-) diff --git a/cypress/e2e/14-timeline/timeline.spec.ts b/cypress/e2e/14-timeline/timeline.spec.ts index 9af078dd110..aeb802acc81 100644 --- a/cypress/e2e/14-timeline/timeline.spec.ts +++ b/cypress/e2e/14-timeline/timeline.spec.ts @@ -99,10 +99,6 @@ describe("Timeline", () => { }); }); - afterEach(() => { - cy.stopSynapse(synapse); - }); - it("should show historical profiles if disabled", () => { cy.setSettingValue("useOnlyCurrentProfiles", null, SettingLevel.ACCOUNT, false); sendEvent(roomId); From 5a81dbb82332f301c101bab096affe7c1c969aad Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Fri, 29 Jul 2022 09:53:48 +0100 Subject: [PATCH 24/29] Fix Cypress timeline avatar assertions to be DPI agnostic --- cypress/e2e/14-timeline/timeline.spec.ts | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/cypress/e2e/14-timeline/timeline.spec.ts b/cypress/e2e/14-timeline/timeline.spec.ts index aeb802acc81..73b101e3fd6 100644 --- a/cypress/e2e/14-timeline/timeline.spec.ts +++ b/cypress/e2e/14-timeline/timeline.spec.ts @@ -46,10 +46,14 @@ const expectDisplayName = (e: JQuery, displayName: string): void => }; const expectAvatar = (e: JQuery, avatarUrl: string): void => { - cy.getClient().then((cli: MatrixClient) => { + cy.all([ + cy.window({ log: false }), + cy.getClient(), + ]).then(([win, cli]) => { + const size = AVATAR_SIZE * win.devicePixelRatio; expect(e.find(".mx_BaseAvatar_image").attr("src")).to.equal( // eslint-disable-next-line no-restricted-properties - cli.mxcUrlToHttp(avatarUrl, AVATAR_SIZE, AVATAR_SIZE, AVATAR_RESIZE_METHOD), + cli.mxcUrlToHttp(avatarUrl, size, size, AVATAR_RESIZE_METHOD), ); }); }; From 3275bf9a8e5bb80d90d92c06988d41b3eab7b85d Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Fri, 29 Jul 2022 09:58:34 +0100 Subject: [PATCH 25/29] Fix aria attributes on date separators --- src/components/views/messages/DateSeparator.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/views/messages/DateSeparator.tsx b/src/components/views/messages/DateSeparator.tsx index 42e7d7dbf3b..76081553d94 100644 --- a/src/components/views/messages/DateSeparator.tsx +++ b/src/components/views/messages/DateSeparator.tsx @@ -223,7 +223,7 @@ export default class DateSeparator extends React.Component { isExpanded={!!this.state.contextMenuPosition} title={_t("Jump to date")} > -

    +
    { contextMenu } @@ -237,15 +237,15 @@ export default class DateSeparator extends React.Component { if (this.state.jumpToDateEnabled) { dateHeaderContent = this.renderJumpToDateMenu(); } else { - dateHeaderContent = ; + dateHeaderContent = ; } // ARIA treats
    s as separators, here we abuse them slightly so manually treat this entire thing as one // tab-index=-1 to allow it to be focusable but do not add tab stop for it, primarily for screen readers - return

    + return
    { dateHeaderContent }
    -

    ; +
    ; } } From bf88ed93f83995ac6fe0ed33bd66d1da77c85cba Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Fri, 29 Jul 2022 10:04:14 +0100 Subject: [PATCH 26/29] delint --- cypress/e2e/14-timeline/timeline.spec.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/cypress/e2e/14-timeline/timeline.spec.ts b/cypress/e2e/14-timeline/timeline.spec.ts index 73b101e3fd6..62ddc6284b6 100644 --- a/cypress/e2e/14-timeline/timeline.spec.ts +++ b/cypress/e2e/14-timeline/timeline.spec.ts @@ -20,7 +20,6 @@ import { MessageEvent } from "matrix-events-sdk"; import type { ISendEventResponse } from "matrix-js-sdk/src/@types/requests"; import type { EventType } from "matrix-js-sdk/src/@types/event"; -import type { MatrixClient } from "matrix-js-sdk/src/client"; import { SynapseInstance } from "../../plugins/synapsedocker"; import { SettingLevel } from "../../../src/settings/SettingLevel"; import { Layout } from "../../../src/settings/enums/Layout"; From 173bde7ddf36cd9a1be16b18321dd7f0fe36c984 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Fri, 29 Jul 2022 10:16:59 +0100 Subject: [PATCH 27/29] Update snapshots --- res/css/views/messages/_DateSeparator.pcss | 2 +- .../__snapshots__/DateSeparator-test.tsx.snap | 16 ++++++++-------- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/res/css/views/messages/_DateSeparator.pcss b/res/css/views/messages/_DateSeparator.pcss index a1672c7279b..bef2bd9f6c2 100644 --- a/res/css/views/messages/_DateSeparator.pcss +++ b/res/css/views/messages/_DateSeparator.pcss @@ -30,7 +30,7 @@ limitations under the License. border-bottom: 1px solid $menu-selected-color; } -.mx_DateSeparator > div { +.mx_DateSeparator > h2 { margin: 0 25px; flex: 0 0 auto; } diff --git a/test/components/views/messages/__snapshots__/DateSeparator-test.tsx.snap b/test/components/views/messages/__snapshots__/DateSeparator-test.tsx.snap index d848ae092f0..dec7c8c9ee2 100644 --- a/test/components/views/messages/__snapshots__/DateSeparator-test.tsx.snap +++ b/test/components/views/messages/__snapshots__/DateSeparator-test.tsx.snap @@ -6,7 +6,7 @@ exports[`DateSeparator renders the date separator correctly 1`] = ` roomId="!unused:example.org" ts={1639728540000} > -

    - +

    - +
    `; @@ -33,7 +33,7 @@ exports[`DateSeparator when feature_jump_to_date is enabled renders the date sep roomId="!unused:example.org" ts={1639728540000} > -

    - +

    @@ -103,6 +103,6 @@ exports[`DateSeparator when feature_jump_to_date is enabled renders the date sep
    - +
    `; From 30edbeefbed01f3040f26d677cbcc59a5a4c786a Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Fri, 29 Jul 2022 10:19:24 +0100 Subject: [PATCH 28/29] Revert style change --- res/css/views/messages/_DateSeparator.pcss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/res/css/views/messages/_DateSeparator.pcss b/res/css/views/messages/_DateSeparator.pcss index bef2bd9f6c2..4386f9a3ede 100644 --- a/res/css/views/messages/_DateSeparator.pcss +++ b/res/css/views/messages/_DateSeparator.pcss @@ -33,6 +33,9 @@ limitations under the License. .mx_DateSeparator > h2 { margin: 0 25px; flex: 0 0 auto; + font-size: inherit; + font-weight: inherit; + color: inherit; } .mx_DateSeparator_jumpToDateMenu { From 5d040c31c9f89de6d3781fd5c1fa8e5f814cedf0 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Fri, 29 Jul 2022 11:04:23 +0100 Subject: [PATCH 29/29] Skip redundant call --- cypress/e2e/14-timeline/timeline.spec.ts | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/cypress/e2e/14-timeline/timeline.spec.ts b/cypress/e2e/14-timeline/timeline.spec.ts index 62ddc6284b6..fbe1013214e 100644 --- a/cypress/e2e/14-timeline/timeline.spec.ts +++ b/cypress/e2e/14-timeline/timeline.spec.ts @@ -78,10 +78,8 @@ describe("Timeline", () => { cy.startSynapse("default").then(data => { synapse = data; cy.initTestUser(synapse, OLD_NAME).then(() => - cy.window({ log: false }).then(() => { - cy.createRoom({ name: ROOM_NAME }).then(_room1Id => { - roomId = _room1Id; - }); + cy.createRoom({ name: ROOM_NAME }).then(_room1Id => { + roomId = _room1Id; }), ); });