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 {
/>
+
Accessible Text-based Canvas
diff --git a/client/modules/IDE/components/TextOutput.js b/client/modules/IDE/components/TextOutput.js
index 6adf9e50..777dd370 100644
--- a/client/modules/IDE/components/TextOutput.js
+++ b/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 (
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;