add labels for buttons

This commit is contained in:
MathuraMG 2016-07-15 16:47:12 -04:00
parent 589bc9f630
commit 4ddad41053
5 changed files with 66 additions and 8 deletions

View file

@ -23,18 +23,28 @@ function Preferences(props) {
<section className={preferencesContainerClass} tabIndex="0" title="preference-menu"> <section className={preferencesContainerClass} tabIndex="0" title="preference-menu">
<div className="preferences__heading"> <div className="preferences__heading">
<h2 className="preferences__title">Preferences</h2> <h2 className="preferences__title">Preferences</h2>
<button className="preferences__exit-button" onClick={props.closePreferences}> <button
className="preferences__exit-button"
onClick={props.closePreferences}
title="exit"
>
<Isvg src={exitUrl} alt="Exit Preferences" /> <Isvg src={exitUrl} alt="Exit Preferences" />
</button> </button>
</div> </div>
<div className="preference"> <div className="preference">
<h4 className="preference__title">Text Size</h4> <h4 className="preference__title">Text Size</h4>
<button className="preference__plus-button" onClick={props.decreaseFont}> <button
className="preference__plus-button"
onClick={props.decreaseFont}
id="preference-decrease-font-size"
>
<Isvg src={minusUrl} alt="Decrease Font Size" /> <Isvg src={minusUrl} alt="Decrease Font Size" />
<h6 className="preference__label">Decrease</h6> <h6 className="preference__label">Decrease</h6>
</button> </button>
<label htmlFor="preference-decrease-font-size" className="preference__button-label">
Decrease Font Size
</label>
<input <input
className="preference__value" className="preference__value"
aria-live="status" aria-live="status"
@ -44,18 +54,32 @@ function Preferences(props) {
onChange={props.updateFont} onChange={props.updateFont}
> >
</input> </input>
<button className="preference__minus-button" onClick={props.increaseFont}> <button
className="preference__minus-button"
onClick={props.increaseFont}
id="preference-increase-font-size"
>
<Isvg src={plusUrl} alt="Increase Font Size" /> <Isvg src={plusUrl} alt="Increase Font Size" />
<h6 className="preference__label">Increase</h6> <h6 className="preference__label">Increase</h6>
</button> </button>
<label htmlFor="preference-increase-font-size" className="preference__button-label">
Increase Font Size
</label>
</div> </div>
<div className="preference"> <div className="preference">
<h4 className="preference__title">Indentation Amount</h4> <h4 className="preference__title">Indentation Amount</h4>
<button className="preference__plus-button" onClick={props.decreaseIndentation}> <button
className="preference__plus-button"
onClick={props.decreaseIndentation}
id="preference-decrease-indentation"
>
<Isvg src={minusUrl} alt="DecreaseIndentation Amount" /> <Isvg src={minusUrl} alt="DecreaseIndentation Amount" />
<h6 className="preference__label">Decrease</h6> <h6 className="preference__label">Decrease</h6>
</button> </button>
<label htmlFor="preference-decrease-indentation" className="preference__button-label">
Decrease Indentation Amount
</label>
<input <input
className="preference__value" className="preference__value"
aria-live="status" aria-live="status"
@ -65,10 +89,17 @@ function Preferences(props) {
onChange={props.updateIndentation} onChange={props.updateIndentation}
> >
</input> </input>
<button className="preference__minus-button" onClick={props.increaseIndentation}> <button
className="preference__minus-button"
onClick={props.increaseIndentation}
id="preference-increase-indentation"
>
<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>
<label htmlFor="preference-increase-indentation" className="preference__button-label">
Increase Indentation Amount
</label>
<div className="preference__vertical-list"> <div className="preference__vertical-list">
<button className={preferencesSpaceOptionClass} onClick={props.indentWithSpace}>Spaces</button> <button className={preferencesSpaceOptionClass} onClick={props.indentWithSpace}>Spaces</button>
<button className={preferencesTabOptionClass} onClick={props.indentWithTab}>Tabs</button> <button className={preferencesTabOptionClass} onClick={props.indentWithTab}>Tabs</button>

View file

@ -24,12 +24,18 @@ function Toolbar(props) {
return ( return (
<div className="toolbar"> <div className="toolbar">
<img className="toolbar__logo" src={logoUrl} alt="p5js Logo" /> <img className="toolbar__logo" src={logoUrl} alt="p5js Logo" />
<button className={playButtonClass} onClick={props.startSketch}> <button className={playButtonClass} onClick={props.startSketch} id="play-button">
<Isvg src={playUrl} alt="Play Sketch" /> <Isvg src={playUrl} alt="Play Sketch" />
</button> </button>
<button className={stopButtonClass} onClick={props.stopSketch}> <label htmlFor="play-button" className="toolbar__button-label">
play
</label>
<button className={stopButtonClass} onClick={props.stopSketch} id="stop-button">
<Isvg src={stopUrl} alt="Stop Sketch" /> <Isvg src={stopUrl} alt="Stop Sketch" />
</button> </button>
<label htmlFor="stop-button" className="toolbar__button-label">
stop
</label>
<div className="toolbar__project-name-container"> <div className="toolbar__project-name-container">
<span <span
className="toolbar__project-name" className="toolbar__project-name"
@ -44,9 +50,13 @@ function Toolbar(props) {
<button <button
className={preferencesButtonClass} className={preferencesButtonClass}
onClick={props.openPreferences} onClick={props.openPreferences}
id="preferences-button"
> >
<Isvg src={preferencesUrl} alt="Show Preferences" /> <Isvg src={preferencesUrl} alt="Show Preferences" />
</button> </button>
<label htmlFor="preferences-button" className="toolbar__button-label">
preferences
</label>
</div> </div>
); );
} }

View file

@ -106,3 +106,12 @@
color: $light-primary-text-color; color: $light-primary-text-color;
} }
} }
%fake-label {
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}

View file

@ -79,3 +79,7 @@
@extend %preference-option--selected; @extend %preference-option--selected;
} }
} }
.preference__button-label {
@extend %fake-label
}

View file

@ -54,3 +54,7 @@
color: $light-inactive-text-color; color: $light-inactive-text-color;
} }
} }
.toolbar__button-label {
@extend %fake-label
}