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

Fix accessibility around the room list treeview and new search beta (#7856)

Browse source
This commit is contained in:
Michael Telatynski 2022-02-21 15:46:13 +00:00 • committed by GitHub
parent c6b8574dcb
commit e2827b4082
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 60 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

33
src/components/views/dialogs/BaseDialog.tsx
View file

@ -52,6 +52,8 @@ interface IProps extends IDialogProps {
// Title for the dialog.
title?: JSX.Element | string;
// Specific aria label to use, if not provided will set aria-labelledBy to mx_Dialog_title
"aria-label"?: string;
// Path to an icon to put in the header
headerImage?: string;
@ -121,23 +123,30 @@ export default class BaseDialog extends React.Component<IProps> {
headerImage = <img className="mx_Dialog_titleImage" src={this.props.headerImage} alt="" />;
}
const lockProps = {
"onKeyDown": this.onKeyDown,
"role": "dialog",
// This should point to a node describing the dialog.
// If we were about to completely follow this recommendation we'd need to
// make all the components relying on BaseDialog to be aware of it.
// So instead we will use the whole content as the description.
// Description comes first and if the content contains more text,
// AT users can skip its presentation.
"aria-describedby": this.props.contentId,
};
if (this.props["aria-label"]) {
lockProps["aria-label"] = this.props["aria-label"];
} else {
lockProps["aria-labelledby"] = "mx_BaseDialog_title";
}
return (
<MatrixClientContext.Provider value={this.matrixClient}>
<PosthogScreenTracker screenName={this.props.screenName} />
<FocusLock
returnFocus={true}
lockProps={{
onKeyDown: this.onKeyDown,
role: "dialog",
["aria-labelledby"]: "mx_BaseDialog_title",
// This should point to a node describing the dialog.
// If we were about to completely follow this recommendation we'd need to
// make all the components relying on BaseDialog to be aware of it.
// So instead we will use the whole content as the description.
// Description comes first and if the content contains more text,
// AT users can skip its presentation.
["aria-describedby"]: this.props.contentId,
}}
lockProps={lockProps}
className={classNames({
[this.props.className]: true,
'mx_Dialog_fixedWidth': this.props.fixedWidth,