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

Accessibility - Transition from interceptor to accessibility library (#508)

Browse source 
* 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

* Remove gitmodule (#509)


* remove git modules

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

* 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

* 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

* Fixes #508 (#548)

* 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
This commit is contained in:
Luis Morales-Navarro 2018-02-23 05:47:25 +08:00 committed by Cassie Tarakajian
parent 3b10b2d0f3
commit 24b0be629f
11 changed files with 54 additions and 205 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
.gitmodules vendored
View file

@ -1,4 +0,0 @@
[submodule "static/p5-interceptor"]
path = static/p5-interceptor
url = git://github.com/MathuraMG/p5-interceptor.git
branch = master

3
Dockerfile
View file

@ -8,8 +8,7 @@ ADD . $APP_HOME
WORKDIR $APP_HOME WORKDIR $APP_HOME
# Install node modules # Install node modules
RUN git submodule init && \ RUN npm install
npm install
# Rebuild node-sass just to be safe # Rebuild node-sass just to be safe
RUN npm rebuild node-sass RUN npm rebuild node-sass

32
README.md
View file

@ -6,12 +6,11 @@ This project is currently in development! It will be announced when there is a (
1. Fork this repository. 1. Fork this repository.
2. Clone the forked repostory and cd into it 2. Clone the forked repostory and cd into it
3. `$ git submodule init` 3. `$ npm install`
4. `$ npm install` 4. Install MongoDB and make sure it is running
5. Install MongoDB and make sure it is running
* For Mac OSX with [homebrew](http://brew.sh/): `brew install mongodb` then `brew services start mongodb` * For Mac OSX with [homebrew](http://brew.sh/): `brew install mongodb` then `brew services start mongodb`
* For Windows and Linux: [MongoDB Installation](https://docs.mongodb.com/manual/installation/) * For Windows and Linux: [MongoDB Installation](https://docs.mongodb.com/manual/installation/)
6. Create a file called `.env` in the root of this directory that looks like 5. Create a file called `.env` in the root of this directory that looks like
``` ```
API_URL=/api API_URL=/api
@ -29,10 +28,10 @@ This project is currently in development! It will be announced when there is a (
If you don't care about being able to upload media files to S3 or Login with Github, you can drop in the file exactly how it is. Or, if you don't want to do that, just ask me to send you mine. Refer to [this gist](https://gist.github.com/catarak/70c9301f0fd1ac2d6b58de03f61997e3) for creating an S3 bucket for testing, or if you don't want to do that, I can add you to one of my S3 buckets. If you don't care about being able to upload media files to S3 or Login with Github, you can drop in the file exactly how it is. Or, if you don't want to do that, just ask me to send you mine. Refer to [this gist](https://gist.github.com/catarak/70c9301f0fd1ac2d6b58de03f61997e3) for creating an S3 bucket for testing, or if you don't want to do that, I can add you to one of my S3 buckets.
7. `$ npm run fetch-examples` - this downloads the example sketches into a user called 'p5' 6. `$ npm run fetch-examples` - this downloads the example sketches into a user called 'p5'
8. `$ npm start` 7. `$ npm start`
9. Navigate to [http://localhost:8000](http://localhost:8000) in your browser 8. Navigate to [http://localhost:8000](http://localhost:8000) in your browser
10. Install the [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en). 9. Install the [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en).
10. Open and close the Redux DevTools using `ctrl+h`, and move them with `ctrl+w` 10. Open and close the Redux DevTools using `ctrl+h`, and move them with `ctrl+w`
### Testing SSL on your local machine ### Testing SSL on your local machine
@ -68,10 +67,9 @@ If you don't have the full server environment running, you can launch a one-off
## Production Installation ## Production Installation
1. Clone this repostory and `cd` into it 1. Clone this repostory and `cd` into it
2. `$ git submodule init` 2. `$ npm install`
3. `$ npm install` 3. Install MongoDB and make sure it is running
4. Install MongoDB and make sure it is running 4. Create a file called `.env` in the root of this directory that looks like
5. Create a file called `.env` in the root of this directory that looks like
``` ```
API_URL=/api API_URL=/api
@ -91,9 +89,9 @@ If you don't have the full server environment running, you can launch a one-off
``` ```
For production, you will need to have real Github and Amazon credentions. Refer to [this gist](https://gist.github.com/catarak/70c9301f0fd1ac2d6b58de03f61997e3) for creating an S3 bucket for testing. For production, you will need to have real Github and Amazon credentions. Refer to [this gist](https://gist.github.com/catarak/70c9301f0fd1ac2d6b58de03f61997e3) for creating an S3 bucket for testing.
6. `$ npm run fetch-examples` - this downloads the example sketches into a user called 'p5' 5. `$ npm run fetch-examples` - this downloads the example sketches into a user called 'p5'
7. `$ npm run build` 6. `$ npm run build`
8. `$ npm run start:prod` 7. `$ npm run start:prod`
### For Production Setup with PM2 ### For Production Setup with PM2
1. `$ npm install -g pm2` 1. `$ npm install -g pm2`
@ -119,7 +117,7 @@ http://docs.aws.amazon.com/AmazonS3/latest/dev/VirtualHosting.html#VirtualHostin
## Accessibility Guidelines ## Accessibility Guidelines
Here is guide on [how to use the accessible editor](https://gist.github.com/MathuraMG/e86666b7b41fbc8c078bad9aff3f666d) Here is guide on [how to use the accessible editor](https://gist.github.com/MathuraMG/e86666b7b41fbc8c078bad9aff3f666d) and here is an overview of the [p5-accessibility.js](https://github.com/MathuraMG/p5-accessibility/blob/master/README.md) library that makes p5.js sketches accessible to screen readers.
The code for the p5.js web editor adheres to web accessibility standards. The following guidelines will help to ensure that accessibility continues to be a priority as development continues. The code for the p5.js web editor adheres to web accessibility standards. The following guidelines will help to ensure that accessibility continues to be a priority as development continues.
@ -146,7 +144,7 @@ See [CONTRIBUTING.md](https://github.com/processing/p5.js-web-editor/blob/master
The p5.js Web Editor is built on a MERN stack - MongoDB, Express, React/Redux, and Node. For a reference to the file structure format I am using, please look at the [Mern Starter](https://github.com/Hashnode/mern-starter) and [this comment](https://github.com/Hashnode/mern-starter/issues/90#issuecomment-221553573). The p5.js Web Editor is built on a MERN stack - MongoDB, Express, React/Redux, and Node. For a reference to the file structure format I am using, please look at the [Mern Starter](https://github.com/Hashnode/mern-starter) and [this comment](https://github.com/Hashnode/mern-starter/issues/90#issuecomment-221553573).
This project uses an in-development [p5.js interceptor library](https://github.com/MathuraMG/p5-interceptor) for accessibility as git submodule. Every time you run `npm install`, it will update the interceptor to HEAD, so it is important to do this often. This project uses an in-development [p5-accessibility.js library](https://github.com/MathuraMG/p5-accessibility) for accessibility.
This project does not use CSS Modules, but uses Sass. I like to follow [BEM rules](http://getbem.com/) for CSS naming conventions, write OOSCSS with placeholders and mixins, and follow the [7-1 Pattern](https://sass-guidelin.es/#the-7-1-pattern) for Sass. This project does not use CSS Modules, but uses Sass. I like to follow [BEM rules](http://getbem.com/) for CSS naming conventions, write OOSCSS with placeholders and mixins, and follow the [7-1 Pattern](https://sass-guidelin.es/#the-7-1-pattern) for Sass.

52
client/modules/IDE/components/AccessibleOutput.jsx
View file

@ -1,52 +0,0 @@
import PropTypes from 'prop-types';
import React from 'react';
import GridOutput from '../components/GridOutput';
import TextOutput from '../components/TextOutput';
class AccessibleOutput extends React.Component {
componentDidMount() {
this.accessibleOutputModal.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.accessibleOutputModal.focus();
}
}
render() {
return (
<section
className="accessible-output"
id="canvas-sub"
ref={(element) => { this.accessibleOutputModal = element; }}
tabIndex="0"
aria-label="accessible-output"
title="canvas text output"
>
{(() => { // eslint-disable-line
if (this.props.textOutput) {
return (
<TextOutput />
);
}
})()}
{(() => { // eslint-disable-line
if (this.props.gridOutput) {
return (
<GridOutput />
);
}
})()}
</section>
);
}
}
AccessibleOutput.propTypes = {
isPlaying: PropTypes.bool.isRequired,
previewIsRefreshing: PropTypes.bool.isRequired,
textOutput: PropTypes.bool.isRequired,
gridOutput: PropTypes.bool.isRequired
};
export default AccessibleOutput;

38
client/modules/IDE/components/GridOutput.jsx
View file

@ -1,38 +0,0 @@
import React from 'react';
class GridOutput extends React.Component {
componentDidMount() {
this.GridOutputModal.focus();
}
render() {
return (
<section
id="gridOutput-content"
ref={(element) => { this.GridOutputModal = element; }}
>
<h2> table Output </h2>
<p
tabIndex="0"
role="main"
id="gridOutput-content-summary"
aria-label="table output summary"
>
</p>
<table
id="gridOutput-content-table"
summary="table output details"
>
</table>
<div
tabIndex="0"
role="main"
id="gridOutput-content-details"
aria-label="table output details"
>
</div>
</section>
);
}
}
export default GridOutput;

74
client/modules/IDE/components/PreviewFrame.jsx
View file

@ -199,49 +199,42 @@ class PreviewFrame extends React.Component {
this.resolveScripts(sketchDoc, resolvedFiles); this.resolveScripts(sketchDoc, resolvedFiles);
this.resolveStyles(sketchDoc, resolvedFiles); this.resolveStyles(sketchDoc, resolvedFiles);
let scriptsToInject = [ const scriptsToInject = [
'/loop-protect.min.js', '/loop-protect.min.js',
'/hijackConsole.js' '/hijackConsole.js'
]; ];
if ( const accessiblelib = sketchDoc.createElement('script');
this.props.isAccessibleOutputPlaying || accessiblelib.setAttribute('src', 'https://cdn.rawgit.com/MathuraMG/p5-accessibility/9cb5bd0b/dist/p5-accessibility.js');
((this.props.textOutput || this.props.gridOutput || this.props.soundOutput) && this.props.isPlaying)) { const accessibleOutputs = sketchDoc.createElement('section');
let interceptorScripts = []; accessibleOutputs.setAttribute('id', 'accessible-outputs');
interceptorScripts = [ accessibleOutputs.style.position = 'absolute';
'/p5-interceptor/registry.js', accessibleOutputs.style.left = '-1000px';
'/p5-interceptor/loadData.js', accessibleOutputs.style.top = 'auto';
'/p5-interceptor/interceptorHelperFunctions.js', accessibleOutputs.style.width = '1px';
'/p5-interceptor/baseInterceptor.js', accessibleOutputs.style.height = '1px';
'/p5-interceptor/entities/entity.min.js', accessibleOutputs.style.overflow = 'hidden';
'/p5-interceptor/ntc.min.js' if (this.props.textOutput) {
]; sketchDoc.body.appendChild(accessibleOutputs);
if (!this.props.textOutput && !this.props.gridOutput && !this.props.soundOutput) { sketchDoc.body.appendChild(accessiblelib);
this.props.setTextOutput(true); const textSection = sketchDoc.createElement('section');
} textSection.setAttribute('id', 'textOutput-content');
if (this.props.textOutput) { sketchDoc.getElementById('accessible-outputs').appendChild(textSection);
let textInterceptorScripts = []; this.iframeElement.focus();
textInterceptorScripts = [ }
'/p5-interceptor/textInterceptor/interceptorFunctions.js', if (this.props.gridOutput) {
'/p5-interceptor/textInterceptor/interceptorP5.js' sketchDoc.body.appendChild(accessibleOutputs);
]; sketchDoc.body.appendChild(accessiblelib);
interceptorScripts = interceptorScripts.concat(textInterceptorScripts); const gridSection = sketchDoc.createElement('section');
} gridSection.setAttribute('id', 'gridOutput-content');
if (this.props.gridOutput) { sketchDoc.getElementById('accessible-outputs').appendChild(gridSection);
let gridInterceptorScripts = []; this.iframeElement.focus();
gridInterceptorScripts = [ }
'/p5-interceptor/gridInterceptor/interceptorFunctions.js', if (this.props.soundOutput) {
'/p5-interceptor/gridInterceptor/interceptorP5.js' sketchDoc.body.appendChild(accessibleOutputs);
]; sketchDoc.body.appendChild(accessiblelib);
interceptorScripts = interceptorScripts.concat(gridInterceptorScripts); const soundSection = sketchDoc.createElement('section');
} soundSection.setAttribute('id', 'soundOutput-content');
if (this.props.soundOutput) { sketchDoc.getElementById('accessible-outputs').appendChild(soundSection);
let soundInterceptorScripts = [];
soundInterceptorScripts = [
'/p5-interceptor/soundInterceptor/interceptorP5.js'
];
interceptorScripts = interceptorScripts.concat(soundInterceptorScripts);
}
scriptsToInject = scriptsToInject.concat(interceptorScripts);
} }
scriptsToInject.forEach((scriptToInject) => { scriptsToInject.forEach((scriptToInject) => {
@ -420,7 +413,6 @@ PreviewFrame.propTypes = {
textOutput: PropTypes.bool.isRequired, textOutput: PropTypes.bool.isRequired,
gridOutput: PropTypes.bool.isRequired, gridOutput: PropTypes.bool.isRequired,
soundOutput: PropTypes.bool.isRequired, soundOutput: PropTypes.bool.isRequired,
setTextOutput: PropTypes.func.isRequired,
htmlFile: PropTypes.shape({ htmlFile: PropTypes.shape({
content: PropTypes.string.isRequired content: PropTypes.string.isRequired
}).isRequired, }).isRequired,

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

@ -1,38 +0,0 @@
import React from 'react';
class TextOutput extends React.Component {
componentDidMount() {
this.TextOutputModal.focus();
}
render() {
return (
<section
id="textOutput-content"
ref={(element) => { this.TextOutputModal = element; }}
>
<h2> Text Output </h2>
<p
tabIndex="0"
role="main"
id="textOutput-content-summary"
aria-label="text output summary"
>
</p>
<table
id="textOutput-content-table"
summary="text output details"
>
</table>
<div
tabIndex="0"
role="main"
id="textOutput-content-details"
aria-label="text output details"
>
</div>
</section>
);
}
}
export default TextOutput;

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

@ -9,7 +9,6 @@ import Editor from '../components/Editor';
import Sidebar from '../components/Sidebar'; import Sidebar from '../components/Sidebar';
import PreviewFrame from '../components/PreviewFrame'; import PreviewFrame from '../components/PreviewFrame';
import Toolbar from '../components/Toolbar'; import Toolbar from '../components/Toolbar';
import AccessibleOutput from '../components/AccessibleOutput';
import Preferences from '../components/Preferences'; import Preferences from '../components/Preferences';
import NewFileModal from '../components/NewFileModal'; import NewFileModal from '../components/NewFileModal';
import NewFolderModal from '../components/NewFolderModal'; import NewFolderModal from '../components/NewFolderModal';
@ -378,14 +377,8 @@ class IDEView extends React.Component {
) && ) &&
this.props.ide.isPlaying this.props.ide.isPlaying
) || ) ||
this.props.ide.isAccessibleOutputPlaying this.props.ide.isAccessibleOutputPlaying
) && )
<AccessibleOutput
isPlaying={this.props.ide.isPlaying}
previewIsRefreshing={this.props.ide.previewIsRefreshing}
textOutput={this.props.preferences.textOutput}
gridOutput={this.props.preferences.gridOutput}
/>
} }
</div> </div>
<PreviewFrame <PreviewFrame

3
client/modules/IDE/reducers/files.js
View file

@ -18,10 +18,11 @@ const defaultHTML =
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/addons/p5.sound.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/addons/p5.sound.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" /> <meta charset="utf-8" />
</head> </head>
<body> <body>
<script src="sketch.js"></script> <script src="sketch.js"></script>
</body> </body>
</html> </html>
`; `;

3
package.json
View file

@ -10,8 +10,7 @@
"build": "cross-env NODE_ENV=production webpack --config webpack.config.prod.js --progress", "build": "cross-env NODE_ENV=production webpack --config webpack.config.prod.js --progress",
"test": "npm run lint", "test": "npm run lint",
"fetch-examples": "node fetch-examples.js", "fetch-examples": "node fetch-examples.js",
"fetch-examples-gg": "node fetch-examples-gg.js", "fetch-examples-gg": "node fetch-examples-gg.js"
"postinstall": "git submodule update --remote --recursive"
}, },
"main": "index.js", "main": "index.js",
"author": "Cassie Tarakajian", "author": "Cassie Tarakajian",

1
static/p5-interceptor

@ -1 +0,0 @@
Subproject commit 62938f2e9cbe1c83a9c1b702a9deccb11a452170