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
GitHub
parent
05cc5f62dd
commit
d5db131eef
40 changed files with 244 additions and 83 deletions
|
|
@ -382,7 +382,7 @@ export default class LeftPanel extends React.Component<IProps, IState> {
|
|||
|
||||
return (
|
||||
<div className={containerClasses}>
|
||||
<aside className="mx_LeftPanel_roomListContainer">
|
||||
<div className="mx_LeftPanel_roomListContainer">
|
||||
{ this.renderSearchDialExplore() }
|
||||
{ this.renderBreadcrumbs() }
|
||||
{ !this.props.isMinimized && (
|
||||
|
|
@ -401,7 +401,7 @@ export default class LeftPanel extends React.Component<IProps, IState> {
|
|||
{ roomList }
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -674,7 +674,7 @@ class LoggedInView extends React.Component<IProps, IState> {
|
|||
<div className={bodyClasses}>
|
||||
<div className='mx_LeftPanel_outerWrapper'>
|
||||
<LeftPanelLiveShareWarning isMinimized={this.props.collapseLhs || false} />
|
||||
<div className='mx_LeftPanel_wrapper'>
|
||||
<nav className='mx_LeftPanel_wrapper'>
|
||||
<BackdropPanel
|
||||
blurMultiplier={0.5}
|
||||
backgroundImage={this.state.backgroundImage}
|
||||
|
|
@ -693,7 +693,7 @@ class LoggedInView extends React.Component<IProps, IState> {
|
|||
resizeNotifier={this.props.resizeNotifier}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
<ResizeHandle passRef={this.resizeHandler} id="lp-resizer" />
|
||||
<div className="mx_RoomView_wrapper">
|
||||
|
|
|
|||
|
|
@ -100,11 +100,11 @@ export default class CompleteSecurity extends React.Component<IProps, IState> {
|
|||
return (
|
||||
<AuthPage>
|
||||
<CompleteSecurityBody>
|
||||
<h2 className="mx_CompleteSecurity_header">
|
||||
<h1 className="mx_CompleteSecurity_header">
|
||||
{ icon }
|
||||
{ title }
|
||||
{ skipButton }
|
||||
</h2>
|
||||
</h1>
|
||||
<div className="mx_CompleteSecurity_body">
|
||||
<SetupEncryptionBody onFinished={this.props.onFinished} />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -437,7 +437,7 @@ export default class ForgotPassword extends React.Component<IProps, IState> {
|
|||
<AuthPage>
|
||||
<AuthHeader />
|
||||
<AuthBody>
|
||||
<h2> { _t('Set a new password') } </h2>
|
||||
<h1> { _t('Set a new password') } </h1>
|
||||
{ resetPasswordJsx }
|
||||
</AuthBody>
|
||||
</AuthPage>
|
||||
|
|
|
|||
|
|
@ -600,10 +600,10 @@ export default class LoginComponent extends React.PureComponent<IProps, IState>
|
|||
<AuthPage>
|
||||
<AuthHeader disableLanguageSelector={this.props.isSyncing || this.state.busyLoggingIn} />
|
||||
<AuthBody>
|
||||
<h2>
|
||||
<h1>
|
||||
{ _t('Sign in') }
|
||||
{ loader }
|
||||
</h2>
|
||||
</h1>
|
||||
{ errorTextSection }
|
||||
{ serverDeadSection }
|
||||
<ServerPicker
|
||||
|
|
|
|||
|
|
@ -507,9 +507,9 @@ export default class Registration extends React.Component<IProps, IState> {
|
|||
// 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 = <h3 className="mx_AuthBody_centered">
|
||||
continueWithSection = <h2 className="mx_AuthBody_centered">
|
||||
{ _t("Continue with %(ssoButtons)s", { ssoButtons: "" }).trim() }
|
||||
</h3>;
|
||||
</h2>;
|
||||
}
|
||||
|
||||
// i18n: ssoButtons & usernamePassword are placeholders to help translators understand context
|
||||
|
|
@ -521,7 +521,7 @@ export default class Registration extends React.Component<IProps, IState> {
|
|||
loginType={this.state.ssoFlow.type === "m.login.sso" ? "sso" : "cas"}
|
||||
fragmentAfterLogin={this.props.fragmentAfterLogin}
|
||||
/>
|
||||
<h3 className="mx_AuthBody_centered">
|
||||
<h2 className="mx_AuthBody_centered">
|
||||
{ _t(
|
||||
"%(ssoButtons)s Or %(usernamePassword)s",
|
||||
{
|
||||
|
|
@ -529,7 +529,7 @@ export default class Registration extends React.Component<IProps, IState> {
|
|||
usernamePassword: "",
|
||||
},
|
||||
).trim() }
|
||||
</h3>
|
||||
</h2>
|
||||
</React.Fragment>;
|
||||
}
|
||||
|
||||
|
|
@ -617,7 +617,7 @@ export default class Registration extends React.Component<IProps, IState> {
|
|||
} else {
|
||||
// regardless of whether we're the client that started the registration or not, we should
|
||||
// try our credentials anyway
|
||||
regDoneText = <h3>{ _t(
|
||||
regDoneText = <h2>{ _t(
|
||||
"<a>Log in</a> to your new account.", {},
|
||||
{
|
||||
a: (sub) => <AccessibleButton
|
||||
|
|
@ -630,10 +630,10 @@ export default class Registration extends React.Component<IProps, IState> {
|
|||
}}
|
||||
>{ sub }</AccessibleButton>,
|
||||
},
|
||||
) }</h3>;
|
||||
) }</h2>;
|
||||
}
|
||||
body = <div>
|
||||
<h2>{ _t("Registration Successful") }</h2>
|
||||
<h1>{ _t("Registration Successful") }</h1>
|
||||
{ regDoneText }
|
||||
</div>;
|
||||
} else {
|
||||
|
|
|
|||
|
|
@ -298,7 +298,7 @@ export default class SoftLogout extends React.Component<IProps, IState> {
|
|||
return <>
|
||||
<p>{ introText }</p>
|
||||
{ this.renderSsoForm(null) }
|
||||
<h3 className="mx_AuthBody_centered">
|
||||
<h2 className="mx_AuthBody_centered">
|
||||
{ _t(
|
||||
"%(ssoButtons)s Or %(usernamePassword)s",
|
||||
{
|
||||
|
|
@ -306,7 +306,7 @@ export default class SoftLogout extends React.Component<IProps, IState> {
|
|||
usernamePassword: "",
|
||||
},
|
||||
).trim() }
|
||||
</h3>
|
||||
</h2>
|
||||
{ this.renderPasswordForm(null) }
|
||||
</>;
|
||||
}
|
||||
|
|
@ -327,16 +327,16 @@ export default class SoftLogout extends React.Component<IProps, IState> {
|
|||
<AuthPage>
|
||||
<AuthHeader />
|
||||
<AuthBody>
|
||||
<h2>
|
||||
<h1>
|
||||
{ _t("You're signed out") }
|
||||
</h2>
|
||||
</h1>
|
||||
|
||||
<h3>{ _t("Sign in") }</h3>
|
||||
<h2>{ _t("Sign in") }</h2>
|
||||
<div>
|
||||
{ this.renderSignInSection() }
|
||||
</div>
|
||||
|
||||
<h3>{ _t("Clear personal data") }</h3>
|
||||
<h2>{ _t("Clear personal data") }</h2>
|
||||
<p>
|
||||
{ _t(
|
||||
"Warning: Your personal data (including encryption keys) is still stored " +
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ export function AuthHeaderDisplay({ title, icon, serverPicker, children }: Props
|
|||
return (
|
||||
<Fragment>
|
||||
{ current?.icon ?? icon }
|
||||
<h2>{ current?.title ?? title }</h2>
|
||||
<h1>{ current?.title ?? title }</h1>
|
||||
{ children }
|
||||
{ current?.hideServerPicker !== true && serverPicker }
|
||||
</Fragment>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue