Merge pull request #29 from MathuraMG/label

add aria tags and roles

client/images/down-arrow.svg

@@ -2,7 +2,7 @@
 <svg width="14px" height="9px" viewBox="0 0 14 9" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <!-- Generator: Sketch 39 (31667) - http://www.bohemiancoding.com/sketch -->
     <title>arrow shape copy 2</title>
-    <desc>Created with Sketch.</desc>
+    <!-- <desc>Created with Sketch.</desc> -->
     <defs></defs>
     <g id="IDEs" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.539999962">
         <g id="p5js-IDE-styles-foundation-pt-2" transform="translate(-425.000000, -1168.000000)" fill="#333333">
@@ -11,4 +11,4 @@
             </g>
         </g>
     </g>
-</svg>
+</svg>

client/images/exit.svg

@@ -2,7 +2,7 @@
 <svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <!-- Generator: Sketch 3.8.3 (29802) - http://www.bohemiancoding.com/sketch -->
     <title>Exit</title>
-    <desc>Created with Sketch.</desc>
+    <!-- <desc>Created with Sketch.</desc> -->
     <defs></defs>
     <g id="exit" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="Artboard-1" fill="#D8D8D8">

client/images/left-arrow.svg

@@ -2,7 +2,7 @@
 <svg width="10px" height="15px" viewBox="0 0 10 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <!-- Generator: Sketch 3.8.3 (29802) - http://www.bohemiancoding.com/sketch -->
     <title>arrow shape copy</title>
-    <desc>Created with Sketch.</desc>
+    <!-- <desc>Created with Sketch.</desc> -->
     <defs></defs>
     <g id="IDEs" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.539999962">
         <g id="p5js-IDE-styles-foundation-pt-2" transform="translate(-529.000000, -1165.000000)" fill="#333333">

client/images/minus.svg

@@ -2,7 +2,7 @@
 <svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <!-- Generator: Sketch 3.8.3 (29802) - http://www.bohemiancoding.com/sketch -->
     <title>Decrease Value</title>
-    <desc>Created with Sketch.</desc>
+    <!-- <desc>Created with Sketch.</desc> -->
     <defs></defs>
     <g id="Decrease value" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="16" transform="translate(0.000000, -6.000000)" fill="#D8D8D8">

client/images/p5js-logo.svg

@@ -2,7 +2,7 @@
 <svg width="76px" height="35px" viewBox="0 0 76 35" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <!-- Generator: Sketch 3.7.2 (28276) - http://www.bohemiancoding.com/sketch -->
     <title>p5js-rect</title>
-    <desc>Created with Sketch.</desc>
+    <!-- <desc>Created with Sketch.</desc> -->
     <defs></defs>
     <g id="IDEs" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="Desktop-IDE-light" transform="translate(-92.000000, -60.000000)" fill="#EC245E">

client/images/play.svg

@@ -2,7 +2,7 @@
 <svg width="17px" height="17px" viewBox="0 0 17 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <!-- Generator: Sketch 3.7.2 (28276) - http://www.bohemiancoding.com/sketch -->
     <title>play</title>
-    <desc>Created with Sketch.</desc>
+    <!-- <desc>Created with Sketch.</desc> -->
     <defs></defs>
     <g id="IDEs" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="Desktop-IDE-light" transform="translate(-218.000000, -69.000000)" fill="#ED225D">

client/images/plus-icon.svg

@@ -2,7 +2,7 @@
 <svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <!-- Generator: Sketch 3.8.3 (29802) - http://www.bohemiancoding.com/sketch -->
     <title>close shape</title>
-    <desc>Created with Sketch.</desc>
+    <!-- <desc>Created with Sketch.</desc> -->
     <defs></defs>
     <g id="IDEs" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.539999962">
         <g id="p5js-IDE-styles-foundation-pt-2" transform="translate(-558.000000, -1166.000000)" fill="#333333">

client/images/plus.svg

@@ -2,7 +2,7 @@
 <svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <!-- Generator: Sketch 3.8.3 (29802) - http://www.bohemiancoding.com/sketch -->
     <title>Increase Value</title>
-    <desc>Created with Sketch.</desc>
+    <!-- <desc>Created with Sketch.</desc> -->
     <defs></defs>
     <g id="Increase Value" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="16" fill="#D8D8D8">

client/images/preferences.svg

@@ -2,7 +2,7 @@
 <svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <!-- Generator: Sketch 3.8.3 (29802) - http://www.bohemiancoding.com/sketch -->
     <title>preferences</title>
