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:
parent
6270f9ce34
commit
b7d47c2aef
9 changed files with 76 additions and 29 deletions
|
@ -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>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue