Merge pull request #3475 from matrix-org/t3chguy/accesibility

Settings A11Y tweaks

src/components/structures/TabbedView.js

@@ -82,12 +82,19 @@ export class TabbedView extends React.Component {
 
         const onClickHandler = () => this._setActiveTab(tab);
 
+        const label = _t(tab.label);
         return (
-            <span className={classes} key={"tab_label_" + tab.label}
-                  onClick={onClickHandler}>
+            <span
+                className={classes}
+                key={"tab_label_" + tab.label}
+                onClick={onClickHandler}
+                role="button"
+                aria-label={label}
+                tabIndex={0}
+            >
                 {tabIcon}
                 <span className="mx_TabbedView_tabLabel_text">
-                    {_t(tab.label)}
+                    { label }
                 </span>
             </span>
         );

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/AccessibleButton.js

@@ -69,8 +69,7 @@ export default function AccessibleButton(props) {
 
     restProps.tabIndex = restProps.tabIndex || "0";
     restProps.role = "button";
-    restProps.className = (restProps.className ? restProps.className + " " : "") +
-                          "mx_AccessibleButton";
+    restProps.className = (restProps.className ? restProps.className + " " : "") + "mx_AccessibleButton";
 
     if (kind) {
         // We apply a hasKind class to maintain backwards compatibility with
@@ -80,6 +79,7 @@ export default function AccessibleButton(props) {
 
     if (disabled) {
         restProps.className += " mx_AccessibleButton_disabled";
+        restProps["aria-disabled"] = true;
     }
 
     return React.createElement(element, restProps, children);

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,13 +58,24 @@ 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,
             "mx_ToggleSwitch_enabled": !this.props.disabled,
         });
         return (
-            <div className={classes} onClick={this._onClick}>
+            <div
+                {...props}
+                className={classes}
+                onClick={this._onClick}
+                role="checkbox"
+                aria-checked={this.state.checked}
+                aria-disabled={disabled}
+                tabIndex={0}
+            >
                 <div className="mx_ToggleSwitch_ball" />
             </div>
         );

src/i18n/strings/en_EN.json

@@ -1211,6 +1211,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",