-    <desc>Created with Sketch.</desc>
+    <!-- <desc>Created with Sketch.</desc> -->
     <defs>
         <path d="M14.6822397,16.2117311 L15.1198278,19.0213068 C14.3844186,19.4395702 13.5928664,19.770504 12.7592794,20 L11.0818617,17.703677 C10.7282919,17.7528772 10.367116,17.7783101 10,17.7783101 C9.63288395,17.7783101 9.2717081,17.7528772 8.91813825,17.703677 L7.24072063,20 C6.40713364,19.770504 5.6155814,19.4395702 4.88017224,19.0213068 L5.31776031,16.2117311 C4.73977887,15.7753775 4.22462249,15.2602211 3.78826886,14.6822397 L0.978693166,15.1198278 C0.560429839,14.3844186 0.22949601,13.5928664 -2.84217094e-14,12.7592794 L2.29632299,11.0818617 C2.24712285,10.7282919 2.22168987,10.367116 2.22168987,10 C2.22168987,9.63288395 2.24712285,9.2717081 2.29632299,8.91813825 L-8.12791077e-15,7.24072063 C0.22949601,6.40713364 0.560429839,5.6155814 0.978693166,4.88017224 L3.78826886,5.31776031 C4.22462249,4.73977887 4.73977887,4.22462249 5.31776031,3.78826886 L4.88017224,0.978693166 C5.6155814,0.560429839 6.40713364,0.22949601 7.24072063,0 L8.91813825,2.29632299 C9.2717081,2.24712285 9.63288395,2.22168987 10,2.22168987 C10.367116,2.22168987 10.7282919,2.24712285 11.0818617,2.29632299 L12.7592794,1.98620157e-14 C13.5928664,0.22949601 14.3844186,0.560429839 15.1198278,0.978693166 L14.6822397,3.78826886 C15.2602211,4.22462249 15.7753775,4.73977887 16.2117311,5.31776031 L19.0213068,4.88017224 C19.4395702,5.6155814 19.770504,6.40713364 20,7.24072063 L17.703677,8.91813825 C17.7528772,9.2717081 17.7783101,9.63288395 17.7783101,10 C17.7783101,10.367116 17.7528772,10.7282919 17.703677,11.0818617 L20,12.7592794 C19.770504,13.5928664 19.4395702,14.3844186 19.0213068,15.1198278 L16.2117311,14.6822397 C15.7753775,15.2602211 15.2602211,15.7753775 14.6822397,16.2117311 L14.6822397,16.2117311 Z M10,13.8891551 C12.147921,13.8891551 13.8891551,12.147921 13.8891551,10 C13.8891551,7.85207897 12.147921,6.11084493 10,6.11084493 C7.85207897,6.11084493 6.11084493,7.85207897 6.11084493,10 C6.11084493,12.147921 7.85207897,13.8891551 10,13.8891551 Z" id="path-1"></path>
     </defs>

client/images/right-arrow.svg

@@ -2,7 +2,7 @@
 <svg width="10px" height="15px" viewBox="0 0 10 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <!-- Generator: Sketch 3.8.3 (29802) - http://www.bohemiancoding.com/sketch -->
     <title>arrow shape copy</title>
-    <desc>Created with Sketch.</desc>
+    <!-- <desc>Created with Sketch.</desc> -->
     <defs></defs>
     <g id="IDEs" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.539999962">
         <g id="p5js-IDE-styles-foundation-pt-2" transform="translate(-496.000000, -1165.000000)" fill="#333333">

client/images/stop.svg

@@ -2,7 +2,7 @@
 <svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <!-- Generator: Sketch 3.7.2 (28276) - http://www.bohemiancoding.com/sketch -->
     <title>stop</title>
-    <desc>Created with Sketch.</desc>
+    <!-- <desc>Created with Sketch.</desc> -->
     <defs></defs>
     <g id="IDEs" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="Desktop-IDE-light" transform="translate(-280.000000, -69.000000)" fill="#ED225D">

client/images/up-arrow.svg

@@ -2,7 +2,7 @@
 <svg width="14px" height="9px" viewBox="0 0 14 9" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <!-- Generator: Sketch 39 (31667) - http://www.bohemiancoding.com/sketch -->
     <title>arrow shape copy</title>
-    <desc>Created with Sketch.</desc>
+    <!-- <desc>Created with Sketch.</desc> -->
     <defs></defs>
     <g id="IDEs" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.539999962">
         <g id="p5js-IDE-styles-foundation-pt-2" transform="translate(-394.000000, -1168.000000)" fill="#333333">

client/modules/IDE/components/Console.js

