From 4a5ee4a969b1e874d1f36f2d5272807a8592c521 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Wed, 25 Sep 2019 09:01:49 +0100 Subject: [PATCH 1/4] Put aria-disabled on AccessibleButtons and attempt to a11y ToggleSwitch Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- src/components/views/elements/AccessibleButton.js | 4 ++-- src/components/views/elements/ToggleSwitch.js | 7 ++++++- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/src/components/views/elements/AccessibleButton.js b/src/components/views/elements/AccessibleButton.js index 06c440c54e..a43e2ff26a 100644 --- a/src/components/views/elements/AccessibleButton.js +++ b/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); diff --git a/src/components/views/elements/ToggleSwitch.js b/src/components/views/elements/ToggleSwitch.js index 0d8b3d042f..b3f6390b8e 100644 --- a/src/components/views/elements/ToggleSwitch.js +++ b/src/components/views/elements/ToggleSwitch.js @@ -64,7 +64,12 @@ export default class ToggleSwitch extends React.Component { "mx_ToggleSwitch_enabled": !this.props.disabled, }); return ( -
+
); 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 2/4] 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 = - ; + cancelButton = ( + + ); } 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 = {this.props.label}; let secondPart = ; + 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 (
{label} - +
); }, 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 (
+ aria-disabled={disabled} + tabIndex={0}>
); 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", From 3672832d385776b47517731c0416ee42ef0e917c Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Wed, 25 Sep 2019 18:10:05 +0100 Subject: [PATCH 3/4] conform to style Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- src/components/views/elements/ToggleSwitch.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/views/elements/ToggleSwitch.js b/src/components/views/elements/ToggleSwitch.js index 845c4613c0..e8e870edd8 100644 --- a/src/components/views/elements/ToggleSwitch.js +++ b/src/components/views/elements/ToggleSwitch.js @@ -74,7 +74,8 @@ export default class ToggleSwitch extends React.Component { role="checkbox" aria-checked={this.state.checked} aria-disabled={disabled} - tabIndex={0}> + tabIndex={0} + >
); From d588e709e529ce307143ca2e418dfc32f9f5682f Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Wed, 25 Sep 2019 18:55:18 +0100 Subject: [PATCH 4/4] Add tab indexes, role=button and aria-labels to TabbedViews for a11y Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- src/components/structures/TabbedView.js | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/src/components/structures/TabbedView.js b/src/components/structures/TabbedView.js index da0ae62e15..6ececbb329 100644 --- a/src/components/structures/TabbedView.js +++ b/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 ( - + {tabIcon} - {_t(tab.label)} + { label } );