add preview; output focus

This commit is contained in:
MathuraMG 2016-08-31 23:07:43 -04:00
parent f8ab95d0dc
commit 6cba157687
3 changed files with 19 additions and 2 deletions

View file

@ -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>

View file

@ -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>

View file

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