SWREI/instrumental
0
0
Fork 0
Code Issues Activity

a11y: Improve icon button component regarding semantics and screen reader usage

Browse Source
This commit is contained in:
mhe 2016-11-02 20:18:39 +01:00
parent 77045d0886
commit 87aabeb7af
2 changed files with 5 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/assets/javascripts/components/components/icon_button.jsx
View File

@ -35,9 +35,9 @@ const IconButton = React.createClass({
};
return (
<a href='#' 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>
</a>
<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}`} aria-hidden='true'></i>
</button>
);
}

3
app/assets/stylesheets/components.scss
View File

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