improve Settings Accessibility for Toggles and Dialogs

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

src/components/views/dialogs/BaseDialog.js

@@ -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 (

src/components/views/elements/LabelledToggleSwitch.js

@@ -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;

src/components/views/elements/SettingsFlag.js

@@ -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>
         );
     },

src/components/views/elements/ToggleSwitch.js

@@ -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>
         );

src/i18n/strings/en_EN.json

@@ -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",