Spike AXE A11Y testing in Cypress (#9111)

* Spike AXE A11Y testing in Cypress

* Fix NewRoomIntro breaking html/aria list rules

* Fix HeaderButtons breaking aria role semantics rules

* missing type

* Switch left panel from aside to nav and include space panel

* Give the page a main heading of the room name when viewing a room

* Use header landmark on RoomHeader

* Improve aria attributes on composer when autocomplete is closed

* Fix aria-owns on RoomHeader

* Give Spinner an aria role

* Give server picker help button an aria label

* Improve auth aria attributes and semantics

* Improve heading semantics in use case selection screen

* Fix autocomplete attribute to be valid

* Fix heading semantics on login page

* Improve Cypress axe testing

* Add axe tests

* Stop synapse after the timeline tests

* Await spinners to fade before percy snapshotting timeline tests

* Improve naming of plugin

* Update snapshots

* Fix accidental heading change

* Fix double synapse stoppage

* Fix Cypress timeline avatar assertions to be DPI agnostic

* Fix aria attributes on date separators

* delint

* Update snapshots

* Revert style change

* Skip redundant call
This commit is contained in:
Michael Telatynski 2022-08-01 08:31:14 +01:00 committed by GitHub
parent 05cc5f62dd
commit d5db131eef
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
40 changed files with 244 additions and 83 deletions

View file

@ -22,7 +22,7 @@ interface Props {
}
export default function AuthBody({ flex, children }: PropsWithChildren<Props>) {
return <div className={classNames("mx_AuthBody", { "mx_AuthBody_flex": flex })}>
return <main className={classNames("mx_AuthBody", { "mx_AuthBody_flex": flex })}>
{ children }
</div>;
</main>;
}

View file

@ -23,9 +23,9 @@ import { _t } from '../../../languageHandler';
export default class AuthFooter extends React.Component {
public render(): React.ReactNode {
return (
<div className="mx_AuthFooter">
<footer className="mx_AuthFooter" role="contentinfo">
<a href="https://matrix.org" target="_blank" rel="noreferrer noopener">{ _t("powered by Matrix") }</a>
</div>
</footer>
);
}
}

View file

@ -18,8 +18,8 @@ import React from 'react';
export default class AuthHeaderLogo extends React.PureComponent {
public render(): React.ReactNode {
return <div className="mx_AuthHeaderLogo">
return <aside className="mx_AuthHeaderLogo">
Matrix
</div>;
</aside>;
}
}

View file

@ -422,7 +422,7 @@ export default class PasswordLogin extends React.PureComponent<IProps, IState> {
<Field
id="mx_LoginForm_password"
className={pwFieldClass}
autoComplete="password"
autoComplete="current-password"
type="password"
name="password"
label={_t('Password')}