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

Settings A11Y tweaks
This commit is contained in:
Michael Telatynski 2019-09-25 19:32:18 +01:00 committed by GitHub
commit f5fda72b0c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 31 additions and 10 deletions

View file

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

View file

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

View file

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

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 firstPart = <span className="mx_SettingsFlag_label">{this.props.label}</span>;
let secondPart = <ToggleSwitch checked={this.props.value} disabled={this.props.disabled} 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) { if (this.props.toggleInFront) {
const temp = firstPart; const temp = firstPart;

View file

@ -78,7 +78,7 @@ module.exports = createReactClass({
return ( return (
<div className="mx_SettingsFlag"> <div className="mx_SettingsFlag">
<span className="mx_SettingsFlag_label">{label}</span> <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> </div>
); );
}, },

View file

@ -58,13 +58,24 @@ export default class ToggleSwitch extends React.Component {
}; };
render() { render() {
// eslint-disable-next-line no-unused-vars
const {checked, disabled, onChange, ...props} = this.props;
const classes = classNames({ const classes = classNames({
"mx_ToggleSwitch": true, "mx_ToggleSwitch": true,
"mx_ToggleSwitch_on": this.state.checked, "mx_ToggleSwitch_on": this.state.checked,
"mx_ToggleSwitch_enabled": !this.props.disabled, "mx_ToggleSwitch_enabled": !this.props.disabled,
}); });
return ( 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 className="mx_ToggleSwitch_ball" />
</div> </div>
); );

View file

@ -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?", "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 and never warn me again": "Invite anyway and never warn me again",
"Invite anyway": "Invite anyway", "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.", "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", "Preparing to send logs": "Preparing to send logs",
"Logs sent": "Logs sent", "Logs sent": "Logs sent",