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

Fix multiple accessibility defects identified by AXE (#10606)

Browse source 
* Mark effects overlay canvas as aria hidden

* Ensure date separators aren't seen as focusable aria separators

* Fix

* Fix font slider not having aria label

* Add missing aria labels

* Fix settings flags setting aria-checked={null}

* Update snapshots
This commit is contained in:
Michael Telatynski 2023-04-17 17:09:45 +01:00 • committed by GitHub
parent 270a26d89a
commit 1a0e5c1805
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
17 changed files with 210 additions and 194 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -322,7 +322,7 @@ export default class DateSeparator extends React.Component<IProps, IState> {
public render(): React.ReactNode {
const label = this.getLabel();
let dateHeaderContent;
let dateHeaderContent: JSX.Element;
if (this.state.jumpToDateEnabled) {
dateHeaderContent = this.renderJumpToDateMenu();
} else {
@ -336,9 +336,8 @@ export default class DateSeparator extends React.Component<IProps, IState> {
}
// 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 (
<div className="mx_DateSeparator" role="separator" tabIndex={-1} aria-label={label}>
<div className="mx_DateSeparator" role="separator" aria-label={label}>
<hr role="none" />
{dateHeaderContent}
<hr role="none" />