r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

change list to buttons - accessibility

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

8
client/modules/IDE/components/Preferences.js
View file

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

2
client/styles/abstracts/_placeholders.scss
View file

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

5
client/styles/components/_preferences.scss
View file

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