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

Remove accessibility CSS; Auto focus (#583) 

* Change accessibility example links

* added library to iframe

* changed preview to add accessible elements to iframe

* add library only when accesible output is seleceted

* focus on iframe when plaing

* css

* deleted accessibleOutput.jsx and edited IDEView to integrate accessibility library

* deleted comments

* fix package

* Moved CSS to library and removed section from file.js (#2)

* Remove gitmodule (#509)


* remove git modules

* removed submodule and replaced interceptor for library

* removed submodule and replaced interceptor for library (#510)

* deleted comments

* deleted jquery

* deleted interceptor folder

* delete interceptor

* added jquery

* removed jquery and updated accessible library cdn

* Fixes #508 (#539)

* removed submodule and replaced interceptor for library

* deleted comments

* deleted jquery

* deleted interceptor folder

* delete interceptor

* added jquery

* removed jquery and updated accessible library cdn

* remove empty divs from files.js

* fix merge error

* remove empty divs from files.js

* Fixes #508  (#545)

* removed submodule and replaced interceptor for library

* deleted comments

* deleted jquery

* deleted interceptor folder

* delete interceptor

* added jquery

* removed jquery and updated accessible library cdn

* remove empty divs from files.js

* fix merge error

* remove empty divs from files.js

* moved accessible output css

* removed css, added aria-label, preliminary cdn update

* removed section from iframe

* updated cdn

* add autofocus; remove CSS
This commit is contained in:
Mathura MG 2018-03-01 13:28:43 -05:00 committed by Cassie Tarakajian
parent ea02d7692d
commit 3acefe4709
3 changed files with 13 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
client/modules/IDE/components/PreviewFrame.jsx
View File

@ -205,16 +205,11 @@ class PreviewFrame extends React.Component {
];
const accessiblelib = sketchDoc.createElement('script');
accessiblelib.setAttribute(
'src', 'https://cdn.rawgit.com/MathuraMG/p5-accessibility/9cb5bd0b/dist/p5-accessibility.js'
'src', 'https://cdn.rawgit.com/MathuraMG/p5-accessibility/298ccdf6/dist/p5-accessibility.js'
);
const accessibleOutputs = sketchDoc.createElement('section');
accessibleOutputs.setAttribute('id', 'accessible-outputs');
accessibleOutputs.style.position = 'absolute';
accessibleOutputs.style.left = '-1000px';
accessibleOutputs.style.top = 'auto';
accessibleOutputs.style.width = '1px';
accessibleOutputs.style.height = '1px';
accessibleOutputs.style.overflow = 'hidden';
accessibleOutputs.setAttribute('aria-label', 'accessible-output');
if (this.props.textOutput) {
sketchDoc.body.appendChild(accessibleOutputs);
sketchDoc.body.appendChild(accessiblelib);

8
client/modules/IDE/components/Toolbar.jsx
View File

@ -60,7 +60,11 @@ class Toolbar extends React.Component {
<div className="toolbar">
<button
className="toolbar__play-sketch-button"
onClick={this.props.startAccessibleSketch}
onClick={() => {
this.props.startAccessibleSketch();
this.props.setTextOutput(true);
this.props.setGridOutput(true);
}}
aria-label="play sketch"
disabled={this.props.infiniteLoop}
>
@ -169,6 +173,8 @@ Toolbar.propTypes = {
infiniteLoop: PropTypes.bool.isRequired,
autorefresh: PropTypes.bool.isRequired,
setAutorefresh: PropTypes.func.isRequired,
setTextOutput: PropTypes.func.isRequired,
setGridOutput: PropTypes.func.isRequired,
startSketch: PropTypes.func.isRequired,
startAccessibleSketch: PropTypes.func.isRequired,
saveProject: PropTypes.func.isRequired,

8
client/modules/IDE/reducers/files.js
View File

@ -1,11 +1,11 @@
import objectID from 'bson-objectid';
import * as ActionTypes from '../../../constants';
const defaultSketch = `function setup() {
const defaultSketch = `function setup() {
createCanvas(400, 400);
}
}
function draw() {
function draw() {
background(220);
}`;
@ -22,7 +22,7 @@ const defaultHTML =
</head>
<body>
<script src="sketch.js"></script>
</body>
</body>
</html>
`;