PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Put aria-disabled on AccessibleButtons and attempt to a11y ToggleSwitch

Browse source 
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2019-09-25 09:01:49 +01:00
parent 351a3ebd67
commit 4a5ee4a969
2 changed files with 8 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/components/views/elements/AccessibleButton.js
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);

7
src/components/views/elements/ToggleSwitch.js
View file

@ -64,7 +64,12 @@ export default class ToggleSwitch extends React.Component {
"mx_ToggleSwitch_enabled": !this.props.disabled, "mx_ToggleSwitch_enabled": !this.props.disabled,
}); });
return ( return (
<div className={classes} onClick={this._onClick}> <div
className={classes}
onClick={this._onClick}
role="checkbox"
aria-checked={this.state.checked}
aria-disabled={this.props.disabled}>
<div className="mx_ToggleSwitch_ball" /> <div className="mx_ToggleSwitch_ball" />
</div> </div>
); );