diff options
| author | Eugen <eugen@zeonfederated.com> | 2016-11-02 21:53:05 +0100 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2016-11-02 21:53:05 +0100 |
| commit | d427df4a8ae16809b068aca8c65006de2ccbd27e (patch) | |
| tree | f367519b74c7c79abd57eb575cf59d27d5b281ea | |
| parent | 76a717d549c5592e04056b1b9cc03946fb9da52f (diff) | |
| parent | 87aabeb7af3c07faf872f8ce174fb0e7c0664f7b (diff) | |
Merge pull request #132 from marcus-herrmann/master
a11y: Improve icon button component regarding semantics, screen reader usage
| -rw-r--r-- | app/assets/javascripts/components/components/icon_button.jsx | 6 | ||||
| -rw-r--r-- | app/assets/stylesheets/components.scss | 3 |
2 files changed, 5 insertions, 4 deletions
diff --git a/app/assets/javascripts/components/components/icon_button.jsx b/app/assets/javascripts/components/components/icon_button.jsx index 509192260..085c18541 100644 --- a/app/assets/javascripts/components/components/icon_button.jsx +++ b/app/assets/javascripts/components/components/icon_button.jsx @@ -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> ); } diff --git a/app/assets/stylesheets/components.scss b/app/assets/stylesheets/components.scss index b720848c5..704462dc1 100644 --- a/app/assets/stylesheets/components.scss +++ b/app/assets/stylesheets/components.scss @@ -42,7 +42,8 @@ .icon-button { color: #616b86; - cursor: pointer; + border: none; + background: transparent; &:hover { color: #717b98; |