change list to buttons - accessibility

This commit is contained in:
mathuramg 2016-07-11 08:44:27 -04:00
parent 8746558fa8
commit 42d59d3fb3
3 changed files with 11 additions and 4 deletions

View file

@ -55,10 +55,10 @@ function Preferences(props) {
<Isvg src={plusUrl} alt="IncreaseIndentation Amount" />
<h6 className="preference__label">Increase</h6>
</button>
<ul>
<li className={preferencesSpaceOptionClass} onClick={props.indentWithSpace}>Spaces</li>
<li className={preferencesTabOptionClass} onClick={props.indentWithTab}>Tabs</li>
</ul>
<div className="preference__vertical-list">
<button className={preferencesSpaceOptionClass} onClick={props.indentWithSpace}>Spaces</button>
<button className={preferencesTabOptionClass} onClick={props.indentWithTab}>Tabs</button>
</div>
</div>
</div>

View file

@ -91,11 +91,13 @@
}
%preference-option {
background-color: $light-button-background-color;
color: $light-secondary-text-color;
font-size: #{14 / $base-font-size}rem;
cursor: pointer;
text-align: left;
margin-bottom: #{5 / $base-font-size}rem;
border: 0px;
&:hover {
color: $light-primary-text-color;
}

View file

@ -62,6 +62,11 @@
}
}
.preference__vertical-list {
display: flex;
flex-direction: column;
}
.preference__option {
@extend %preference-option;
list-style-type: none;