Merge pull request #83 from MathuraMG/accessibility

add preview; output focus
This commit is contained in:
Cassie Tarakajian 2016-09-01 18:13:04 -04:00 committed by GitHub
commit f00acd0de0
3 changed files with 20 additions and 2 deletions

View file

@ -8,6 +8,7 @@ import classNames from 'classnames';
const exitUrl = require('../../../images/exit.svg'); const exitUrl = require('../../../images/exit.svg');
const plusUrl = require('../../../images/plus.svg'); const plusUrl = require('../../../images/plus.svg');
const minusUrl = require('../../../images/minus.svg'); const minusUrl = require('../../../images/minus.svg');
const beepUrl = require('../../../sounds/audioAlert.mp3');
class Preferences extends React.Component { class Preferences extends React.Component {
constructor(props) { constructor(props) {
@ -34,6 +35,7 @@ class Preferences extends React.Component {
} }
render() { render() {
const beep = new Audio(beepUrl);
const preferencesContainerClass = classNames({ const preferencesContainerClass = classNames({
preferences: true, preferences: true,
'preferences--selected': this.props.isVisible 'preferences--selected': this.props.isVisible
@ -189,6 +191,13 @@ class Preferences extends React.Component {
/> />
<label htmlFor="lint-warning-off" className="preference__option">Off</label> <label htmlFor="lint-warning-off" className="preference__option">Off</label>
</div> </div>
<button
className="preference__preview-button"
onClick={() => beep.play()}
aria-label="preview sound"
>
Preview Sound
</button>
</div> </div>
<div className="preference"> <div className="preference">
<h4 className="preference__title">Accessible Text-based Canvas</h4> <h4 className="preference__title">Accessible Text-based Canvas</h4>

View file

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

View file

@ -92,6 +92,13 @@
color: $light-inactive-text-color; color: $light-inactive-text-color;
} }
.preference__preview-button {
@extend %preference-option;
padding: 0;
padding-left: #{110 / $base-font-size}rem;
outline: none;
}
.preference__options { .preference__options {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;