add labels for buttons

client/modules/IDE/components/Preferences.js

@@ -23,18 +23,28 @@ function Preferences(props) {
     <section className={preferencesContainerClass} tabIndex="0" title="preference-menu">
       <div className="preferences__heading">
         <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" />
         </button>
       </div>
 
       <div className="preference">
         <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" />
           <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"
@@ -44,18 +54,32 @@ function Preferences(props) {
           onChange={props.updateFont}
         >
         </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" />
           <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">
         <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" />
           <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"
@@ -65,10 +89,17 @@ function Preferences(props) {
           onChange={props.updateIndentation}
         >
         </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" />
           <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>

client/modules/IDE/components/Toolbar.js

@@ -24,12 +24,18 @@ function Toolbar(props) {
   return (
     <div className="toolbar">
       <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" />
       </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" />
       </button>
+      <label htmlFor="stop-button" className="toolbar__button-label">
+        stop
+      </label>
       <div className="toolbar__project-name-container">
         <span
           className="toolbar__project-name"
@@ -44,9 +50,13 @@ function Toolbar(props) {
       <button
         className={preferencesButtonClass}
         onClick={props.openPreferences}
+        id="preferences-button"
       >
         <Isvg src={preferencesUrl} alt="Show Preferences" />
       </button>
+      <label htmlFor="preferences-button" className="toolbar__button-label">
+        preferences
+      </label>
     </div>
   );
 }

client/styles/abstracts/_placeholders.scss

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

client/styles/components/_preferences.scss

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

client/styles/components/_toolbar.scss

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