imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Spike AXE A11Y testing in Cypress (#9111)

Browse source 
* 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
Download patch file Download diff file Expand all files Collapse all files

8
src/components/views/messages/DateSeparator.tsx
View file

@ -223,7 +223,7 @@ export default class DateSeparator extends React.Component<IProps, IState> {
isExpanded={!!this.state.contextMenuPosition}
title={_t("Jump to date")}
>
<div aria-hidden="true">{ this.getLabel() }</div>
<h2 aria-hidden="true">{ this.getLabel() }</h2>
<div className="mx_DateSeparator_chevron" />
{ contextMenu }
</ContextMenuTooltipButton>
@ -237,15 +237,15 @@ export default class DateSeparator extends React.Component<IProps, IState> {
if (this.state.jumpToDateEnabled) {
dateHeaderContent = this.renderJumpToDateMenu();
} else {
dateHeaderContent = <div aria-hidden="true">{ label }</div>;
dateHeaderContent = <h2 aria-hidden="true">{ label }</h2>;
}
// ARIA treats <hr/>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 <h2 className="mx_DateSeparator" role="separator" tabIndex={-1} aria-label={label}>
return <div className="mx_DateSeparator" role="separator" tabIndex={-1} aria-label={label}>
<hr role="none" />
{ dateHeaderContent }
<hr role="none" />
</h2>;
</div>;
}
}