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:
parent
ea02d7692d
commit
3acefe4709
3 changed files with 13 additions and 12 deletions
|
@ -205,16 +205,11 @@ class PreviewFrame extends React.Component {
|
||||||
];
|
];
|
||||||
const accessiblelib = sketchDoc.createElement('script');
|
const accessiblelib = sketchDoc.createElement('script');
|
||||||
accessiblelib.setAttribute(
|
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');
|
const accessibleOutputs = sketchDoc.createElement('section');
|
||||||
accessibleOutputs.setAttribute('id', 'accessible-outputs');
|
accessibleOutputs.setAttribute('id', 'accessible-outputs');
|
||||||
accessibleOutputs.style.position = 'absolute';
|
accessibleOutputs.setAttribute('aria-label', 'accessible-output');
|
||||||
accessibleOutputs.style.left = '-1000px';
|
|
||||||
accessibleOutputs.style.top = 'auto';
|
|
||||||
accessibleOutputs.style.width = '1px';
|
|
||||||
accessibleOutputs.style.height = '1px';
|
|
||||||
accessibleOutputs.style.overflow = 'hidden';
|
|
||||||
if (this.props.textOutput) {
|
if (this.props.textOutput) {
|
||||||
sketchDoc.body.appendChild(accessibleOutputs);
|
sketchDoc.body.appendChild(accessibleOutputs);
|
||||||
sketchDoc.body.appendChild(accessiblelib);
|
sketchDoc.body.appendChild(accessiblelib);
|
||||||
|
|
|
@ -60,7 +60,11 @@ class Toolbar extends React.Component {
|
||||||
<div className="toolbar">
|
<div className="toolbar">
|
||||||
<button
|
<button
|
||||||
className="toolbar__play-sketch-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"
|
aria-label="play sketch"
|
||||||
disabled={this.props.infiniteLoop}
|
disabled={this.props.infiniteLoop}
|
||||||
>
|
>
|
||||||
|
@ -169,6 +173,8 @@ Toolbar.propTypes = {
|
||||||
infiniteLoop: PropTypes.bool.isRequired,
|
infiniteLoop: PropTypes.bool.isRequired,
|
||||||
autorefresh: PropTypes.bool.isRequired,
|
autorefresh: PropTypes.bool.isRequired,
|
||||||
setAutorefresh: PropTypes.func.isRequired,
|
setAutorefresh: PropTypes.func.isRequired,
|
||||||
|
setTextOutput: PropTypes.func.isRequired,
|
||||||
|
setGridOutput: PropTypes.func.isRequired,
|
||||||
startSketch: PropTypes.func.isRequired,
|
startSketch: PropTypes.func.isRequired,
|
||||||
startAccessibleSketch: PropTypes.func.isRequired,
|
startAccessibleSketch: PropTypes.func.isRequired,
|
||||||
saveProject: PropTypes.func.isRequired,
|
saveProject: PropTypes.func.isRequired,
|
||||||
|
|
Loading…
Reference in a new issue