add aria-label tag

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">
         <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>
+          </button>
-          <a className="preview-console__expand" onClick={this.props.expandConsole} >
+          <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

@@ -27,6 +27,7 @@ function Preferences(props) {
           className="preferences__exit-button"
           onClick={props.closePreferences}
           title="exit"
+          aria-label="exit preferences"
         >
           <Isvg src={exitUrl} alt="Exit Preferences" />
         </button>
@@ -37,14 +38,11 @@ function Preferences(props) {
         <button
           className="preference__plus-button"
           onClick={props.decreaseFont}
-          id="preference-decrease-font-size"
+          aria-label="decrease font size"
         >
           <Isvg 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"
@@ -57,14 +55,11 @@ function Preferences(props) {
         <button
           className="preference__minus-button"
           onClick={props.increaseFont}
-          id="preference-increase-font-size"
+          aria-label="increase font size"
         >
           <Isvg 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">
@@ -72,14 +67,11 @@ function Preferences(props) {
         <button
           className="preference__plus-button"
           onClick={props.decreaseIndentation}
-          id="preference-decrease-indentation"
+          aria-label="decrease indentation amount"
         >
           <Isvg 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"
@@ -92,17 +84,14 @@ function Preferences(props) {
         <button
           className="preference__minus-button"
           onClick={props.increaseIndentation}
-          id="preference-increase-indentation"
+          aria-label="increase indentation amount"
         >
           <Isvg 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={preferencesSpaceOptionClass} onClick={props.indentWithSpace} aria-label="indentation with space">Spaces</button>
-          <button className={preferencesTabOptionClass} onClick={props.indentWithTab}>Tabs</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>
+          </button>
-          <a
+          <button
+            aria-label="collapse file navigation"
             className="sidebar__contract"
             onClick={props.collapseSidebar}
           >
             <InlineSVG src={leftArrowUrl} />
-          </a>
+          </button>
-          <a
+          <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
+      <button className={stopButtonClass} onClick={props.stopSketch} aria-label="stop sketch">
-      </label>
-      <button className={stopButtonClass} onClick={props.stopSketch} id="stop-button">
         <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/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/_preferences.scss

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

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;
 }