mastofe

commit: d427df4a8ae16809b068aca8c65006de2ccbd27e
parent: 76a717d549c5592e04056b1b9cc03946fb9da52f
Author: Eugen <eugen@zeonfederated.com>
Date:   Wed,  2 Nov 2016 21:53:05 +0100

Merge pull request #132 from marcus-herrmann/master

a11y: Improve icon button component regarding semantics, screen reader usage
Diffstat:
M
app/assets/javascripts/components/components/icon_button.jsx
6
+++---
M
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
@@ -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
@@ -42,7 +42,8 @@
 
 .icon-button {
   color: #616b86;
-  cursor: pointer;
+  border: none;
+  background: transparent;
 
   &:hover {
     color: #717b98;