Merge pull request #132 from marcus-herrmann/master

a11y: Improve icon button component regarding semantics, screen reader usage
This commit is contained in:
Eugen 2016-11-02 21:53:05 +01:00 committed by GitHub
commit d427df4a8a
2 changed files with 5 additions and 4 deletions

View file

@ -35,9 +35,9 @@ const IconButton = React.createClass({
}; };
return ( return (
<a href='#' title={this.props.title} className={`icon-button ${this.props.active ? 'active' : ''}`} onClick={this.handleClick} style={style}> <button aria-label={this.props.title} title={this.props.title} className={`icon-button ${this.props.active ? 'active' : ''}`} onClick={this.handleClick} style={style}>
<i className={`fa fa-fw fa-${this.props.icon}`}></i> <i className={`fa fa-fw fa-${this.props.icon}`} aria-hidden='true'></i>
</a> </button>
); );
} }

View file

@ -42,7 +42,8 @@
.icon-button { .icon-button {
color: #616b86; color: #616b86;
cursor: pointer; border: none;
background: transparent;
&:hover { &:hover {
color: #717b98; color: #717b98;