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
					
				
					 2 changed files with 5 additions and 4 deletions
				
			
		| 
						 | 
					@ -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…
	
	Add table
		
		Reference in a new issue