forked from cybrespace/mastodon
Merge pull request #132 from marcus-herrmann/master
a11y: Improve icon button component regarding semantics, screen reader usage
This commit is contained in:
commit
d427df4a8a
|
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -42,7 +42,8 @@
|
||||||
|
|
||||||
.icon-button {
|
.icon-button {
|
||||||
color: #616b86;
|
color: #616b86;
|
||||||
cursor: pointer;
|
border: none;
|
||||||
|
background: transparent;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: #717b98;
|
color: #717b98;
|
||||||
|
|
Loading…
Reference in New Issue