@@ -55,15 +55,15 @@ class Console extends React.Component {
     });
 
     return (
-      <div ref="console" className={consoleClass}>
+      <div ref="console" className={consoleClass} role="region" tabIndex="0" title="console">
         <div className="preview-console__header">
           <h2 className="preview-console__header-title">console</h2>
-          <a className="preview-console__collapse" onClick={this.props.collapseConsole} >
+          <button className="preview-console__collapse" onClick={this.props.collapseConsole} aria-label="collapse console">
             <InlineSVG src={downArrowUrl} />
-          </a>
-          <a className="preview-console__expand" onClick={this.props.expandConsole} >
+          </button>
+          <button className="preview-console__expand" onClick={this.props.expandConsole} aria-label="expand console">
             <InlineSVG src={upArrowUrl} />
-          </a>
+          </button>
         </div>
         <div ref="console_messages" className="preview-console__messages">
           {childrenToDisplay}

client/modules/IDE/components/NewFileForm.js

@@ -12,7 +12,7 @@ function NewFileForm(props) {
         placeholder="Name"
         {...name}
       />
-      <input type="submit" value="Add File" />
+      <input type="submit" value="Add File" aria-label="add file" />
     </form>
   );
 }

client/modules/IDE/components/Preferences.js

@@ -30,6 +30,7 @@ function Preferences(props) {
           className="preferences__exit-button"
           onClick={props.closePreferences}
           title="exit"
+          aria-label="exit preferences"
         >
           <InlineSVG src={exitUrl} alt="Exit Preferences" />
         </button>
@@ -40,14 +41,11 @@ function Preferences(props) {
         <button
           className="preference__plus-button"
           onClick={props.decreaseFont}
-          id="preference-decrease-font-size"
+          aria-label="decrease font size"
         >
           <InlineSVG src={minusUrl} alt="Decrease Font Size" />
           <h6 className="preference__label">Decrease</h6>
         </button>
-        <label htmlFor="preference-decrease-font-size" className="preference__button-label">
-          Decrease Font Size
-        </label>
         <input
           className="preference__value"
           aria-live="status"
@@ -60,14 +58,11 @@ function Preferences(props) {
         <button
           className="preference__minus-button"
           onClick={props.increaseFont}
-          id="preference-increase-font-size"
+          aria-label="increase font size"
         >
           <InlineSVG src={plusUrl} alt="Increase Font Size" />
           <h6 className="preference__label">Increase</h6>
         </button>
-        <label htmlFor="preference-increase-font-size" className="preference__button-label">
-          Increase Font Size
-        </label>
       </div>
 
       <div className="preference">
@@ -75,14 +70,11 @@ function Preferences(props) {
         <button
           className="preference__plus-button"
           onClick={props.decreaseIndentation}
-          id="preference-decrease-indentation"
+          aria-label="decrease indentation amount"
         >
           <InlineSVG src={minusUrl} alt="DecreaseIndentation Amount" />
           <h6 className="preference__label">Decrease</h6>
         </button>
-        <label htmlFor="preference-decrease-indentation" className="preference__button-label">
-          Decrease Indentation Amount
-        </label>
         <input
           className="preference__value"
           aria-live="status"
@@ -95,17 +87,14 @@ function Preferences(props) {
         <button
           className="preference__minus-button"
           onClick={props.increaseIndentation}
-          id="preference-increase-indentation"
+          aria-label="increase indentation amount"
         >
           <InlineSVG src={plusUrl} alt="IncreaseIndentation Amount" />
           <h6 className="preference__label">Increase</h6>
         </button>
-        <label htmlFor="preference-increase-indentation" className="preference__button-label">
-          Increase Indentation Amount
-        </label>
         <div className="preference__vertical-list">
-          <button className={preferencesSpaceOptionClass} onClick={props.indentWithSpace}>Spaces</button>
-          <button className={preferencesTabOptionClass} onClick={props.indentWithTab}>Tabs</button>
+          <button className={preferencesSpaceOptionClass} onClick={props.indentWithSpace} aria-label="indentation with space">Spaces</button>
+          <button className={preferencesTabOptionClass} onClick={props.indentWithTab} aria-label="indentation with tab">Tabs</button>
         </div>
       </div>
     </section>

client/modules/IDE/components/Sidebar.js

@@ -15,24 +15,27 @@ function Sidebar(props) {
       <div className="sidebar__header">
         <h3 className="sidebar__title">Sketch Files</h3>
         <div className="sidebar__icons">
-          <a
+          <button
+            aria-label="add file"
             className="sidebar__add"
             onClick={props.newFile}
           >
             +
-          </a>
-          <a
+          </button>
+          <button
+            aria-label="collapse file navigation"
             className="sidebar__contract"
             onClick={props.collapseSidebar}
           >
             <InlineSVG src={leftArrowUrl} />
-          </a>
-          <a
+          </button>
+          <button
+            aria-label="expand file navigation"
             className="sidebar__expand"
             onClick={props.expandSidebar}
           >
             <InlineSVG src={rightArrowUrl} />
-          </a>
+          </button>
         </div>
       </div>
       <ul className="sidebar__file-list">

client/modules/IDE/components/Toolbar.js

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

client/modules/User/components/LoginForm.js

@@ -5,26 +5,24 @@ function LoginForm(props) {
   return (
     <form className="login-form" onSubmit={handleSubmit(props.loginUser.bind(this))}>
       <p className="login-form__field">
-        <label className="login-form__email-label" htmlFor="email">Email:</label>
         <input
           className="login-form__email-input"
-          id="email"
+          aria-label="email"
           type="text"
           placeholder="Email"
           {...email}
         />
       </p>
       <p className="login-form__field">
-        <label className="signup-form__password-label" htmlFor="password">Password:</label>
         <input
           className="signup-form__password-input"
-          id="password"
+          aria-label="password"
           type="password"
           placeholder="Password"
           {...password}
         />
       </p>
-      <input type="submit" value="Login" />
+      <input type="submit" value="Login" aria-label="login" />
     </form>
   );
 }

client/modules/User/components/SignupForm.js

@@ -5,51 +5,42 @@ function SignupForm(props) {
   return (
     <form className="signup-form" onSubmit={handleSubmit(props.signUpUser.bind(this))}>
       <p className="signup-form__field">
-        <label className="signup-form__username-label" htmlFor="username">Username:</label>
         <input
           className="signup-form__username-input"
-          id="username"
+          aria-label="username"
           type="text"
           placeholder="Username"
           {...username}
         />
       </p>
       <p className="signup-form__field">
-        <label className="signup-form__email-label" htmlFor="email">Email:</label>
         <input
           className="signup-form__email-input"
-          id="email"
+          aria-label="email"
           type="text"
           placeholder="Email"
           {...email}
         />
       </p>
       <p className="signup-form__field">
-        <label className="signup-form__password-label" htmlFor="password">Password:</label>
         <input
           className="signup-form__password-input"
-          id="password"
+          aria-label="password"
           type="password"
           placeholder="Password"
           {...password}
         />
       </p>
       <p className="signup-form__field">
-        <label
-          className="signup-form__confirm-password-label"
-          htmlFor="confirm-password"
-        >
-          Confirm Password:
-        </label>
         <input
           className="signup-form__confirm-password-input"
-          id="confirm-password"
           type="password"
           placeholder="Confirm Password"
+          aria-label="confirm password"
           {...confirmPassword}
         />
       </p>
-      <input type="submit" value="Sign Up" />
+      <input type="submit" value="Sign Up" aria-label="sign up" />
     </form>
   );
 }

client/styles/abstracts/_placeholders.scss

@@ -108,15 +108,6 @@
   }
 }
 
-%hidden-label {
-	position:absolute;
-	left:-10000px;
-	top:auto;
-	width:1px;
-	height:1px;
-	overflow:hidden;
-}
-
 %modal {
 	background-color: $light-modal-background-color;
 	border: 1px solid $light-modal-border-color;

client/styles/components/_console.scss

@@ -54,14 +54,16 @@
 }
 
 .preview-console__collapse {
+	@extend %icon;
 	.preview-console--collapsed & {
 		display: none;
 	}
 }
 
 .preview-console__expand {
+	@extend %icon;
 	display: none;
 	.preview-console--collapsed & {
 		display: inline-block;
 	}
-}
+}

client/styles/components/_login.scss

@@ -6,12 +6,7 @@
 	justify-content: center;
 }
 
-.login-form__email-label, 
-.login-form__password-label {
-	display: none;
-}
-
-.login-form__email-input, 
+.login-form__email-input,
 .login-form__password-input {
 	width: #{300 / $base-font-size}rem;
 }

client/styles/components/_preferences.scss

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

client/styles/components/_sidebar.scss

@@ -16,6 +16,7 @@
 }
 
 .sidebar__add {
+  @extend %icon;
   cursor: pointer;
   height: #{26 / $base-font-size}rem;
   margin-right: #{16 / $base-font-size}rem;

client/styles/components/_signup.scss

@@ -6,13 +6,6 @@
 	justify-content: center;
 }
 
-.signup-form__username-label,
-.signup-form__email-label,
-.signup-form__password-label,
-.signup-form__confirm-password-label {
-	display: none;
-}
-
 .signup-form__username-input,
 .signup-form__email-input,
 .signup-form__password-input,

client/styles/components/_toolbar.scss

@@ -55,9 +55,6 @@
 	}
 }
 
-.toolbar__button-label {
-	@extend %hidden-label
-}
 .toolbar__project-owner {
 	margin-left: #{5 / $base-font-size}rem;
 }