From e01be212e6a822cf9302179c5880d28a5f675677 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 25 Sep 2019 09:25:11 +0100
Subject: [PATCH] improve Settings Accessibility for Toggles and Dialogs

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 src/components/views/dialogs/BaseDialog.js            | 6 ++++--
 src/components/views/elements/LabelledToggleSwitch.js | 2 +-
 src/components/views/elements/SettingsFlag.js         | 2 +-
 src/components/views/elements/ToggleSwitch.js         | 7 ++++++-
 src/i18n/strings/en_EN.json                           | 1 +
 5 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/components/views/dialogs/BaseDialog.js b/src/components/views/dialogs/BaseDialog.js
index 65b89d1631..d83ce46360 100644
--- a/src/components/views/dialogs/BaseDialog.js
+++ b/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 (
diff --git a/src/components/views/elements/LabelledToggleSwitch.js b/src/components/views/elements/LabelledToggleSwitch.js
index 0cb9b224cf..ecd4d39bf8 100644
--- a/src/components/views/elements/LabelledToggleSwitch.js
+++ b/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;
diff --git a/src/components/views/elements/SettingsFlag.js b/src/components/views/elements/SettingsFlag.js
index a26646b08c..e4df15a096 100644
--- a/src/components/views/elements/SettingsFlag.js
+++ b/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>
         );
     },
diff --git a/src/components/views/elements/ToggleSwitch.js b/src/components/views/elements/ToggleSwitch.js
index b3f6390b8e..845c4613c0 100644
--- a/src/components/views/elements/ToggleSwitch.js
+++ b/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>
         );
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 7ca31a0f94..98a1064be1 100644
--- a/src/i18n/strings/en_EN.json
+++ b/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",