mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-10-23 03:05:45 +03:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #3667 from matrix-org/bwindels/toasts-a11y

Browse source 
a11y: adjustments for toasts
This commit is contained in:
Bruno Windels 2019-11-25 12:29:20 +00:00 committed by GitHub
commit 37874bf44d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 22 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
src/components/structures/ToastContainer.js
View file

@ -50,35 +50,34 @@ export default class ToastContainer extends React.Component {
render() {
const totalCount = this.state.toasts.length;
if (totalCount === 0) {
return null;
}
const isStacked = totalCount > 1;
const topToast = this.state.toasts[0];
const {title, icon, key, component, props} = topToast;
let toast;
if (totalCount !== 0) {
const topToast = this.state.toasts[0];
const {title, icon, key, component, props} = topToast;
const toastClasses = classNames("mx_Toast_toast", {
"mx_Toast_hasIcon": icon,
[`mx_Toast_icon_${icon}`]: icon,
});
const countIndicator = isStacked ? _t(" (1/%(totalCount)s)", {totalCount}) : null;
const toastProps = Object.assign({}, props, {
dismiss: this.dismissTopToast,
key,
});
toast = (<div className={toastClasses}>
<h2>{title}{countIndicator}</h2>
<div className="mx_Toast_body">{React.createElement(component, toastProps)}</div>
</div>);
}
const containerClasses = classNames("mx_ToastContainer", {
"mx_ToastContainer_stacked": isStacked,
});
const toastClasses = classNames("mx_Toast_toast", {
"mx_Toast_hasIcon": icon,
[`mx_Toast_icon_${icon}`]: icon,
});
const countIndicator = isStacked ? _t(" (1/%(totalCount)s)", {totalCount}) : null;
const toastProps = Object.assign({}, props, {
dismiss: this.dismissTopToast,
key,
});
return (
<div className={containerClasses}>
<div className={toastClasses}>
<h2>{title}{countIndicator}</h2>
<div className="mx_Toast_body">{React.createElement(component, toastProps)}</div>
</div>
<div className={containerClasses} role="alert">
{toast}
</div>
);
}

2
src/components/views/toasts/VerificationRequestToast.js
View file

@ -108,7 +108,7 @@ export default class VerificationRequestToast extends React.PureComponent {
}
return (<div>
<div className="mx_Toast_description">{nameLabel}</div>
<div className="mx_Toast_buttons">
<div className="mx_Toast_buttons" aria-live="off">
<FormButton label={_t("Decline (%(counter)s)", {counter: this.state.counter})} kind="danger" onClick={this.cancel} />
<FormButton label={_t("Accept")} onClick={this.accept} />
</div>