From 87aabeb7af3c07faf872f8ce174fb0e7c0664f7b Mon Sep 17 00:00:00 2001
From: mhe <mail@marcus-herrmann.com>
Date: Wed, 2 Nov 2016 20:18:39 +0100
Subject: [PATCH] a11y: Improve icon button component regarding semantics and
screen reader usage
---
.../javascripts/components/components/icon_button.jsx | 6 +++---
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 5091922609..085c185413 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 b720848c54..704462dc1a 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;
--
GitLab