From 6cba157687803cf9c2ac7fbeee628e11510098bd Mon Sep 17 00:00:00 2001
From: MathuraMG <mmg9291@gmail.com>
Date: Wed, 31 Aug 2016 23:07:43 -0400
Subject: [PATCH] add preview; output focus

---
 client/modules/IDE/components/Preferences.js | 9 +++++++++
 client/modules/IDE/components/TextOutput.js  | 5 +++--
 client/styles/components/_preferences.scss   | 7 +++++++
 3 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/client/modules/IDE/components/Preferences.js b/client/modules/IDE/components/Preferences.js
index 0cf77843..e9ba2fe3 100644
--- a/client/modules/IDE/components/Preferences.js
+++ b/client/modules/IDE/components/Preferences.js
@@ -8,6 +8,7 @@ import classNames from 'classnames';
 const exitUrl = require('../../../images/exit.svg');
 const plusUrl = require('../../../images/plus.svg');
 const minusUrl = require('../../../images/minus.svg');
+const beepUrl = require('../../../sounds/audioAlert.mp3');
 
 class Preferences extends React.Component {
   constructor(props) {
@@ -34,6 +35,7 @@ class Preferences extends React.Component {
   }
 
   render() {
+    const beep = new Audio(beepUrl);
     const preferencesContainerClass = classNames({
       preferences: true,
       'preferences--selected': this.props.isVisible
@@ -189,6 +191,13 @@ class Preferences extends React.Component {
             />
             <label htmlFor="lint-warning-off" className="preference__option">Off</label>
           </div>
+          <button
+            className="preference__preview-button"
+            onClick={() => beep.play()}
+            aria-label="preview sound"
+          >
+            Preview Sound
+          </button>
         </div>
         <div className="preference">
           <h4 className="preference__title">Accessible Text-based Canvas</h4>
diff --git a/client/modules/IDE/components/TextOutput.js b/client/modules/IDE/components/TextOutput.js
index 6adf9e50..515bfc28 100644
--- a/client/modules/IDE/components/TextOutput.js
+++ b/client/modules/IDE/components/TextOutput.js
@@ -2,7 +2,7 @@ import React from 'react';
 
 class TextOutput extends React.Component {
   componentDidMount() {
-
+    document.getElementById('canvas-sub').focus();
   }
   render() {
     return (
@@ -13,6 +13,7 @@ class TextOutput extends React.Component {
         aria-label="text-output"
         title="canvas text output"
       >
+        <h2> Output </h2>
         <section id="textOutput-content">
         </section>
         <p
@@ -26,7 +27,7 @@ class TextOutput extends React.Component {
           tabIndex="0"
           role="main"
           id="textOutput-content-details"
-          aria-label="text output summary details"
+          aria-label="text output details"
         >
         </table>
       </section>
diff --git a/client/styles/components/_preferences.scss b/client/styles/components/_preferences.scss
index d33c355c..e9bfedf1 100644
--- a/client/styles/components/_preferences.scss
+++ b/client/styles/components/_preferences.scss
@@ -92,6 +92,13 @@
 	color: $light-inactive-text-color;
 }
 
+.preference__preview-button {
+	@extend %preference-option;
+	padding: 0;
+	padding-left: #{110 / $base-font-size}rem;
+	outline: none;
+}
+
 .preference__options {
 	display: flex;
 	justify-content: space-between;