mirror of https://github.com/vector-im/riot-web
Allow keyboard control even without a screen reader
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>pull/21833/head
parent
d588e709e5
commit
14e3cb8736
|
@ -1,6 +1,7 @@
|
|||
/*
|
||||
Copyright 2017 Travis Ralston
|
||||
Copyright 2019 New Vector Ltd
|
||||
Copyright 2019 The Matrix.org Foundation C.I.C.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
|
@ -17,6 +18,7 @@ limitations under the License.
|
|||
|
||||
import * as React from "react";
|
||||
import {_t} from '../../languageHandler';
|
||||
import {KeyCode} from "../../Keyboard";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
/**
|
||||
|
@ -81,6 +83,13 @@ export class TabbedView extends React.Component {
|
|||
}
|
||||
|
||||
const onClickHandler = () => this._setActiveTab(tab);
|
||||
const onKeyDownHandler = (e) => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
if (e.keyCode === KeyCode.ENTER || e.keyCode === KeyCode.SPACE) {
|
||||
this._setActiveTab(tab);
|
||||
}
|
||||
};
|
||||
|
||||
const label = _t(tab.label);
|
||||
return (
|
||||
|
@ -88,6 +97,7 @@ export class TabbedView extends React.Component {
|
|||
className={classes}
|
||||
key={"tab_label_" + tab.label}
|
||||
onClick={onClickHandler}
|
||||
onKeyDown={onKeyDownHandler}
|
||||
role="button"
|
||||
aria-label={label}
|
||||
tabIndex={0}
|
||||
|
|
|
@ -17,6 +17,7 @@ limitations under the License.
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import classNames from "classnames";
|
||||
import {KeyCode} from "../../../Keyboard";
|
||||
|
||||
export default class ToggleSwitch extends React.Component {
|
||||
static propTypes = {
|
||||
|
@ -44,10 +45,7 @@ export default class ToggleSwitch extends React.Component {
|
|||
}
|
||||
}
|
||||
|
||||
_onClick = (e) => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
|
||||
_toggle = () => {
|
||||
if (this.props.disabled) return;
|
||||
|
||||
const newState = !this.state.checked;
|
||||
|
@ -57,6 +55,22 @@ export default class ToggleSwitch extends React.Component {
|
|||
}
|
||||
};
|
||||
|
||||
_onClick = (e) => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
|
||||
this._toggle();
|
||||
};
|
||||
|
||||
_onKeyDown = (e) => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
|
||||
if (e.keyCode === KeyCode.ENTER || e.keyCode === KeyCode.SPACE) {
|
||||
this._toggle();
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
const {checked, disabled, onChange, ...props} = this.props;
|
||||
|
@ -71,6 +85,7 @@ export default class ToggleSwitch extends React.Component {
|
|||
{...props}
|
||||
className={classes}
|
||||
onClick={this._onClick}
|
||||
onKeyDown={this._onKeyDown}
|
||||
role="checkbox"
|
||||
aria-checked={this.state.checked}
|
||||
aria-disabled={disabled}
|
||||
|
|
Loading…
Reference in New Issue