0
0
Fork 0

Improve accessibility (part 4) (#4408)

* fix(dropdown_menu): Keyboard navigation

* fix(icon_button): Add aria-pressed attribute

* fix(privacy_dropdown): Make accessible

* fix(emoji_picker_dropdown): Make accessible

* fix(icon_button): Support tabIndex

* fix(actions_modal): Remove icon from tab order

* fix(dropdown_menu): Add role=group

* fix(setting_toggle): Toggle via space key

* fix(dropdown_menu): Remove redundant handling of Space key

* fix(emoji_picker_dropdown): Remove redundant Space key handling

* fix(privacy_dropdown): Remove redundant Space key handling

* fix(status): Switch to article and add aria-posinset, aria-setsize

* fix(status_list): Use role=feed and pass more ARIA props to Status

* chore(eslint): jsx-a11y/role-supports-aria-props
This commit is contained in:
Sorin Davidoi 2017-07-28 04:37:30 +02:00 committed by Eugen Rochko
parent 6270f9ce34
commit b7d47c2aef
9 changed files with 76 additions and 29 deletions

View file

@ -12,12 +12,14 @@ export default class IconButton extends React.PureComponent {
onClick: PropTypes.func,
size: PropTypes.number,
active: PropTypes.bool,
pressed: PropTypes.bool,
style: PropTypes.object,
activeStyle: PropTypes.object,
disabled: PropTypes.bool,
inverted: PropTypes.bool,
animate: PropTypes.bool,
overlay: PropTypes.bool,
tabIndex: PropTypes.string,
};
static defaultProps = {
@ -26,6 +28,7 @@ export default class IconButton extends React.PureComponent {
disabled: false,
animate: false,
overlay: false,
tabIndex: '0',
};
handleClick = (e) => {
@ -73,10 +76,12 @@ export default class IconButton extends React.PureComponent {
{({ rotate }) =>
<button
aria-label={this.props.title}
aria-pressed={this.props.pressed}
title={this.props.title}
className={classes.join(' ')}
onClick={this.handleClick}
style={style}
tabIndex={this.props.tabIndex}
>
<i style={{ transform: `rotate(${rotate}deg)` }} className={`fa fa-fw fa-${this.props.icon}`} aria-hidden='true' />
</button>