Merge pull request #83 from MathuraMG/accessibility

add preview; output focus

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>

client/modules/IDE/components/TextOutput.js

@@ -2,17 +2,19 @@ import React from 'react';
 
 class TextOutput extends React.Component {
   componentDidMount() {
-
+    this.refs.canvasTextOutput.focus();
   }
   render() {
     return (
       <section
         className="text-output"
         id="canvas-sub"
+        ref="canvasTextOutput"
         tabIndex="0"
         aria-label="text-output"
         title="canvas text output"
       >
+        <h2> Output </h2>
         <section id="textOutput-content">
         </section>
         <p
@@ -26,7 +28,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>

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;