r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

Fix focus switch to accessible text output (#318)

Browse source 
* Change accessibility example links

* ensure we focus on text output
This commit is contained in:
Mathura MG 2017-03-06 15:58:36 -05:00 committed by Cassie Tarakajian
parent 8167366ce0
commit 8e688a6103
2 changed files with 16 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
client/modules/IDE/components/TextOutput.jsx
View file

@ -1,9 +1,15 @@
import React from 'react';
import React, { PropTypes } from 'react';
class TextOutput extends React.Component {
componentDidMount() {
this.canvasTextOutput.focus();
}
componentDidUpdate(prevProps) {
// if the user explicitly clicks on the play button, want to refocus on the text output
if (this.props.isPlaying && this.props.previewIsRefreshing) {
this.canvasTextOutput.focus();
}
}
render() {
return (
<section
@ -43,4 +49,9 @@ class TextOutput extends React.Component {
}
}
TextOutput.propTypes = {
isPlaying: PropTypes.bool.isRequired,
previewIsRefreshing: PropTypes.bool.isRequired
};
export default TextOutput;

5
client/modules/IDE/pages/IDEView.jsx
View file

@ -329,7 +329,10 @@ class IDEView extends React.Component {
{(() => {
if ((this.props.preferences.textOutput && this.props.ide.isPlaying) || this.props.ide.isTextOutputPlaying) {
return (
<TextOutput />
<TextOutput
isPlaying={this.props.ide.isPlaying}
previewIsRefreshing={this.props.ide.previewIsRefreshing}
/>
);
}
return '';