mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-27 19:56:47 +03:00
Code Issues Projects Releases Packages Wiki Activity

improve Settings Accessibility for Toggles and Dialogs

Browse source 
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2019-09-25 09:25:11 +01:00
parent 4a5ee4a969
commit e01be212e6
5 changed files with 13 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/components/views/dialogs/BaseDialog.js
View file

@ -26,6 +26,7 @@ import { MatrixClient } from 'matrix-js-sdk';
import { KeyCode } from '../../../Keyboard';
import AccessibleButton from '../elements/AccessibleButton';
import MatrixClientPeg from '../../../MatrixClientPeg';
import { _t } from "../../../languageHandler";
/**
* Basic container for modal dialogs.
@ -114,8 +115,9 @@ export default createReactClass({
render: function() {
let cancelButton;
if (this.props.hasCancel) {
cancelButton = <AccessibleButton onClick={this._onCancelClick} className="mx_Dialog_cancelButton">
</AccessibleButton>;
cancelButton = (
<AccessibleButton onClick={this._onCancelClick} className="mx_Dialog_cancelButton" aria-label={_t("Close dialog")} />
);
}
return (

2
src/components/views/elements/LabelledToggleSwitch.js
View file

@ -42,7 +42,7 @@ export default class LabelledToggleSwitch extends React.Component {
let firstPart = <span className="mx_SettingsFlag_label">{this.props.label}</span>;
let secondPart = <ToggleSwitch checked={this.props.value} disabled={this.props.disabled}
onChange={this.props.onChange} />;
onChange={this.props.onChange} aria-label={this.props.label} />;
if (this.props.toggleInFront) {
const temp = firstPart;

2
src/components/views/elements/SettingsFlag.js
View file

@ -78,7 +78,7 @@ module.exports = createReactClass({
return (
<div className="mx_SettingsFlag">
<span className="mx_SettingsFlag_label">{label}</span>
<ToggleSwitch checked={value} onChange={this.onChange} disabled={!canChange} />
<ToggleSwitch checked={value} onChange={this.onChange} disabled={!canChange} aria-label={label} />
</div>
);
},

7
src/components/views/elements/ToggleSwitch.js
View file

@ -58,6 +58,9 @@ export default class ToggleSwitch extends React.Component {
};
render() {
// eslint-disable-next-line no-unused-vars
const {checked, disabled, onChange, ...props} = this.props;
const classes = classNames({
"mx_ToggleSwitch": true,
"mx_ToggleSwitch_on": this.state.checked,
@ -65,11 +68,13 @@ export default class ToggleSwitch extends React.Component {
});
return (
<div
{...props}
className={classes}
onClick={this._onClick}
role="checkbox"
aria-checked={this.state.checked}
aria-disabled={this.props.disabled}>
aria-disabled={disabled}
tabIndex={0}>
<div className="mx_ToggleSwitch_ball" />
</div>
);

1
src/i18n/strings/en_EN.json
View file

@ -1205,6 +1205,7 @@
"Unable to find profiles for the Matrix IDs listed below - would you like to invite them anyway?": "Unable to find profiles for the Matrix IDs listed below - would you like to invite them anyway?",
"Invite anyway and never warn me again": "Invite anyway and never warn me again",
"Invite anyway": "Invite anyway",
"Close dialog": "Close dialog",
"Please tell us what went wrong or, better, create a GitHub issue that describes the problem.": "Please tell us what went wrong or, better, create a GitHub issue that describes the problem.",
"Preparing to send logs": "Preparing to send logs",
"Logs sent": "Logs sent",